在iPad / iPhone上使用CSS @ font-face [英] Using CSS @font-face with the iPad/iPhone

问题描述

我试图使用自定义字体的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字体。
的字体已使用 https://onlinefontconverter.com 进行转换，我拥有所有格式。

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！