Question

我通过这样做将字体加载到我的CSS中：

@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrow.ttf);
    font-weight:normal;
    font-style:normal;
}
@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrowBold.ttf);
    font-weight:bold;
    font-style:normal;
}
@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrowItalic.ttf);
    font-style:italic;
    font-weight:normal;
}
@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrowBoldItalic.ttf);
    font-weight:bold;
    font-style:italic;
}

普通风格适用于所有浏览器。

粗体和斜体样式仅在IE9中正常工作，但在Chrome和FireFox中无法正常工作。我做错了吗？

Answer 1

将以下内容放入.htaccess中，一切都会好的，至少在现代FF版本上是这样。

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

到这里查看Stack Overflow的完整讨论： CSS @font-face not working with Firefox, but working with Chrome and IE

Answer 2

查看Firefox的Web控制台我看到以下CSS错误（其中包括）：

背景：#fff，estilos.css：32

可下载字体：表'cmap'：无法解析表（font-family：“arialNarrow”样式：正常权重：粗体拉伸：正常src索引：0）来源：http://www.meengoo.com/test/fonts/ArialNarrowBold.ttf estilos.css

可下载字体：被sanitizer拒绝（font-family：“arialNarrow”样式：正常体重：粗体拉伸：正常src索引：0）来源：http://www.meengoo.com/test/fonts/ArialNarrowBold.ttf estilos.css

cmap错误意味着该字体已损坏。您可能最好使用http://www.font2web.com/之类的服务来修复字体并将其转换为适当的格式。它还会创建CSS，然后您可以通过调整来为您提供正确的粗体和斜体规则。

在定义@ font-face规则时，font-family不需要唯一的名称是正确的（实际上，在定义字体变体时不应该这样）。我能看到的唯一问题是你有一些额外的字体权重和字体样式规则。

试试这个：

@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrow.ttf);
}
@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrowBold.ttf);
    font-weight:bold;
}
@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrowItalic.ttf);
    font-style:italic;
}
@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrowBoldItalic.ttf);
    font-weight:bold;
    font-style:italic;
}

请注意，顺序很重要，粗体/斜体样式必须持久。怀疑者应该参考http://www.metaltoad.com/blog/how-use-font-face-avoid-faux-italic-and-bold-browser-styles来了解为什么要这样做。

Answer 3

我明白了。我再次下载了字体，似乎字体本身有问题。

Answer 4

正如Aniskhan指出的那样，font-family应该有一个独特的名称。

此外，要使其在所有浏览器中都有效，请添加所有不同的格式，包括.ttf。

@ font-face的示例CSS片段

@font-face {
    font-family: 'LatoHairline';
    src: url('/fonts/lato-hairline-webfont.eot');
    src: url('/fonts/lato-hairline-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/lato-hairline.woff') format('woff'),
         url('/fonts/lato-hairline.ttf') format('truetype'),
         url('/fonts/lato-hairline.svg#LatoHairline') format('svg');
}

@font-face {
    font-family: 'LatoBold';
    src: url('/fonts/lato-bold-webfont.eot');
    src: url('/fonts/lato-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/lato-bold.woff') format('woff'),
         url('/fonts/lato-bold.ttf') format('truetype'),
         url('/fonts/lato-bold.svg#LatoBold') format('svg');
}

font-face bold在Chrome和Firefox中不起作用

4 个答案: