Question

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

@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，它将优先于自定义字体，尽管最后提到它。为什么？如何为不能使用可下载的webfonts的用户指定备份变体？

=== UPD ===

如果有疑问，请使用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;
}

Answer 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

为什么Firefox会忽略@ font-face的自定义字体？

1 个答案: