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（它还在建设中！请原谅这个烂摊子！）

Answer 1

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

Answer 2

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

然而 Firefox和Chrome都应该支持TTF，这是您正在使用的格式。

在您的网站上研究您的问题时，我发现在我检查的任何浏览器中，该字体无法正常呈现。我发现的是样式表引用时正确的文件位置，但字体文件似乎已损坏。我建议换一个新的字体文件替换你正在使用的那个。

Answer 3

我有同样的问题......乐高的答案对我有用。我的字体在Chrome和IE中得到了认可。在FF中我的TTF没有被识别，直到我在我的css文件中添加了格式（'truetype'）。

Firefox无法识别自定义字体

3 个答案: