CSS @font-face 未嵌入移动 Safari (iPhone/iPad)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4412511/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
@font-face not embedding on mobile Safari (iPhone/iPad)
提问by pixielex
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（来自 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;
}
回答by pixielex
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.
好的，我想通了，并将为将来遇到此问题的任何人记录。我从 Font Squirrel 复制了 CSS，然后我需要稍后重新下载实际的字体文件。我不认为这会改变 CSS 中的任何内容，但事实证明 SVG 字体（由移动 safari 使用）都有一个在字体文件和 CSS 中引用的 ID。
So, in:
所以，在：
url('../fonts/jotting_regular-webfont.svg#webfonttEfFltbI') format('svg')
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:
webfonttEfFltbI 是字体 ID。我在文本编辑器中打开了 SVG 字体文件，并在文件顶部附近的以下行中找到了新 ID：
<font id="webfontC6xdxB57" horiz-adv-x="972" >
Replacing the id after the hash tag in the CSS fixed the problem.
在 CSS 中的 hash 标签之后替换 id 解决了这个问题。
回答by Matt B
I was having this same situation. I resolved it by updating the paths to the font. Even though Chrome & Safari were loading them fine, iOS wasn't recognizing my path which was
我遇到了同样的情况。我通过更新字体的路径来解决它。即使 Chrome 和 Safari 加载得很好，iOS 也无法识别我的路径
url ('font/chunkfive/font.eot')
I changed that line to include a /to the beginning of the font path and that fixed everything.
我更改了该行以/在字体路径的开头包含 a并修复了所有内容。
url ('/font/chunkfive/font.eot')
You could also try using an absolute path.
您也可以尝试使用绝对路径。
回答by gkrizek
I had been working with this for a hour before realizing my stupid mistake.
在意识到我的愚蠢错误之前，我已经为此工作了一个小时。
Mobile Safari is CASE SENSITIVE for the fonts, while Desktop Safari is not.
Mobile Safari 对字体区分大小写，而 Desktop Safari 不区分大小写。
If your font is titled: font.svg, you must add it exactly like it is. If you add it with a Capital F, Desktop Safari won't care, but mobile will.
如果您的字体标题为：font.svg，则必须完全按原样添加。如果你用大写 F 添加它，桌面 Safari 不会关心，但移动会。
回答by Mike
Font face isn't supported on MobileSafari until iOS 4.2.
在 iOS 4.2 之前，MobileSafari 不支持字体。
回答by bigsweater
This has already been solved, but I had a similar problem here:
这已经解决了，但我在这里遇到了类似的问题：
@font-face not working in mobile Webkit
For me, all the IDs on the SVG fonts were correct; it was the FontSquirrel syntax that was wonky. Using the updated FontSpring bulletproof syntax fixed the issue for me, and seems to work entirely cross-browser.
对我来说，SVG 字体上的所有 ID 都是正确的；FontSquirrel 的语法很古怪。使用更新的 FontSpring 防弹语法为我解决了这个问题，并且似乎完全跨浏览器工作。
回答by Sachin Gadia
Font face does work on mobile safari, i am using on iphone 3. I also copied the code from font squirl but it didn't work. Here is the updated code. Use this and it will work everywhere.
Font face 确实适用于移动 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;
}
