我正在使用以下 CSS 在网页上定义自定义字体:
@font-face
{
font-family:zapfino;
src:url("zapfino.ttf");
}
接下来,我定义一个使用它的 id:
#custom_font
{
font-family:zapfino;
font-size:18px;
}
我已经在 Safari 和 Chrome 上测试了该页面,它运行良好。但是,在 firefox 中字体没有显示,它正在恢复为默认值。抱歉,如果这是转贴,但我在 StackOverflow 上搜索过,但找不到答案!有谁知道为什么会这样?在这里查看:www.moosecodes.com(它仍在 build 中!请原谅困惑!)
最佳答案
每个浏览器只读取一种文件类型的网络字体。不幸的是,它们都是不同的文件格式。为了使字体在所有浏览器中正确显示,您需要 4 种不同类型的字体文件 - TTF、WOFF、SVG 和 EOT。您的代码将如下所示:
@font-face {
font-family: 'Zapfino';
src: url('Zapfino.eot');
src: url('Zapfino.eot?#iefix') format('embedded-opentype'),
url('Zapfino.woff') format('woff'),
url('Zapfino.ttf') format('truetype'),
url('Zapfino.svg#SansumiRegular') format('svg');
}
该代码基于 FontSquirell 中包含的样式表字体。
FontSquirell 有一个转换器,但您需要检查您的许可证。 Zapfino 是 Adobe(?) 拥有的商业字体,据我所知,将他们的字体与 @font-face 一起使用违反了字体 EULA。
TypeKit提供与@font-face 一起使用的商业字体,收费符合类型转换厂 EULA。
关于css - Firefox 无法识别自定义字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9929641/