Safari iOS 5 中不显示自定义 webfont 字符

Posted 2023-03-15

【中文标题】Safari iOS 5 中不显示自定义 webfont 字符

【英文标题】：Custom webfont characters don't appear in Safari iOS 5

【发布时间】：2012-09-28 23:14:39

【问题描述】：

[修订]

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

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

@font-face

我目前正在使用以下简化的@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)，但没有一个奏效。这包括添加笑脸技巧，确保我的字体网址是绝对的，并尝试使用 svg 字体（无论如何，这对于 iOS 5 来说是不必要的）。

【问题讨论】：

只是好奇，为什么你使用的字符范围如此之大，而不是你可以在键盘上看到的东西？

有问题的范围被认为是 utf-8 的“私人使用区域”（PUA），所以它是为这类事情设计的。它给了我那种在语义上做正确事情的温暖而刺痛的感觉。一个积极的结果是屏幕阅读器不会尝试将图标读取为字符。

啊，这很有意义。几天来我一直在想这种做法。感谢您的回答。

【参考方案1】：

Mobile Safari 显然不喜欢我使用的 utf-8 地址 (/0f0000-/0f001e)。

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

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

再次：这只有在伪元素内容中使用代码时会出现问题。正如你在上面看到的，&#xf0000; （和󰀀）直接在 HTML 中渲染得很好。