[解決済み] HTMLにフォントを埋め込むには？

質問

ウェブページにフォントを埋め込むための適切なソリューション (特に SEO の側面から) を見つけようとしています。これまでのところ、私は W3C のソリューション というのがありますが、これはFirefoxでさえ動きません。 このかなりクールなソリューション . 2番目の解決策は、タイトルのみのものです。フルテキストに使えるソリューションはないのでしょうか？ウェブページの標準的なフォントにはうんざりしています。

ありがとうございます！

どのように解決するのですか？

状況が変わった この質問が最初になされ、回答されて以来です。本文のためのクロス ブラウザ フォント埋め込みが @font-face 埋め込みを使って動作するようにするために、大量の作業が行われました。

Paul Irish がまとめた 弾丸のような @font-face 構文 を、他の複数の人たちの試みを組み合わせて作成しました。この記事全体を実際に見てみると（一番上だけでなく）、1 つの @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");
}

そのベースから作業する。 フォント・リス を含む様々な便利なツールをまとめました。 フォントフェイス・ジェネレータ では、TTF または OTF ファイルをアップロードすると、他のタイプのフォントファイルが自動変換され、あらかじめ組み込まれた CSS とデモ用の HTML ページが提供されます。また、Font Squirrel には 何百もの @font-face キット .

ソーマデザインはまた、このような FontFriendブックマークレット このブックマークレットは、ページ上のフォントをその場で再定義してくれるので、いろいろと試すことができます。FireFox 3.6+ でのドラッグ＆ドロップによる @font-face のサポートも含まれています。

より最近では、Google は Google ウェブフォント これは、オープン ソース ライセンスの下で利用可能なフォントの品揃えで、Google のサーバーから提供されます。

ライセンスの制限

最後に、WebFonts.info は素晴らしい wiki のリストで font-face 埋め込みで利用可能なフォント の一覧を、ライセンスに基づいて Wiki でまとめています。網羅的なリストであるとは言いませんが、このリストにあるフォントは、埋め込みやリンクに利用できるはずです（おそらく、CSS ファイルに帰属表示をするなどの条件付きで）。 ライセンスを読むことは重要です というのも、フォントのダウンロードでは明らかに前面に押し出されていない制限事項があるからです。