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

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网站，不起作用：链接。 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在将其余的style.css文件之后应用@import url作为处理。

Answer 3

也许您应该看看Google的font API 。 它非常易于使用，甚至可以与IE6一起使用。

只需从Google字体目录中选择一种字体，然后只需将其导入HTML头部（在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;
}