在iPad/iPhone上使用CSS @ font-face

Question

我正在尝试使用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.

Web上的多个站点声明要在iOs设备(iPod/iPhone/iPad)上使用font-face,需要svg字体.字体是使用https://onlinefontconverter.com转换的,我有所有的格式.

svg字体不会显示在iOs上.有谁知道如何使它工作？另外,svg url声明中#的正确语法是什么？它代表什么？

谢谢.

Answer 1

这是一个老问题,但我认为没有人回答它,我之前遇到了同样的问题.

SVG url之后的#in中表示SVG字体的ID,如果#之后的字符串与SVG字体的ID不匹配,它就无法工作.如果您打开SVG文件,您将看到如下标记:

<font id="webfontSRj8j0PE" horiz-adv-x="1058" >

这是针对BEBAS字体的,但如果是针对您的Handvetica字体,则必须输入 url("Handvetica.svg#webfontSRj8j0P") format("svg")

Answer 2

它可能是您使用的转换器 - 或者可能是iPad缓存.世界上最好的字体网站:

http://www.fontsquirrel.com/

生成正确的字体面板套件,为您提供一组字体 - 您可以发送自己的字体(许可证允许),它将为您构建一个字体面板套件.这包括TTF,Woof,SVG,OTF.

拉链整个东西,CSS,字体,示例,然后下载它.

一直为我工作.