css - 2012 年後半の @font-face の実装

Question

私は、今日の最新のブラウザーで @font-face を実装する最良の方法を調査するために、数晩を費やしてきました。私はフルタイムの Web/システム開発者であり、グラフィックデザイナーとしてのバックグラウンドを持っています。Web デザインの機会と可能性がますます興味深いものになっていると感じています。それで、私はいくつかのテストを行いましたが、誰かがアドバイス、より良いアイデア、またはこれに関する情報を持っているかどうかを聞きたいと思います. 私のテストシナリオは次のようになります。

さまざまなオンラインツールとアプリケーションを多数テストしましたが、最終的には 1 つのオンラインサービスと 1 つのアプリケーションに絞り込みました。

FontSquirrel、オンラインツール - 無料。http://www.fontsquirrel.com/fontface/generator
FontXChange、mac/win 用アプリケーション - 99$。http://fontgear.net/fontxchange.html

Mac に同梱されているフォント、Tamil Sangam MN と Tamil Sangam MN Bold を使用しました。どちらもオープンタイプの .otf でした。

タミルサンガムMN.otf - 290 KB
タミルサンガムMNBold.otf - 271 KB

コンバージョンサイズの調査

フォントリス

これは優れたオンラインツールです。非常に優れています。いくつかの異なるモードがあり、私は Basic と Optimal を使用しました。私の .otf ファイルの出力は、svg、ttf、eot、および woff でした。

基本

通常

タミルサンガムMN.svg 233 KB
タミルサンガムMN.ttf 71 KB
タミルサンガムMN.eot 25 KB
タミルサンガムMN.woff 30 KB
合計: 359KB

大胆な

タミルサンガムMNbold.svg 225 KB
タミルサンガムMNbold.ttf 69 KB
タミルサンガムMNbold.eot 25 KB
タミルサンガムMNbold.woff 30 KB
合計: 349KB

最適な

最適なフォントで最初に気付いたのは、それらが基本的なバリアント (260 KB) よりもかなり小さいことです!

通常

タミルサンガムMN.svg 33 KB
タミルサンガムMN.ttf 25 KB
タミルサンガムMN.eot 15 KB
タミルサンガムMN.woff 17 KB
合計: 90KB

大胆な

タミルサンガムMNbold.svg 33 KB
タミルサンガムMNbold.ttf 25 KB
タミルサンガムMNbold.eot 15 KB
タミルサンガムMNbold.woff 17 KB
合計: 90KB

FontXChange

このツールは、Web 用のフォントをジャグリングするだけではありません。複数のフォーマットを相互に変換できます。opentype、True Type、Web フォント、Post Script など。その結果、全体的に非常に高品質なファイルが非常に大きくなり、FontSquirrels Basic バージョンのほぼ 2 倍、FontSquirrels Optimal バージョンの 7 倍以上の大きさになります。

通常

タミルサンガムMN.svg 480 KB
タミルサンガムMN.ttf 72 KB
タミルサンガムMN.eot 72 KB
タミルサンガムMN.woff 80 KB
合計: 704KB

大胆な

タミルサンガムMNbold.svg 463 KB
タミルサンガムMNbold.ttf 69 KB
タミルサンガムMNbold.eot 70 KB
タミルサンガムMNbold.woff 80 KB
合計: 682KB

CSS の設定

最初は、フォントリスト内の実際の順序が重要であることに少し戸惑いました。その後、最適なフォーマットに固執するのではなく、最初に互換性があると判断したフォーマットを採用する人もいることがわかりました。いくつかの実験の後、これが css をフォーマットする最適な方法であることがわかりました (ファイルの種類の順序に注意してください | 重要! )。

