HTMLにフォントを埋め込む方法は？

https://stackoverflow.com/questions/220236

03-07-2019
|

質問

フォントをWebページに埋め込むための適切なソリューション（特にSEO側から）を見つけようとしています。これまでのところ、 W3Cソリューション（Firefoxでも動作しない）、およびこの非常にクールなソリューション。 2番目の解決策は、タイトルのみです。全文に対応したソリューションはありますか？ Webページの標準フォントにうんざりしています。

ありがとう！

解決

この質問が最初に質問および回答されてから、変更が加えられました。 @ font-face埋め込みを使用して本文テキストのクロスブラウザーフォント埋め込みを機能させるために、多大な作業が行われました。

ポールアイルランド語防弾@ font-face構文の組み合わせ他の複数の人からの試み。実際に記事全体（トップだけでなく）を読むと、単一の@ font-faceステートメントでIE、Firefox、Safari、Opera、Chromeなどをカバーできます。基本的に、これはOTF、EOT、SVG、およびWOFFを、何も壊さない方法で提供できます。

彼の記事から抜粋：

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

そのベースから、 Font Squirrel は、 @ font-face Generator を使用すると、TTFまたはOTFファイルをアップロードして、事前に作成されたCSSとデモHTMLページとともに、他の種類のフォントファイルを変換しました。 Font Squirrelには、何百もの@ font-faceキットもあります。

Soma Designは、 FontFriendブックマークレットも作成しました。これにより、ページ上のフォントがオンザフライで再定義されます。あなたは物事を試すことができます。 FireFox 3.6+でのドラッグアンドドロップによる@ font-faceサポートが含まれています。

最近、Googleは Google Web Fonts の提供を開始しました。これは、 Googleのサーバーから提供されるオープンソースライセンス。

ライセンスの制限

最後に、WebFonts.infoはライセンスに基づいて@ font-face埋め込みに使用可能なフォント。完全なリストであると主張しているわけではありませんが、その上にあるフォントは（おそらくCSSファイルの属性などの条件で）埋め込み/リンクに使用できるはずです。 ライセンスを読むことは重要です。フォントのダウンロードに関して明らかに進められていない制限がいくつかあるためです。

他のヒント

Facetype.js を試して、変換します。 JavascriptファイルへのTTFフォント。完全なSEO互換性があり、FF、IE6、およびSafariをサポートし、他のブラウザーでは正常に低下します。

いいえ、最先端のブラウザを使用している人にのみ対応する場合を除き、ボディタイプには適切な解決策はありません。

Microsoftには、独自の独自のフォント埋め込み技術である WEFT がありますが、数年後にそれが話題になったと聞きましたが、それを使用する人は誰もいません。

表示タイプ（見出し、ブログ投稿のタイトルなど）にはsIFRを使用し、ボディタイプ（Trebuchet MSなど）には使い古されていないWebセーフフォントの1つを使用します。すべてのWebセーフフォントに飽き飽きしているなら、おそらく用語の定義が狭すぎます＆＃8212;＆nbsp; 主要なOSに同梱されているこのストックフォントのマトリックスでは、フォントカスケードを見つけることができます。ほぼすべてのWebユーザーをキャッチします。

たとえば： font-family：＆quot; Lucida Grande＆quot;、＆quot; Verdana＆quot;、sans-serif は一般的なフォントカスケードです。 OS XにはLucida Grandeが付属していますが、Windowsを使用している場合は、Lucida Grandeと同様のサイズと形状の文字を持つWebセーフフォントであるVerdanaを入手できます。 Linuxユーザーは、ほとんどのディストリビューションのパッケージマネージャーに存在するWebセーフフォントパッケージをインストールした場合、または通常のサンセリフにフォールバックする場合にもVerdanaを取得します。

また、それはありそうもないことです-EOTはIEでのみサポートされているかなり制限的な形式です。 Safari 3.1とFirefox 3.1（現在のアルファ版）、そしておそらくOpera 9.6は両方ともTrue Type Font（ttf）埋め込みをサポートし、少なくともSafariは同じメカニズムでSVGフォントをサポートします。リストについては、しばらくの間戻るについてよく議論しました。

商用オプションである Typekit をチェックしてください（無料のパッケージもあります）。

使用しているブラウザ（ @ font-face と EOT 形式）に応じて異なる手法を使用し、フォントのライセンスに関するすべての問題を処理します。あなたも。 IE6までのすべてをサポートしています。

Typekitの機能に関する詳細情報を次に示します。

しばらく前に尋ねました。答えは、基本的には機能しないということです。：（

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow