css - Iconfont / webfont 未在 iPhone Safari 浏览器中显示

Question

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

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

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

这是发生这种情况的页面的链接

Answer 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。一个很好的参考可能是“明天的网络类型今天：连字的精美繁荣”。但是，您应该阅读“使用 CSS 规则是否安全？文本渲染：优化易读性；” 在所有文字上？” .

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

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

text-rendering: optimizeLegibility;

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

Answer 2

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