在 iPad/iPhone 上使用 CSS @font-face
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4058342/
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
Using CSS @font-face with the iPad/iPhone
提问by Natti Baron
I'm trying to use the font-face attribute of CSS with a custom font:
我正在尝试将 CSS 的 font-face 属性与自定义字体一起使用：
@font-face {
font-family: "Handvetica";
src: url("Handvetica.eot");
src: url("Handvetica.ttf") format("truetype"),
url("Handvetica.otf") format("opentype"),
url("Handvetica.woff") format("woff"),
url("Handvetica.svg#Handvetica") format("svg");
}
it works on ff, safari & chrome properly.
它适用于 ff、safari 和 chrome。
multiple sites on the web state that to use font-face on iOs devices (iPod/iPhone/iPad) an svg font is required. the fonts were converted using https://onlinefontconverter.com, and i have all of the formats.
网络上的多个站点声明要在 iOs 设备（iPod/iPhone/iPad）上使用 font-face 需要 svg 字体。字体是使用https://onlinefontconverter.com转换的，我拥有所有格式。
the svg font doesn't show on iOs. Does anyone know how to make it work? Also, what is the right syntax for the # in the svg url declaration? what does it stand for?
svg 字体不显示在 iO 上。有谁知道如何使它工作？另外，svg url 声明中# 的正确语法是什么？它代表什么？
Thanks.
谢谢。
回答by TheJF
This is an old question, but I figured nobody answered it yet and I was having the same problem earlier.
这是一个老问题，但我认为还没有人回答它，而且我之前也遇到过同样的问题。
The # in after the SVG url denotes the SVG font's ID, and it's not going to work if the string after # doesn't match the SVG font's ID. If you open up the SVG file, you'll see a tag like this:
SVG url 后面的# 表示SVG 字体的ID，如果# 后面的字符串与SVG 字体的ID 不匹配，它将不起作用。如果你打开 SVG 文件，你会看到一个这样的标签：
<font id="webfontSRj8j0PE" horiz-adv-x="1058" >
This is for the BEBAS font, but if it was for your Handvetica font for example, you'd have to type in url("Handvetica.svg#webfontSRj8j0P") format("svg")
这是针对 BEBAS 字体的，但如果是针对您的 Handvetica 字体，则您必须输入 url("Handvetica.svg#webfontSRj8j0P") format("svg")
回答by Glycerine
it could be the converter your using - or perhaps iPad caching. best font site in the world:
它可能是您使用的转换器 - 或者可能是 iPad 缓存。世界上最好的字体网站：
generates the correct font face kit, gives you a set of fonts - you can send it your own font (license permitting) and it'll build a font face kit for you. This includes TTF, Woof, SVG,OTF.
生成正确的字体套件，为您提供一组字体 - 您可以将自己的字体发送给它（许可许可），它会为您构建一个字体套件。这包括 TTF、Woof、SVG、OTF。
Zips the entire thing, CSS, fonts, example and you download it.
压缩整个内容、CSS、字体、示例，然后您下载它。
Always worked for me.
一直为我工作。
回答by Evan R.
I was using FontAwesome and I had the same problem. The issue is that the .svg# identifier doesnt match what is actually in the .svg file.
我正在使用 FontAwesome 并且遇到了同样的问题。问题是 .svg# 标识符与 .svg 文件中的实际内容不匹配。
In the file you'll see: <font id="FontAwesomeRegular" horiz-adv-x="1843" >
在文件中，您将看到： <font id="FontAwesomeRegular" horiz-adv-x="1843" >
To get your icons to not appear as squares change this line in the font-awesome.css file
要让您的图标不显示为正方形，请更改 font-awesome.css 文件中的这一行
Changing this line:
改变这一行：
@font-face {
font-family: "FontAwesome";
src: url('../font/fontawesome-webfont.eot');
src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'),
url('../font/fontawesome-webfont.woff') format('woff'),
url('../font/fontawesome-webfont.ttf') format('truetype'),
url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight: normal;
font-style: normal;
}
to this line
到这一行
@font-face {
font-family: "FontAwesome";
src: url('../font/fontawesome-webfont.eot');
src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'),
url('../font/fontawesome-webfont.woff') format('woff'),
url('../font/fontawesome-webfont.ttf') format('truetype'),
url('../font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
font-weight: normal;
font-style: normal;
}
回答by Valavel
TransType, a specialised tool to convert font formats, can also produce @font web-font files with one click. Unlike fontsquirrel this works for both Latin and non-Latin fonts such as Arabic. http://www.fontlab.com/font-converter/transtype/However pages using these @fonts seem to work on desktop browsers and ipad ios8, but not on iphones ioS8
TransType 是一种专门的字体格式转换工具，也可以一键生成@font 网络字体文件。与 fontsquirrel 不同，这适用于拉丁和非拉丁字体，如阿拉伯语。 http://www.fontlab.com/font-converter/transtype/然而，使用这些@fonts 的页面似乎在桌面浏览器和 ipad ios8 上工作，但在 iphone ioS8 上不起作用
回答by fitz0019
Could be the server. For the SVG to work you sometimes need the SVG mime type set up:
可能是服务器。为了使 SVG 工作，您有时需要设置 SVG mime 类型：
image/svg+xml
回答by Erik Dahlstr?m
Also, what is the right syntax for the # in the svg url declaration? what does it stand for?
另外，svg url 声明中# 的正确语法是什么？它代表什么？
It's the reference to a particular <font>or <font-face>element in the given file. You can have any number of svg fonts/font-faces inside the same svg file, even though it's most common to only have one.
它是对给定文件中特定<font>或<font-face>元素的引用。您可以在同一个 svg 文件中拥有任意数量的 svg 字体/字体，即使只有一个是最常见的。
