2

[修改]

我的自定义图标字体没有在 iOS 5 上的 Mobile Safari 中呈现。我已经确认问题一定出在我的 CSS 上。

当使用http://www.fontsquirrel.com生成的相应 eot 和 woff 格式时，该字体在 iOS 6 和 Safari、Chrome、Firefox 和 IE9 的桌面版本上运行良好

@字体脸

我目前正在使用以下简化@font-face声明（SASS）：

@font-face
  font-family: 'Boundless'
  src: asset-url('boundless.ttf', font) format('truetype')
  font-weight: normal
  font-style: normal

以下 HTML有效（它在 iOS 5.1 上的 Mobile Safari 中呈现所需的图标字符：

<h1>&#xf0000;</h1>

但是，如果我尝试以Font-Awesome<?>的方式渲染它，我会看到一个字形：

SASS

i.bicon-biology:before
  font-family: "Boundless"
  content: "\f0000"

HTML

<h1><i class="bicon-biology"></i></h1>

然而，Font-Awesome 图标在网站上渲染得很好。

有谁知道可能导致此问题的原因？

我还应该补充一点，我尝试了这里提出的所有建议：@font-face not embedding on mobile Safari (iPhone/iPad) and none of working。这包括添加笑脸 hack，确保我的字体 url 是绝对的，并尝试使用 svg 字体（无论如何，这对于 iOS 5 来说是不必要的）。

4

1 回答 1

4

Mobile Safari 显然只是不喜欢我使用的 utf-8 地址（/0f0000- /0f001e）。

我编辑了字体以将字符移动到Font-Awesome使用的相同位置（/00f000...），并且很快，它可以工作了！

我还检查了添加/删除0左侧的填充是否有所不同，并且无论哪种方式都可以。只是关于其他地址范围的一些东西。:\

再次：这只是在伪元素内容中使用代码时的问题。正如你在上面看到的，&#xf0000; (and &#x0f0000;) 当它直接在 HTML 中时呈现得很好。

于 2012-10-09T21:42:51.557 回答