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

Posted 2023-02-19

【中文标题】所有 Windows 浏览器的@font-face 问题

【英文标题】：@font-face issues with ALL Windows browsers

【发布时间】：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 上却不行。

【问题讨论】：

这不是 html5 的问题，请停止这样标记。

您使用的是什么字体文件类型？

ttf，暂时。我知道这不是普遍支持的，但它应该大部分时间都可以工作，不是吗？没有浏览器，没有时间？尤其是当相同的浏览器在 MacOS X 上正常显示时？

我假设您已经测试过字体本身确实可以在 Windows 中工作 - 总有一个外部机会它是 Mac 可以处理但 Windows 不能处理的损坏的字体文件。

@Shauna：我编辑 [html5][css3] 问题只是为了将它们从我的反对票中拯救出来，这通常让我很恼火。令人作呕的无知。

【参考方案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 与（有效的）分号语法完美配合。您是否尝试过其他字体文件？也许文件本身已损坏。