html - @font-face - 为一种字体使用多个文件

Question

这个问题似乎已经被问过很多次了(比如 here )。但是我的问题似乎并没有通过提供的答案得到解决。

我正在尝试为一种字体使用多个文件。每个文件都有不同的样式——斜体、粗体。我尝试了以下操作:

@font-face {
    font-family: matrix;
    src: url('../fonts/chris-simpkins_hack/Hack-Regular.ttf');
}
@font-face {
    font-family: matrix;
    font-weight: bold;
    src: url('../fonts/chris-simpkins_hack/Hack-Bold.ttf');
}

我的 HTML 包含以下内容:

<h1>Some Text</h1>
<p><b>Some more text that is bold!</b></p>

出乎意料的是，页面上输出的所有文本都使用“...bold.tff”文件。这是为什么？

我过去能够轻松快速地实现这一目标，但不确定这次有什么不同。

Answer 1

默认情况下，h1 使用粗体文本。参见 W3School了解详情。

只需添加 h1{ font-weight: normal;} 即可重置。

如果您不喜欢浏览器默认的 css，您可以使用一些 reset.css 或 normalize.css .

But, normalize.css treat h1 as bold text, too.