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

问题描述

我试图使用自定义字体的CSS的font-face属性：

I'm trying to use the font-face attribute of CSS with a custom font:

@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正确。

it works on ff, safari & chrome properly.

网络上的多个网站状态为在iOs设备（iPod / iPhone / iPad）上使用font-face，需要svg字体。
的字体已使用进行转换，我拥有所有格式。

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.

svg字体在iOs上不显示。
有谁知道如何使它的工作？
另外，svg url声明中＃的正确语法是什么？

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?

感谢。

推荐答案

一个老问题，但我想没有人回答它，我也有同样的问题早。

This is an old question, but I figured nobody answered it yet and I was having the same problem earlier.

SVG之后的＃url表示SVG字体的ID，如果＃后的字符串与SVG字体的ID不匹配，则不会工作。如果您打开SVG文件，您将看到如下标签：

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:

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

这是BEBAS字体的，但如果它是你的Handvetica字体，必须输入 url（Handvetica.svg＃webfontSRj8j0P）格式（svg）

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")

这篇关于在iPad / iPhone上使用CSS @ font-face的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！