Question

用于工作的字体，今天他们停止工作，没有任何CSS更改。我可以从firebug网络面板上看到.woff被下载了（奇怪的是两次，第一次DL只是一个永远滚动的圆圈而且没有完成）。在FF9 / 10上测试过。这是我的CSS：

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('../fonts/BebasNeue-webfont.eot');
    src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BebasNeue-webfont.woff') format('woff'),
         url('../fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

a.css3button, button, input[type="submit"], input[type="reset"], input[type="button"] {
    ..
    font-family: "bebasNeueRegular", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    ..
}

我是从http://dev.florianweber.me/bf3buttons/#得到的 - 它在我的Firefox中可以使用。什么可能导致冲突？

Answer 1

@font-face {
    font-family: 'BebasNeueRegular';

和

font-family: "bebasNeueRegular"

不一样。注意拼写错误，font-family可以区分大小写。

Answer 2

我们的CDN域服务于.css文件 - 我猜Firefox不喜欢。我设置了.css中的字体文件的硬路径，它似乎现在正在工作。：）

font-family: 'BebasNeueRegular';
src: url('http://site.com/sites/default/themes/theme/fonts/BebasNeue-webfont.eot');
src: url('http://site.com/sites/default/themes/theme/fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
     url('http://site.com/sites/default/themes/theme/fonts/BebasNeue-webfont.woff') format('woff'),
     url('http://site.com/sites/default/themes/theme/fonts/BebasNeue-webfont.ttf') format('truetype'),
     url('http://site.com/sites/default/themes/theme/fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;

另一种方式：

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

Answer 3

我发现Firefox加载了不同的字体名称。

这对我有用，尝试一下，不知道哪一个是好的，但它有效。尝试不带括号等。

    font-family: 'bebas_neueregular', Bebas Neue, 'Bebas Neue', bebas_neueregular;

@ font-face在Firefox中不起作用，但在Chrome中有效

3 个答案: