1

假设我们有一个这样的字体部分

@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*/;
}

现在，如果我取消注释无衬线字体，它将优先于自定义字体，尽管最后提到了它。为什么？如何为无法使用可下载网络字体的用户指定备份变体？

===更新===

如果不确定为什么local('?')要使用，请看这里http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/#smiley

我认为它sans-serif破坏了我的 CSS 是错误的，这是显示自定义“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 回答