我尝试将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上正常工作。
网站上的多个站点指出,要在iOs设备(iPod/iPhone/iPad)上使用font-face,需要svg字体。字体是使用https://onlinefontconverter.com转换的,我有所有的格式。
iOs上不显示svg字体。有谁知道怎么让它工作吗?另外,svg url声明中#的正确语法是什么?它代表什么?
谢谢。
发布于 2011-01-26 20:38:59
这是一个古老的问题,但我认为还没有人回答它,我之前也遇到了同样的问题。
SVG url后面的#表示SVG字体的ID,如果#后面的字符串与SVG字体的ID不匹配,它将不起作用。如果您打开SVG文件,您将看到如下标签:
<font id="webfontSRj8j0PE" horiz-adv-x="1058" >
这是针对BEBAS字体的,但如果是针对Handvetica字体的,则必须键入url("Handvetica.svg#webfontSRj8j0P") format("svg")
发布于 2010-10-30 19:06:46
它可能是您使用的转换器,也可能是iPad缓存。全球最好的字体网站:
生成正确的字体工具包,给你一组字体--你可以给它发送你自己的字体(在许可的情况下),它会为你构建一个字体工具包。这包括TTF、Woof、SVG、OTF。
压缩整个东西,CSS,字体,示例,然后你下载它。
对我来说一直很管用。
发布于 2012-11-03 06:38:07
我正在使用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;
}
https://stackoverflow.com/questions/4058342
复制相似问题