CSS Webfont 未在 iOS 中显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16555484/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webfont not showing in iOS
提问by IMUXIxD
Why isn't the webfont I am using, for the icons in the footer, showing when this site is viewed in iOS 6.1.4?
为什么在 iOS 6.1.4 中查看此站点时，我正在使用的 webfont 对于页脚中的图标不显示？
I have tried removing the CSS animations on the icons, removing the jQuery on it. Nothing is getting them to show.
我试过删除图标上的 CSS 动画，删除上面的 jQuery。没有什么能让他们表现出来。
I would greatly appreciate any help in figuring out why this font isn't showing.
我将不胜感激任何帮助弄清楚为什么这个字体没有显示。
回答by
Please take a look at this link:
请看一下这个链接：
Iconfont / webfont not showing in iPhone safari browser
Iconfont / webfont 未显示在 iPhone Safari 浏览器中
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?".
text-rendering: optimizeLegibility;
问题是 iOS 提供了对 font-feature-settings CSS 属性的部分支持，但您可以在 iOS Safari 中使用连字添加文本渲染： 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 规则“文本渲染：优化易读性”是否安全？在所有文字上？”。
text-rendering: optimizeLegibility;
回答by Phil Sinatra
I partially recreated your page using a different symbol font and confirmed the same functionality bug on iOS. I was able to get the symbol font to render on iOS making this change:
我使用不同的符号字体部分重新创建了您的页面，并在 iOS 上确认了相同的功能错误。我能够让符号字体在 iOS 上呈现，并进行此更改：
<li><a class="" href="#">Mail</a></li>
change to
改成
<li><a class="ss-mail" href="#"></a></li>
I am using symbolsetbecause I already have a copy of all the font files, but the functionality bug was similar. In the case of symbolset, using your line of code actually showed the word 'Mail' where the symbol should be on iOS, while the symbol font rendered correctly on desktop browsers. When I switched the code to use the class name, the symbol works on iOS.
我使用符号集是因为我已经有所有字体文件的副本，但功能错误是相似的。在符号集的情况下，使用你的代码行实际上在 iOS 上显示了符号应该在的位置，而符号字体在桌面浏览器上正确呈现。当我将代码切换为使用类名时，该符号在 iOS 上有效。
Here's a link to my examplewith the symbol font working on iOS (note: I didn't spend the time to make all the other fonts and javascript work).
这是我在 iOS 上使用符号字体的示例的链接（注意：我没有花时间让所有其他字体和 javascript 工作）。
Maybe your font has a similar problem rendering the symbols on iOS. If there is an alternative way to apply the font, via a CSS class similar to symbolset, you can try that and see if you get the same results. If not you can always use symbolset or a different symbol font.
也许您的字体在 iOS 上呈现符号时也有类似的问题。如果有另一种应用字体的方法，通过类似于符号集的 CSS 类，您可以尝试一下，看看是否得到相同的结果。如果不是，您始终可以使用符号集或不同的符号字体。
回答by taber
I think the "real" answer to this is: your glyph font is 404'ing on your web server (when you test it on your device.)
我认为对此的“真实”答案是：您的字形字体在您的网络服务器上是 404 的（当您在您的设备上测试时）。
In your CSS, you have '../fonts/glyphs.eot' which is: http://irfandesign.com/fonts/glyphs.eot(and is 404'ing).
在您的 CSS 中，您有“../fonts/glyphs.eot”，即：http: //irfandesign.com/fonts/glyphs.eot（并且是 404'ing）。
回答by Alex
You can drop the SVG format. The only reason it was added was before iOS 4.2, Mobile Safari didn't support TrueType font formats. As of iOS 4.2 it natively supported TrueType formatted fonts. Since this updated happened back in Nov. of 2010 I doubt there are very many users at all that use an older version.
您可以删除 SVG 格式。添加它的唯一原因是在 iOS 4.2 之前，Mobile Safari 不支持 TrueType 字体格式。从 iOS 4.2 开始，它本身就支持 TrueType 格式的字体。由于此更新发生在 2010 年 11 月，我怀疑是否有很多用户使用旧版本。
回答by MeanMatt
I would suggest dropping google web fonts and using css3's @font-face, the support is good enough for it (http://caniuse.com/fontface) and it works on iOS browsers etc. Plus, there are piles of free web-friendly fonts out there to use (not all of them look like shite - do a bit of intense googling). Don't forget to check their licenses to make sure they have the appropriate license for embedding on a website.
我建议放弃 google web 字体并使用 css3 的 @font-face，它的支持已经足够好了（http://caniuse.com/fontface）并且它适用于 iOS 浏览器等。另外，还有成堆的免费 web-友好的字体可供使用（并非所有字体看起来都像 shite - 进行一些激烈的谷歌搜索）。不要忘记检查他们的许可证，以确保他们拥有嵌入网站的适当许可证。
Here is a demo of @font-face css :
这是@font-face css 的演示：
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
then to use it on the page
然后在页面上使用它
body {
font: bold 1em/1.5em 'MyFontFamily', Arial, Helvetica, Geneva, sans-serif;
}
Then you are all set.
那么你都准备好了。