@font-face {
    font-family: 'TamilSangam';
    src: url('.eot');
    src: url('.svg') format('svg'),          
         url('.eot?#iefix') format('embedded-opentype'),
         url('.woff') format('woff'),
         url('.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

私のテスト結果

通常のフォント

私は*で最高のバージョンをマークしました

Firefox MAC (15.0.1)

FontSquirrel 最適: 少し太めにレンダリングします
FontSquirrel Basic: 少し太めにレンダリングします
FontXChange 4.0: 少し太めにレンダリングされますが、カーニングは FontSquirrel バージョンよりも優れています *

Firefox Windows (15.0.1)

FontSquirrel Optimal: 非常にきれいにレンダリングします
FontSquirrel Basic: フォントがギザギザ/途切れる
FontXChange 4.0: 非常に素晴らしいレンダリング *

サファリマック (6.0)

FontSquirrel Optimal: 完璧なレンダリング
FontSquirrel Basic: 完璧なレンダリング
FontXChange 4.0: 完璧なレンダリング *

クロームマック (21.0)

FontSquirrel 最適: 少し太め
FontSquirrel Basic: 少し太い
FontXChange 4.0: 完璧なレンダリング *

クローム Windows (21.0)

FontSquirrel Optimal: 完璧なレンダリング
FontSquirrel Basic: 完璧なレンダリング
FontXChange 4.0: 完璧なレンダリング *

インターネットエクスプローラー (9.0)

FontSquirrel Optimal: 完璧なレンダリング *
FontSquirrel Basic: 完璧なレンダリング
FontXChange 4.0: フォントがギザギザ/途切れる

太字フォント

Firefox MAC (15.0.1)

FontSquirrel 最適: 非常に太くレンダリングします *
FontSquirrel Basic: 非常に太くレンダリングします
FontXChange 4.0: 非常にファットなレンダリングを行いますが、カーニングが向上します (Mac 用にこれを選択したいのですが、Windows 版の firefox には互換性がないため、ここでは選択する必要があります)。

Firefox Windows (15.0.1)

FontSquirrel 最適: レンダリングは問題ありませんが、アンチエイリアス処理はあまり行われていません *
FontSquirrel Basic: フォントがギザギザ/途切れる
FontXChange 4.0: フォントが少し歪む/ギザギザになる

サファリマック (6.0)

FontSquirrel Optimal: 完璧なレンダリング *
FontSquirrel Basic: 完璧なレンダリング
FontXChange 4.0: 太くレンダリング

クロームマック (21.0)

FontSquirrel Optimal: 完璧なレンダリング *
FontSquirrel Basic: 良好なレンダリング、数パーセントのファット
FontXChange 4.0: 太くレンダリング

クローム Windows (21.0)

FontSquirrel Optimal: 完璧なレンダリング *
FontSquirrel Basic: 完璧なレンダリング
FontXChange 4.0: 非常に太いレンダリング

インターネットエクスプローラー (9.0)

FontSquirrel Optimal: 完璧なレンダリング *
FontSquirrel Basic: 完璧なレンダリング
FontXChange 4.0: フォントがギザギザ/途切れる

最終的な実装

私は通常、次のパターンで Web フォントを整理します: <webfonts> / <conversion source> / <conversion method> / <fonts>

/* Regular */
@font-face {
    font-family: 'TamilSangam';
    src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn.eot');
    src: url('webfonts/fontxchange/TamilSangamMN.svg#TamilSangamMN') format('svg'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn.eot?#iefix') format('embedded-opentype'),
         url('webfonts/fontxchange/TamilSangamMN.woff') format('woff'),
         url('webfonts/fontxchange/TamilSangamMN.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Bold */
@font-face {
    font-family: 'TamilSangam';
    src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.eot');
    src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.svg#tamil_sangam_mnbold') format('svg'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.eot?#iefix') format('embedded-opentype'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.woff') format('woff'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

結果のグラフィカルな概要 (フルサイズはhttp://i.stack.imgur.com/atb98.pngにあります)

ここに画像の説明を入力

結論とクエスト

Mac と Windows のすべてのブラウザーで適切にレンダリングされるフォントを提供する単一のツールは存在しません。各フォントで実験とテストを行う必要があります。上記の方法論は、@font-face を使用してテストおよび実験するための簡単な方法と提案にすぎません。

メソッドまたは実装で変更できると思われるものはありますか?見逃したアプリケーションまたはサービスはありますか?

よろしくお願いします/ T

score 4 · Accepted Answer

@font-フェイスコード

この名前のローカルフォントを検索するものを追加src: local('ò?'),して、カスタムフォントと同じ名前のローカルフォントをブラウザに無視させることができます。これを逆に使用して、カスタムフォントのダウンロードを制限することもできます。モバイルサポートを見る

私は通常?#iefix、標準の.eotsrcの2番目に行が表示されますが、これまでに必要だったとは言えず、特定の位置付けが必要かどうかもわかりません（.eot最初にリストされていることを除いて）。

フォントの追加制御

フォントの読み込みに失敗するシナリオでフォントをより細かく制御したい場合、またはIEでFOUCを処理したい場合は、読み込み中にフォントを非表示にしたり、フォントを変更したりできるjQueryプラグインがあります。フォールバックフォントがレイアウトを破壊しないように、サイズは失敗します。フォント（@ font-face）がすでにロードされているかどうかを知る方法は？

IE6-8のバグ

さらに、IE6-8では一部のフォントの.eotファイルで問題が発生する可能性があります。これは、次のいずれかで修正できます（完全ガイドはこちら）。

新しい.eotファイルをオンラインで変換します。これが機能しない場合、問題はファイルのプロパティ自体にあります。
FontForgeを使用してフォントファイルの名前プロパティを編集してから、再保存して再変換します。

CORS

IEとFFにのみ関連しているようです。他のすべてのブラウザ（テストされた最新バージョンのみ）には問題はありません。

CORSはフォントの一般的な問題であり、別のドメインまたはホスト名からフォントをロードするときに発生します。これには、サイトを指定するwwwかどうかも含まれます。CSSファイルと同様に、@font-faceコードは比較的参照する必要があります。<base>HTMLでタグを定義する場合にも問題が発生します。これが不可能な場合、またはCORSについて心配したくない場合は.htaccess、フォントディレクトリ内のファイルに次のコードを配置する必要があります。

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

MIMEタイプ

フォントの提供に関する404の問題は、誤ったMIME定義が原因である可能性があります。詳細については、こちらを参照してください：WOFFフォントのMimeタイプ？

モバイルサポート

モバイルサポートはかなり悪いです。Androidは4.0まで適切にサポートしていません。私が知る限り、WindowsMobileはまったくサポートしていません。私はこれに対する回避策または解決策を調査しています。これまでのところ、フォント（@ font-face）がすでにロードされているかどうかを知る方法を使用するのが最善です。フォントの読み込みに失敗したときにテキストの画像を表示します。これは実際にはサイトのタイトルとアイコンに対してのみ機能します。そうでない場合、回避策はひどく悪く、SEOやUXに悪影響を及ぼします。

@font-faceサポートを参照してください。

さらに、Android 2.2-xxxバージョンは、IEの修正としても使用されている@font-face場合、失敗します。local()すべてのベースをカバーしたい場合は、複数のスタイルシートが必要になる場合があります。詳細はこちら：https ：//stackoverflow.com/a/4520467/1455709

SVGとChrome

#fontNameURLにを含める場合、ChromeはSVGフォントを使用しません。また、SVGの前にWOFFを使用しますが、レンダリングはうまくいきません。これがおそらく、誰もがChromeでのくだらないフォントレンダリングに夢中になっている理由です...これを克服するには、追加の@font-face宣言が必要です。

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'myFont';
        src: url('fonts/myFont.svg') format('svg');
    }
}

css - 2012 年後半の @font-face の実装

コンバージョン サイズの調査

フォントリス

基本

最適な

FontXChange

CSS の設定

私のテスト結果

通常のフォント

太字フォント

最終的な実装

結論とクエスト

1 に答える 1

@font-フェイスコード

フォントの追加制御

IE6-8のバグ

CORS

MIMEタイプ

モバイルサポート

SVGとChrome

Related

Reference

コンバージョンサイズの調査