@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 字体（由 mobile 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

我也有同样的情况。我通过更新字体的路径解决了这个问题。尽管 Chrome 和Safari 加载它们很好，iOS 无法识别我的路径，

url ('font/chunkfive/font.eot')

我更改了该行以在字体路径的开头包含一个 / ，这解决了所有问题。

url ('/font/chunkfive/font.eot')

您也可以尝试使用绝对路径。

Answer 3

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

Answer 4

在意识到我的愚蠢错误之前，我已经为此工作了一个小时。

Mobile Safari 的字体区分大小写，而 Desktop Safari 则不区分大小写。

如果您的字体标题为：font.svg，则必须按照原样添加它。如果你用大写 F 添加它，桌面版 Safari 不会在意，但移动版会。

Answer 5

这已经解决了，但我在这里遇到了类似的问题：

@font-face 无法在移动 Webkit 中工作

对我来说，所有SVG 字体上的 ID 正确；奇怪的是 FontSquirrel 语法。使用更新的 FontSpring 防弹语法为我解决了这个问题，并且似乎完全可以跨浏览器工作。

Answer 6

Font Face 确实可以在 mobile safari 上使用，我在 iphone 3 上使用。我还复制了 font squirl 的代码，但它不起作用。这是更新后的代码。使用它，它将在任何地方都有效。

@font-face {
    font-family: 'MyriadProBoldCondensed';
    src: url('/fonts/myriadpro-boldcond-webfont.eot#') format('eot'),
         url('/fonts/myriadpro-boldcond-webfont.woff') format('woff'),
         url('/fonts/myriadpro-boldcond-webfont.ttf') format('truetype'),
         url('/fonts/myriadpro-boldcond-webfont.svg#MyriadProBoldCondensed') format('svg');
    font-weight: normal;
    font-style: normal;
}