@ font-face未嵌入移动版Safari(iPhone/iPad)

Question

我使用@font-face(来自FontSquirrel的css)在移动网站上嵌入字体.当我在桌面Safari或Chrome中预览时,字体嵌入很好,但它们不会出现在iPhone/iPad上的移动Safari中.我没有得到任何错误,我无法弄清楚出了什么问题.这是我的CSS.有任何想法吗？

@font-face {
    font-family: 'JottingRegular';
    src: url('../fonts/jotting_regular-webfont.eot');
    src: local('?'),
         url('../fonts/jotting_regular-webfont.woff') format('woff'),
         url('../fonts/jotting_regular-webfont.ttf') format('truetype'),
         url('../fonts/jotting_regular-webfont.svg#webfonttEfFltbI') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'JottingBold';
    src: url('../fonts/jotting_bold-webfont.eot');
    src: local('?'),
         url('../fonts/jotting_bold-webfont.woff') format('woff'), 
         url('../fonts/jotting_bold-webfont.ttf') format('truetype'), 
         url('../fonts/jotting_bold-webfont.svg#webfontJpUFTHYS') format('svg');
    font-weight: normal;
    font-style: normal;
}

Answer 1

好的,我想出来了,并将记录将来遇到此问题的任何人.我从Font Squirrel复制了CSS,然后我需要重新下载实际的字体文件.我认为这不会改变CSS中的任何内容,但事实证明SVG字体(由移动safari使用)都具有在字体文件和CSS中引用的ID.

所以,在:

url('../fonts/jotting_regular-webfont.svg#webfonttEfFltbI') format('svg')

webfonttEfFltbI是字体ID.我在文本编辑器中打开了SVG字体文件,并在文件顶部附近的以下行中找到了新ID:

<font id="webfontC6xdxB57" horiz-adv-x="972" >

在CSS中的哈希标记之后替换id修复了问题.

Answer 2

在 iOS 4.2 之前，MobileSafari 不支持字体。