Firefox 中缺少字体答案

【问题标题】：missing font in FirefoxFirefox 中缺少字体
【发布时间】：2019-04-15 22:52:29
【问题描述】：

<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。

可能是什么原因？

【问题讨论】：

标签： css firefox fonts

【解决方案1】：

请仔细检查源代码。除了ttf 格式之外，Firefox 也接受。

补充：请有使用网络字体的习惯，here是了解网络字体使用的最佳文章。您可以使用在线网络字体生成器将 ttf 转换为网络字体，例如 fontsquirrel

【讨论】：

非常感谢。在fontsquirrel 上转换后，它就可以工作了。请问有什么区别？
请查看这篇文章。 css-tricks.com/understanding-web-fonts-getting

【解决方案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 更好地工作的后备之一。

【讨论】：