2

我正在使用以下 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（它仍在建设中！请原谅这个烂摊子！）

4

3 回答 3

4

每个浏览器只读取一种文件类型的 webfonts。不幸的是，它们都是不同的文件格式。为了使字体在所有浏览器中正确显示，您将需要 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 的规定。

于 2012-03-29T16:59:48.743 回答
3

jlego 是对的——你应该查看FontSquirrel网站——他们有一个很好的工具可以为你构建你的工具包和转换你的文件，并且你必须始终确保在你的网站上使用该字体是合法的。

但是Firefox 和 Chrome 都应该支持 TTF，这是您使用的格式。

在研究您网站上的问题时，我发现字体在我签入的任何浏览器中都没有正确呈现。我发现样式表引用了正确的文件位置，但字体文件似乎被破坏。我建议使用新的字体文件替换您正在使用的字体文件。

于 2012-03-29T17:07:19.643 回答
0

我有同样的问题.... jlego 的回答对我很有用。我的字体在 Chrome 和 IE 中被识别。在 FF 中，直到我在我的 css 文件中添加了格式（'truetype'），我的 TTF 才被识别。

于 2012-10-09T22:07:45.330 回答