1

我通过这样做将字体加载到我的 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 中不能正常工作。难道我做错了什么？

4

4 回答 4

1

查看 Firefox 的 Web 控制台，我看到以下 CSS 错误（以及其他错误）：

背景：#fff，estilos.css：32

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

可下载字体：被消毒剂拒绝（字体系列：“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了解为什么应该这样做。

于 2013-10-28T20:58:41.237 回答
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

于 2013-10-31T12:51:52.743 回答
0

我想到了。我再次下载了字体，看来字体本身有问题。

于 2013-10-29T00:30:27.333 回答
-1

正如 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');
}
于 2013-10-28T19:16:44.987 回答