所有 Windows 浏览器的@font-face 问题答案

【问题标题】：@font-face issues with ALL Windows browsers所有 Windows 浏览器的@font-face 问题
【发布时间】：2011-09-23 14:15:47
【问题描述】：

编辑： 谢谢大家！问题似乎解决了；我认为这与字体的路径有关，并为浏览器提供足够的替代字体类型以供访问。我最终使用了 fontsquirrel.com 和 Paul Irish 的 @font-face 的防弹语法来让一切运行起来。 :)

我正在尝试在我的网站上使用@font-face，它可以在我所有的 Mac 浏览器（Firefox、Safari、Chrome）上完美运行。但我发现 Windows 浏览器都没有显示字体。

这不是浏览器版本问题：即使使用 FF5.0 和 Chrome 12.x 也无法使用。

这不是服务器端问题：我通过上传到两个不同的服务器对其进行了测试，两者都表现出相同的行为。

不是 Windows 版本问题：我在 WinXP 和 Win7 上测试过。

这不是一个小的“新字体看起来如何”问题：字体只是没有显示出来。

另外，奇怪的是：我尝试使用 Wine 在我的 Mac 上安装 Windows Firefox4，然后运行它，它运行良好！但是在实际 Windows 上运行的 Firefox 4 不会使用这些字体。这是否意味着正在发生的任何事情都是由操作系统检测触发的？

对这里可能发生的事情有什么想法吗？

编辑：我正在使用以下内容：

@font-face {
     font-family:"Name", src:url("./fonts/FontName.ttf") format("truetype"); 
}

并尝试过语法的变体，例如：

@font-face {
     font-family:Name, src:url(fonts/FontName.ttf) format("truetype"); 
}

上述两种语法在 Mac 上都能正确呈现，但在 Windows 上却不行。

【问题讨论】：

【解决方案1】：

我想知道你的src url 是否窒息。

将此src:url("./fonts/FontName.ttf") 更改为此src:url("../fonts/FontName.ttf")（添加另一个句点）。

或者您可以尝试不带句点：src:url("/fonts/FontName.ttf")。

或者把它放在 CSS 文件夹中并完全删除路径。

您也可以尝试使用单引号 ' 而不是 "。

【讨论】：

【解决方案2】：

这不是正确的语法：

@font-face {
     font-family:"Name", src:url("./fonts/FontName.ttf") format("truetype"); 
}

使用分号代替逗号，如下所示：

@font-face {
     font-family: "Name";
     src: url("./fonts/FontName.ttf") format("truetype"); 
}

但你可以考虑使用 Paul Irish 的 Bulletproof @font-face 语法：http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

【讨论】：

好吧，我确实是从分号开始的，但事实证明，由于某种原因（即使在 Mac 上，当然在 Windows 上也是如此），Firefox 被淘汰了。使用逗号似乎可以解决这个问题，所以这就是现在的内容。我也不知道为什么会这样！
我使用的是 Mac，而 Firefox 与（有效的）分号语法完美配合。您是否尝试过其他字体文件？也许文件本身已损坏。