Iconfont / webfont不会显示在iPhone safari浏览器 [英] Iconfont / webfont not showing in iPhone safari browser

问题描述

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

任何想法为什么会发生这种情况，以及如何解决它？

页面中不显示的图标的屏幕截图：

这里是链接发生此情况的页面<问题是IOS提供了部分支持字体功能设置CSS属性，但你可以在iOS Safari中添加文本呈现：optimizeLegibility 时使用连字。以下链接（ http://clagnut.com/sandbox/opentype/ligatures ）显示文字使用字体洋红与常见&任意连接ON和其他文本与常见&自由裁量OFF。

如果您从iOS设备访问此链接，您会看到两个文本相等。这意味着iOS不支持连字只有 font-feature-settings ，这就是为什么您的排版中的gyphs不能在iOS上工作。

要使它在iOS中工作，你必须添加 text-rendering：optimizeLegibility 到你的css。好的参考可能是今天的明天网络类型：精致繁荣结扎。但是，您应该阅读在所有文本上使用CSS规则text-rendering：optimizelegibility;是否安全？。

字体在iOS中的链接：

http ：//jsfiddle.net/poselab/TQjgC/

  text-rendering：优化; 
  

来自iPhone的jsfiddle的屏幕截图：

>

The glyphs in my iconfont, a custom web font in the navigation in my footer, are not showing when viewed on an iPhone. It is iOS 6.1.4

Any idea why this is happening and how to fix it?

Here is a screenshot of the icons in the footer not appearing:

Here is a link to the page where this is happening

解决方案

The problem is that IOS provides partial support for font-feature-settings CSS property but you can use ligatures in iOS Safari adding text-rendering: optimizeLegibility. The following link (http://clagnut.com/sandbox/opentype/ligatures) shows a text using the font Magenta with Common & Discretionary Ligatures ON and other text with Common & Discretionary Ligatures OFF.

If you access this link from an iOS device you will see that both texts are equal. This means that iOS does not support ligatures only with font-feature-settings and that is why the gyphs in your typography do not work on iOS.

To make it work in iOS, you'll have to add text-rendering: optimizeLegibility to your css. A good reference may be "Tomorrow’s web type today: The fine flourish of the ligature". But, you should read "Is it safe to use the CSS rule "text-rendering: optimizelegibility;" on all text?".

You will find an example of your font working in iOS in the following link:

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

text-rendering: optimizeLegibility;

A screenshot of this jsfiddle from an iPhone:

这篇关于Iconfont / webfont不会显示在iPhone safari浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！