@ font-face未嵌入行动版Safari（iPhone / iPad） [英] @font-face not embedding on mobile Safari (iPhone/iPad)

问题描述

我使用 @ font-face （来自FontSquirrel的css）在移动网站上嵌入字体。当我在桌面Safari或Chrome中预览时，字体嵌入正常，但它们不会显示在iPhone / iPad上的移动Safari上。我没有得到任何错误，我不能弄清楚出了什么问题。这是我的CSS。任何想法？

I'm embedding fonts on a mobile website using @font-face (css from FontSquirrel). When I preview in desktop Safari or Chrome, the fonts embed fine, but they don't appear in mobile Safari on the iPhone/iPad. I'm not getting any errors and I can't figure out what's going wrong. Here's my CSS. Any ideas?

@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;
}

推荐答案

并且将为将来有这个问题的任何人记录。我从字体松鼠复制CSS，然后我需要重新下载实际的字体文件。我没有想到会改变CSS中的任何东西，但事实证明，SVG字体（由移动safari使用）都有一个ID，在字体文件和CSS引用。

OK, I figured it out and will document for anyone who has this problem in the future. I had copied the CSS from Font Squirrel and then I had needed to redownload the actual font files later on. I didn't think that would change anything in the CSS, but it turns out that SVG fonts (which are used by mobile safari) all have an ID that is referenced in the font file and the CSS.

因此，在：

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

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

webfonttEfFltbI is the font id. I opened the SVG font file in a text editor and found the new ID in the following line near the top of the file:

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

在CSS中的哈希标记之后替换id可以解决问题。

Replacing the id after the hash tag in the CSS fixed the problem.

这篇关于@ font-face未嵌入行动版Safari（iPhone / iPad）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！