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

我遇到了同样的情况。我通过更新字体的路径解决了它。尽管Chrome＆amp; Safari正在加载它们，iOS没有识别我的路径

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

我更改了该行，以便在字体路径的开头添加/并修复所有内容。

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

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

Answer 3

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

Answer 4

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

@font-face not working in mobile Webkit

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

Answer 5

Font face确实适用于移动游猎，我在iphone 3上使用。我也复制了字体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;
}

Answer 6

在实现我的愚蠢错误之前，我一直在用这个工作了一个小时。

Mobile Safari对于字体是CASE SENSITIVE，而Desktop Safari则不是。

如果您的字体标题为：font.svg，则必须完全按照它添加。如果您使用Capital F添加它，桌面浏览器不会关心，但移动设备会。

@ font-face未嵌入移动版Safari（iPhone / iPad）

6 个答案: