没有在机器上安装字体的用户无法在网站上看到它

Question

我正在制作这个花哨的网站： https://omnitored.000webhostapp.com/ 问题是只有在他们的机器上安装了字体的人才能在网站上看到它，否则它会显示为Arial。

这就是我找到字体时的样子：

这就是为那些没有安装字体的人寻找的方式：

另外，我的css代码代表字体：

@font-face {
    font-family: infierno;
    src: url(../fonts/infierno.ttf),
    url(../fonts/infierno.eot),
    url(../fonts/infierno.woff);
}

我确信文件中的所有名称和链接都是正确的，因为它对我和主机以及本地文件都有效。

Answer 1

src在您的CSS代码中拼写错误。另外，相对于CSS文件的字体文件在哪里？如果fonts文件夹位于根目录中，则需要将src属性更改为一个文件夹，然后才能进入fonts文件夹。

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

编辑：我在谷歌浏览器中使用此@font-face声明让它工作。如果这对您有用，请告诉我。

@font-face {
    font-family: infernio;
    src: url(../fonts/infierno.ttf),
      url(../fonts/infierno.woff),
      url(../fonts/infierno.eot);  
}

Answer 2

在下面添加.eot和.wof字体.ttf。 并通过检查开发控制台确保您的字体已加载到浏览器中。

@font-face {
    font-family: 'infierno';
    src: url('../fonts/infierno.ttf');
    src: url('../fonts/infierno.eot');
    src: url('../fonts/infierno.wof');
}