Iconfont / webfont 未在 iPhone Safari 浏览器中显示答案

【问题标题】：Iconfont / webfont not showing in iPhone safari browserIconfont / webfont 未在 iPhone Safari 浏览器中显示
【发布时间】：2013-10-17 09:23:06
【问题描述】：

我的 iconfont 中的字形，一种在我的页脚导航中的自定义网络字体，在 iPhone 上查看时没有显示。它是 iOS 6.1.4

知道为什么会发生这种情况以及如何解决它吗？

以下是页脚中未出现图标的屏幕截图：

Here is a link 到发生这种情况的页面

【问题讨论】：

我感觉这与您在图标上的动画有关。如果您删除动画，它们会出现吗？
@Jackson 你是说动画不完全支持所以他们隐藏了图标？我删除了页脚图标上的动画，但它们仍然没有显示。如果您想查看它，它会更新。
也许是 font-feature-settings css 属性？ ios safari safari 仅对此提供部分支持：caniuse.com/font-feature
@Jackson 不可能。我使用 Modernizr 检测何时不支持连字并切换到具有相同对应图标的单个字符。
你的网站在 iPhone 上真的很糟糕——太花哨了，恕我直言。顶部的文本大部分都被覆盖了，我无法滚动到任何内容。 :-(

标签： css fonts mobile-safari

【解决方案1】：

问题在于 IOS 提供了对 font-feature-settings CSS 属性的部分支持，但您可以在 iOS Safari 中使用连字添加 text-rendering: optimizeLegibility。以下链接 (http://clagnut.com/sandbox/opentype/ligatures) 显示了一个文本，该文本使用 Magenta 字体，Common & Discretionary Ligatures ON，其他文本 Common & Discretionary Ligatures OFF。

如果您从 iOS 设备访问此链接，您将看到两个文本相同。这意味着 iOS 不支持仅使用 font-feature-settings 的连字，这就是为什么您的排版中的 gyphs 在 iOS 上不起作用的原因。

要使其在 iOS 中运行，您必须将 text-rendering: optimizeLegibility 添加到您的 css 中。一个好的参考可能是"Tomorrow’s web type today: The fine flourish of the ligature"。但是，您应该阅读"Is it safe to use the CSS rule “text-rendering: optimizelegibility;” on all text?"。

您将在以下链接中找到您的字体在 iOS 中工作的示例：

http://jsfiddle.net/poselab/TQjgC/

text-rendering: optimizeLegibility;

来自 iPhone 的这个 jsfiddle 的屏幕截图：

【讨论】：

感谢您提供详细信息。所以，它说它支持连字，但只是部分支持，不足以支持它们？

【解决方案2】：

在noLigatures.js 中删除if((Modernizr.prefixed("fontFeatureSettings"))。图标将在 iOS6 中显示。

【讨论】：

啊，所以我脚本中的那一行正在评估为真并且连字正在显示。但它们不受支持？