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＆amp;铬合适。

网络上的多个网站声明要在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，字体和示例，然后下载它。

一直为我工作。

Answer 3

我使用的是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;
}

Answer 4

可能是服务器。要使SVG工作，您有时需要设置SVG mime类型：

 image/svg+xml

Answer 5

另外，svg url声明中＃的正确语法是什么？它代表什么？

它是对给定文件中特定<font>或<font-face>元素的引用。你可以在同一个svg文件中包含任意数量的svg fonts / font-faces，即使它最常见的只有一个。

Answer 6

TransType是一种转换字体格式的专用工具，只需点击一下即可生成@font网络字体文件。与fontsquirrel不同，这适用于拉丁语和非拉丁语字体，如阿拉伯语。 http://www.fontlab.com/font-converter/transtype/ 但是，使用这些@fonts的页面似乎适用于桌面浏览器和ipad ios8，但不适用于iphone ioS8

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

6 个答案: