Question

我的Wordpress网站有问题。 @ font-face适用于Safari和Chrome，但不适用于Firefox 5.01。我使用了Fontsquirrel的字体生成器（http://www.fontsquirrel.com/fontface/generator）来生成ttf，woff，eot和svg字体。

问题似乎与Wordpress网站有关。我用相同的字体测试了一个简单的html网站，然后Firefox 加载并显示字体。

我读过这个问题可能与CMD有关。我也听说过Firefox，出于安全考虑，只有在硬编码确切的URL时才会加载字体（http://www.koodoz.com.au/klog/font-face-woe-with-wordpress-firefox/）不是Wordpress中的php链接。

php wordpress网站，notworking：link。工作的html网站：链接

Firefox中不会加载该字体。有什么想法吗？

Answer 1

从Firefox错误控制台：

Warning: @font-face rule not allowed within @media or @-moz-document rule.
Source File: http://ellenz.se/wp-content/themes/BLANK-Theme/style.css?1312303802
Line: 18

事实上，CSS语法不允许嵌套@ -rules，尽管人们一直在谈论放宽这种限制。 WebKit只是违反了规范。

Answer 2

FF的Firebug dom检查员显示您的“notworking”页面的body样式被reset.css的第26行覆盖。看来FF正在将@import url视为在style.css文件的其余部分之后应用。

Answer 3

也许你应该看一下Google's font API。它非常易于使用，甚至适用于IE6。

只需从Google Font Directory中选择一种字体，然后您只需将其导入HTML-head-section（在css之前）：

<link rel="stylesheet" 
      type="text/css" 
      href="http://fonts.googleapis.com/css?family=Font+Name">

之后，你可以在你的CSS中使用它作为一个简单的字体：

body {
  font-family: 'Font Name', serif;
  font-size: 48px;
}

在Wordpress网站上的Firefox（5.01）中不会加载@ font-face

3 个答案: