web-dev-qa-db-ja.com

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

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

ありがとう！

javascripthtmlflashfontsembed
77
Dan Rosenstark

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

Paul Irishがまとめた 防弾@ 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 Bookmarklet を作成しました。これは、ページのフォントをオンザフライで再定義するため、試してみることができます。 FireFox 3.6+でのドラッグアンドドロップによる@ font-faceのサポートが含まれています。

最近、Googleは Google Web Fonts の提供を開始しました。これは、オープンソースライセンスの下で利用でき、Googleのサーバーから提供されるフォントの品揃えです。

ライセンスの制限

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

131
fencepost

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

9
Martin Meixger

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

Microsoftには [〜＃〜] weft [〜＃〜] という独自のフォント埋め込み技術がありますが、これについて何年も話を聞いたことはなく、それを使用する人はいません。

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

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

6
savetheclocktower

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

4
olliej

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

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

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

3
philfreo

私はこれを尋ねました しばらく前 。答えは基本的には機能しないということです。 :(

2
Marcus Downing