1

为什么在 iOS 6.1.4 中查看此站点时，我使用的 webfont 不显示页脚中的图标？

我试过删除图标上的 CSS 动画，删除上面的 jQuery。没有什么能让他们表现出来。

这是页面。

我将不胜感激任何帮助弄清楚为什么这个字体没有显示。

4

5 回答 5

8

请看一下这个链接：

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

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

 text-rendering: optimizeLegibility;
于 2013-05-23T09:04:58.303 回答
0

我认为对此的“真正”答案是：您的字形字体在您的网络服务器上是 404 的（当您在设备上测试它时）。

在您的 CSS 中，您有 '../fonts/glyphs.eot'，即：http: //irfandesign.com/fonts/glyphs.eot（并且是 404'ing）。

于 2013-10-07T21:34:43.653 回答
0

我使用不同的符号字体部分地重新创建了您的页面，并在 iOS 上确认了相同的功能错误。我能够让符号字体在 iOS 上进行此更改：

<li><a class="" href="#">Mail</a></li>

改成

<li><a class="ss-mail" href="#"></a></li>

我正在使用符号集，因为我已经拥有所有字体文件的副本，但功能错误是相似的。在符号集的情况下，使用您的代码行实际上显示了“邮件”一词，符号应该在 iOS 上，而符号字体在桌面浏览器上正确呈现。当我将代码切换为使用类名时，该符号适用于 iOS。

这是我的示例的链接，其中符号字体在 iOS 上工作（注意：我没有花时间让所有其他字体和 javascript 工作）。

也许您的字体在 iOS 上呈现符号时存在类似问题。如果有另一种应用字体的方法，通过类似于符号集的 CSS 类，您可以尝试一下，看看是否得到相同的结果。如果不是，您始终可以使用符号集或不同的符号字体。

于 2013-05-24T12:09:44.547 回答
0

您可以删除 SVG 格式。添加它的唯一原因是在 iOS 4.2 之前，Mobile Safari 不支持 TrueType 字体格式。从 iOS 4.2 开始，它原生支持 TrueType 格式的字体。由于此更新发生在 2010 年 11 月，我怀疑是否有很多用户使用旧版本。

http://www.zeldman.com/2010/11/26/web-type-news-iphone-and-ipad-now-support-truetype-font-embedding-this-is-huge/

于 2013-05-22T02:36:29.420 回答
-1

我建议放弃 google 网络字体并使用 css3 的 @font-face，对它的支持已经足够好了（http://caniuse.com/fontface）并且它适用于 iOS 浏览器等。另外，还有很多免费的 web-友好的字体可供使用（并非所有字体看起来都像shite - 做一些激烈的谷歌搜索）。不要忘记检查他们的许可证，以确保他们拥有嵌入网站的适当许可证。

这是@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');
}

然后在页面上使用它

body {
    font: bold 1em/1.5em 'MyFontFamily', Arial, Helvetica, Geneva, sans-serif;
}

然后你就准备好了。

于 2013-05-15T02:28:46.670 回答