iphone - @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 中 hash 标签后的 id 解决了这个问题。