@font-face 不会在 Wordpress 网站上的 Firefox (5.01) 中加载答案

【问题标题】：@font-face won't load in Firefox (5.01) on Wordpress-site@font-face 不会在 Wordpress 网站上的 Firefox (5.01) 中加载
【发布时间】：2011-10-19 06:01:02
【问题描述】：

我的 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 中加载。有什么想法吗？

【问题讨论】：

只是为了仔细检查，.ttf 文件是否正确链接？此外，您是否对 .htaccess 做一些不同的事情来让您的 url 包含“。”在“/index_wp.php/”中？我不确定，但我的直觉表明，当它尝试获取 .ttf 文件时，这可能会导致问题？

标签： php wordpress firefox font-face

【解决方案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 只是违反了这里的规范。

【讨论】：

【解决方案2】：

也许你应该看看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 中将其用作 ragular 字体：

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

【讨论】：

抱歉，我需要使用这种字体（Century Gothic），而 Google 没有。

【解决方案3】：

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

【讨论】：

在 FF 中，它向我显示 Verdana，这是“CenturyGothicRegular”的后备，所以它不会被覆盖。
在 FF5.0 上，它显示在“GillsSans”中，来自 reset.css。我确实有一个来自 Office 2010（我认为）的“Gills Sans”（注意空格）。由于它在 .css 中拼写错误，我还看到了备用 Verdana。
我不知道你看到了什么，但 GillSans 正在被我的 font: 12px/1.2 "CenturyGothicRegular", verdana, sans-Serif; 覆盖。即使我使用 Firebug 将 reset.css 声明编辑为我拥有的字体，Verdana 仍会显示。