[修订]
我的自定义图标字体未在iOS 5的Mobile Safari中呈现。我已确认问题必须与我的CSS有关。
生成的相应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>󰀀</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来说都不是必需的。)
答案 0 :(得分:4)
Mobile Safari显然不喜欢我使用的utf-8地址(/0f0000
- /0f001e
)。
我编辑了字体以将字符移动到Font-Awesome使用的相同位置(/00f000
...),并且presto,它有效!
我还检查了添加/删除0
填充左边是否有所不同,它是否有效。其他地址范围只是一些东西。 :\
再次:当代码用于伪元素内容时,这只是 的问题。如上所示,󰀀
; (和󰀀
)直接在HTML中呈现正常。