css - Firefox 无法识别自定义字体

Question

我正在使用以下 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 中!请原谅困惑!)

Answer 1

每个浏览器只读取一种文件类型的网络字体。不幸的是，它们都是不同的文件格式。为了使字体在所有浏览器中正确显示，您需要 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 是 Adob​​e(?) 拥有的商业字体，据我所知，将他们的字体与 @font-face 一起使用违反了字体 EULA。

TypeKit提供与@font-face 一起使用的商业字体，收费符合类型转换厂 EULA。