logo标签列表

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

iphonecssipadfontssvg
16

我试图使用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");
}

在Firefox、Safari和Chrome上正常工作。

网络上有多个站点指出，要在iOs设备（iPod/iPhone/iPad）上使用font-face需要使用SVG字体。 这些字体是使用https://onlinefontconverter.com转换的，并且我拥有所有格式。

但是SVG字体无法在iOs上显示。 有人知道如何使它能够工作吗？ 此外，在SVG URL声明中，#的正确语法是什么？它代表什么？

谢谢。

作为在线字体转换器的所有者，我想问一下您能否与我分享您正在尝试转换但失败的字体，这样我就可以解决这个问题。 - Endless
6个回答
27

这是一个老问题，但我发现还没有人回答，而我之前也遇到了同样的问题。

在SVG URL后面的 # 符号表示SVG字体的ID。如果 # 后的字符串与SVG字体的ID不匹配，它就无法工作。如果你打开SVG文件，你会看到像这样的标签：

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

这是针对BEBAS字体的，但如果是针对你的Handvetica字体，例如，你需要键入url("Handvetica.svg#webfontSRj8j0P") format("svg")

7
可能是您使用的转换工具或者iPad缓存的问题。 全球最好的字体网站：

http://www.fontsquirrel.com/

生成正确的字体套件，为您提供一组字体 - 您可以发送自己的字体（许可证允许），它将为您构建一个字体套件。这包括TTF，Woof，SVG，OTF。
将整个内容压缩为ZIP文件，包括CSS、字体、示例，并下载。
对我来说总是有效的。
2
我曾经使用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;
}
0
TransType是一种专门用于转换字体格式的工具，可以通过单击生成@font web-font文件。与fontsquirrel不同的是，它适用于拉丁文和非拉丁文字体，如阿拉伯语。 http://www.fontlab.com/font-converter/transtype/ 然而，使用这些@字体的页面似乎在桌面浏览器和iPad iOS8上运行良好，但在iPhone iOS8上无法正常工作。
0

可能是服务器的问题。为了使SVG工作，有时需要设置SVG MIME类型：

 image/svg+xml
0
另外，在SVG URL声明中，#的正确语法是什么？它代表什么？
这是对给定文件中特定或元素的引用。您可以在同一SVG文件中拥有任意数量的SVG字体/字体面，尽管通常只有一个。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接