自定义webfont字符不会出现在Safari iOS 5中

时间:2012-10-08 17:04:14

标签: css ios5 fonts mobile-safari font-face

[修订]

我的自定义图标字体未在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)并且没有任何效果。这包括添加笑脸黑客,确保我的字体网址是绝对的,并尝试svg字体(无论如何,这对于iOS 5来说都不是必需的。)

1 个答案:

答案 0 :(得分:4)

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

我编辑了字体以将字符移动到Font-Awesome使用的相同位置(/00f000 ...),并且presto,它有效!

我还检查了添加/删除0填充左边是否有所不同,它是否有效。其他地址范围只是一些东西。 :\

再次:当代码用于伪元素内容时,这只是 的问题。如上所示,&#xf0000; (和&#x0f0000;)直接在HTML中呈现正常。