@ 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;
}