在iPad/iPhone上使用CSS @font-face
我尝试将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");
}它可以在ff，safari和chrome上正常工作。
网站上的多个站点指出，要在iOs设备(iPod/iPhone/iPad)上使用font-face，需要svg字体。字体是使用https://onlinefontconverter.com转换的，我有所有的格式。
iOs上不显示svg字体。有谁知道怎么让它工作吗？另外，svg url声明中#的正确语法是什么？它代表什么？
谢谢。
回答 5
Stack Overflow用户
发布于 2011-01-26 20:38:59
这是一个古老的问题，但我认为还没有人回答它，我之前也遇到了同样的问题。
SVG url后面的#表示SVG字体的ID，如果#后面的字符串与SVG字体的ID不匹配，它将不起作用。如果您打开SVG文件，您将看到如下标签：
<font id="webfontSRj8j0PE" horiz-adv-x="1058" >这是针对BEBAS字体的，但如果是针对Handvetica字体的，则必须键入url("Handvetica.svg#webfontSRj8j0P") format("svg")
Stack Overflow用户
发布于 2010-10-30 19:06:46
它可能是您使用的转换器，也可能是iPad缓存。全球最好的字体网站：
生成正确的字体工具包，给你一组字体--你可以给它发送你自己的字体(在许可的情况下)，它会为你构建一个字体工具包。这包括TTF、Woof、SVG、OTF。
压缩整个东西，CSS，字体，示例，然后你下载它。
对我来说一直很管用。
Stack Overflow用户
发布于 2012-11-03 06:38:07
我正在使用FontAwesome，我也遇到了同样的问题。问题是.svg#标识符与.svg文件中的实际内容不匹配。
在该文件中，您将看到：<font id="FontAwesomeRegular" horiz-adv-x="1843" >
要使图标不显示为正方形，请更改font-awesome.css文件中的此行
更改此行：
@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;
}到这一行
@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;
}https://stackoverflow.com/questions/4058342
复制相似问题
腾讯云开发者
