@font-face 在 Windows 浏览器中工作，但不是 Mac OSX 或 iOS？答案

【问题标题】：@font-face working in Windows browsers but not Mac OSX or iOS?@font-face 在 Windows 浏览器中工作，但不是 Mac OSX 或 iOS？
【发布时间】：2013-07-14 18:41:27
【问题描述】：

我有一个由 Font Squirrel 的网络字体生成器创建的网络字体。该字体在所有 Windows 浏览器上正确显示，但在 Mac OSX 或 IOS 上的 Safari 上不显示。我还在 iOS 上的 Chrome 上找到了相同的结果。我试图找到这个问题的答案，但没有运气。

以下 CSS 位于外部样式表中：

@font-face {
    font-family: 'mayfieldregular';
    src: url('mayfield-webfont.eot');
    src: url('mayfield-webfont.eot?#iefix') format('embedded-opentype'),
         url('mayfield-webfont.woff') format('woff'),
         url('mayfield-webfont.ttf') format('truetype'),
         url('mayfield-webfont.svg#mayfieldregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

上面的 4 种字体肯定是和 CSS 样式表上传在同一个文件夹中的。

该网站还包括一个包含 CSS 的样式表，例如： h1 { font-family: 'mayfieldregular'; }

但由于某种原因，这适用于 Windows，但不适用于 Mac OSX 和 iOS。有什么想法吗？

【问题讨论】：

不确定是否有解决方案，但您可能希望开始包含后备字体，以应对此类字体未加载的情况。
谢谢，是的，我在实际代码中这样做了，我只是想专注于相关代码，所以将其删除。
我已经在下面回答了这个问题。

标签： ios css fonts font-face webfonts

【解决方案1】：

我使用过 .otf 字体文件，它们在 Windows 和 Mac 上都可以使用，你试过吗？

【讨论】：

我很确定理论上上述字体应该适用于 Windows、Mac OSX 和 iOS

【解决方案2】：

抱歉，我在问题中发布的代码确实适用于所有系统。问题是我遇到了一个问题，即来自 Myfonts.com 的许可网络字体在 Mac 和 iOS 上不起作用，作为最后的努力，我决定自己在 Font Squirrel 从我桌面上的字体生成一个工具包（在写上述问题之前）。当这也不起作用时，我认为它仍然是同样的问题，但我刚刚意识到在 Font Squirrel 上生成一个工具包确实可以解决 Mac/iOS 问题。它继续不起作用的原因只是一个基本错误。

因此，如果您在 Mac OSX 和 iOS 上显示网络字体时遇到问题，请考虑在 Font Squirrel 上生成您自己的工具包。

【讨论】：