Question

<head>
<link href="fonts.css" rel="stylesheet">
</head>

fonts.css

@font-face {
    font-family: opensans-regular;
    src: url(fonts/opensans/OpenSans-Regular.ttf);
}

@font-face {
    font-family: fontico;
    src: url(fonts/fontico.ttf);
}

fontico是我自己的字体，使用CorelDraw创建。

Chrome和Opera没问题。

在Firefox中-有opensans，但缺少fontico。

可能是什么原因？

Answer 1

请仔细检查src。 Firefox不接受ttf格式。

其他：请养成使用Web字体的习惯，here是了解Web字体使用的最佳文章。您可以使用fontsquirrel

这样的在线网络字体生成器将ttf转换为网络字体。

Answer 2

检查后。

您是否已经尝试过在src之后与'format（“ truetype”）'结合使用？

我不仅建议使用truetype，而且还建议使用 eot 和 woff 等类型。
只是增加了可用性。

@font-face {
    font-family: "fontico";
    src: url("/fonts/fontico.eot");/* IE9*/
    src: url("https://www.youraddress.com/fonts/fontico.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("/fonts/fontico.woff2") format("woff2"), /* chrome、firefox */
    url("/fonts/fontico.woff") format("woff"), /* chrome、firefox */
    url("/fonts/fontico.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("/fonts/fontico.svg#Fontico") format("svg"); /* iOS 4.1- */
}

也许是使用Firefox更好的后备版本之一。

Firefox中缺少字体

2 个答案: