Question

我有index.html链接到main.css。根据关于using custom fonts的SO问题的答案之一，我已将文件FoundrySterling-Medium.otf保存在相应的文件夹中，然后按原样调用它来加载我的自定义字体：

@font-face{
    font-family: "FoundrySterling";
    src: "assets/fonts/FoundrySterling-Medium.otf",
}

稍后，对于body元素，我将其设置为：

body, input, select, textarea {
        color: #fff;
        font-family: 'FoundrySterling', sans-serif;
        font-size: 15pt;
        font-weight: 400;
        letter-spacing: 0.075em;
        line-height: 1.65em;
    }

然而，无论如何，字体都不会显示，而是使用默认的Helvetica或Arial（取决于Mac或PC）。我错过了什么？

谢谢！

Answer 1

这是您的原始代码：

@font-face{
    font-family: "FoundrySterling";
    src: "assets/fonts/FoundrySterling-Medium.otf",
}

为什么你最后不使用分号？不确定是否故意。

@font-face{
    font-family: "FoundrySterling";
    src: url("assets/fonts/FoundrySterling-Medium.otf");
}

Answer 2

尝试改变

src: "assets/fonts/FoundrySterling-Medium.otf",

到

src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/

我希望它会对你有所帮助。

请注意，某些字体格式不适用于所有浏览器;你可以使用fontsquirrel.com的生成器来避免过多的转换。

您可以找到由Google字体提供的一套很好的免费网络字体（也有自动生成的CSS @ font-face规则，因此您不必自己编写）。

Answer 3

更改您的代码以使用url(...)语法：

交换：

src: "assets/fonts/FoundrySterling-Medium.otf"

使用：

src : url('assets/fonts/FoundrySterling-Medium.otf');

自定义字体未在CSS中加载

3 个答案: