1

そのようなfont-faceセクションがあるとしましょう

@font-face {
   font-family: 'F';
   src: url("/fonts/F.eot?") format("embedded-opentype"); 
   src: local('?'),
        url("/fonts/F.woff") format("woff"),
        url("/fonts/F.ttf") format("truetype"),
        url("/fonts/F.svg") format("svg"); 
   font-weight: normal;
   font-style: normal;
}

そしてボディスタイル

body {
font-family: 'F' /*, sans-serif*/;
}

ここで、sans-serif のコメントを外すと、最後に言及されているにもかかわらず、カスタム フォントよりも優先されます。なんで？ダウンロード可能な Web フォントを使用できない人のために、バックアップ バリアントを指定するにはどうすればよいですか?

===アップデート===

なぜ使用されているか疑問がある場合はlocal('?')、ここを参照してくださいhttp://paulirish.com/2009/bulletproof-font-face-implementation-syntax/#smiley

CSS が壊れているという私の考えは間違っていましたsans-serif。カスタム 'F' フォントを示す実際のコードを次に示します。'Trebuchet MS' がコメント解除される場合、font-family は sans にドロップされます。

body {
font-family: 'F' /*, 'Trebuchet MS'*/ , sans-serif;
}
4

1 に答える 1

1

あなたの構文は少し間違っているようです。「?」最初の 'src' プロパティ値の最後にある は、IE バージョン 6 から 8 を修正することを目的としていますが、実際には Firefox に影響を与える可能性があります。使用する正しい構文は次のとおりです。

@font-face {
        font-family: 'MyWebFont';
        src: url('webfont.eot'); /* IE9 Compat Modes */
        src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('webfont.woff') format('woff'), /* Modern Browsers */
             url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
        }

ソース: http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

于 2012-10-03T12:36:44.803 に答える