137

@font-face初めて使用し、fontsquirrel からフォントキットをダウンロードしました

私のCSSに挿入することをお勧めするコードは次のとおりです。

@font-face {
    font-family: 'junctionregularRegular';
    src: url('Junction-webfont.eot');
    src: local('☺'), 
        url('Junction-webfont.woff') format('woff'), 
        url('Junction-webfont.ttf') format('truetype'), 
        url('Junction-webfont.svg#webfontoNEpZXy2') format('svg');
}

さて、スマイリーフェイスのことは私を困惑させました。しかし、src 内の URL の数も同様です。なぜそんなに多くのファイルを推奨し、ページがレンダリングされるときにすべてのファイルがブラウザーに送信されるのでしょうか? .ttf 以外をすべて削除しても害はありますか?

4

3 に答える 3

98

font-squirrelのfont-faceジェネレーターでメモを読むと、それがpaulirishによる落とし穴であることがわかります。

これが彼のブログ投稿からの抜粋です：

そして..@font-face構文に関して

元の防弾構文よりも防弾スマイリーバリエーションをお勧めします。

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
       url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

防弾ポストから：

はい、それはスマイリーフェイスです。OpenType仕様では、2バイトのUnicode文字はMacのフォント名ではまったく機能しないため、誰かが実際にそのような名前のフォントをリリースする可能性は低くなります。

スマイリーがより良い解決策である理由はいくつかあります。

  • Webkit + Font Managementソフトウェアは、グリフをAブロックに変換するなど、ローカル参照を台無しにする可能性があります。

  • OS Xでは、フォント管理ソフトウェアがシステム設定を変更して、ライブラリ/フォントの外部からアクセスできるlocal（）フォントにアクセスしようとしたときにダイアログを表示する場合があります。私の防弾ポストの詳細。Font Explorer Xは、Firefoxの他のものを台無しにすることでも知られています。

  • 可能性は低いですが、思っているものとはまったく異なるlocal（）フォントを参照することもできます。（異なるフォント、同じ名前のTypophileの投稿）少なくともリスクがあり、タイプの制御をブラウザーとホストマシンの両方に委ねています。このリスクは、フォントのダウンロードを回避するメリットに見合わない場合があります。

これらはすべてかなりエッジケースの問題ですが、検討する価値があります。

于 2010-09-13T07:01:35.337 に答える
37

The local(☺︎) is a css hack to divert IE6-8 from downloading fonts it can't use (it can only use fonts in EOT format).

Explained: The last src property takes precedence in the CSS cascade, meaning that the CSS will be parsed from bottom to top. The local(☺︎) will make IE skip the src at the bottom, without wasting bandwidth downloading fonts it can't use, and rather go straight to the font in .eot format (defined on the line above in your question) that it will use. The smiley is just to ensure there won't be a local font with that name (character combination).

Read more here: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

于 2014-04-03T11:18:14.083 に答える