2

@font-faceCSSルールの例を次に示します。

@font-face {
  font-family: 'DroidSerifBoldItalic';
  font-weight: normal;
  font-style: normal;
  src: url('DroidSerif-BoldItalic-webfont.eot');
  src: url('DroidSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
       local('Droid Serif Bold Italic'), local('DroidSerif-BoldItalic'),
       url('DroidSerif-BoldItalic-webfont.woff') format('woff'),
       url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
}

次の@font-faceCSSルールの方が良いと思いませんか？（ご覧のとおり、ブラウザー（この場合はIEでも）は、フォントをダウンロードする前に、ユーザーのコンピューターでフォントが使用可能かどうかを最初に確認できます。）

@font-face {
  font-family: 'DroidSerifBoldItalic';
  font-weight: normal;
  font-style: normal;
  src: local('Droid Serif Bold Italic'), local('DroidSerif-BoldItalic');
  src: url('DroidSerif-BoldItalic-webfont.eot');
  src: url('DroidSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
       url('DroidSerif-BoldItalic-webfont.woff') format('woff'),
       url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
}

ここに落とし穴はありますか？そうでない場合、なぜ誰もが後者を使用しないのですか？

4

1 に答える 1

3

@ font-faceについて私が知っていることから、ローカルを使用することの背後にある主な恐れは、フォントが誰かのデスクトップで同じ名前にされないことです。あなたはそこでコントロールを譲っています、そしてあなたが間違っているならそれは失敗するでしょう。しかし、あなたは興味深い質問を投げかけます、そして私はあなたが間違っていると言っているのではありません。あなたはこことここでそれについてもっと読むことができます。

補遺

通常、IEでの不要なhttpリクエストを防ぐためのマスクとして使用されます。

IE（少なくともIE8まで）は記述子をサポートしておらず、EOTフォント形式の直後に記述子localを配置すると、古いバージョンのInternet Explorerが他のフォント形式（宣言内）をダウンロードできないため、順序が重要になります。 tはサポートされており、とにかく使用されません。localsrc

@BoltClockがコメントしたことは真実です。localそして、それが私たちが2つの定義を使用する理由です- local('Droid Serif Bold Italic'), local('DroidSerif-BoldItalic'),。前者はフォントの通常の名前（Safariを除くすべてのブラウザで認識されます）であり、後者はSafariで必要なフォントのPostScript名です（少なくともMac / OS Xシステムでは）。

同じ名前の2つの異なるフォント（主に2つの異なるOS）のような問題を回避するために、単に。を使用するものもありますlocal('☺')。

于 2012-05-01T02:07:56.393 に答える