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。

但是，normalize.css也将h1视为粗体文本。

Answer 2

使用字体创建不同的类，并将这些类分配给预期的标签

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


.myh1 {
  font-family : matrix;
  font-weight : 400;
}
.myp {
  font-family: matrix;
  font-weight:700;
}

示例

<h1 class='myh1'>Some Text</h1>
<p class='myp' >Some more text that is bold!</p>

Answer 3

也许您必须使用<em></em>标签进行样式设置，因为HTML4中已弃用 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b

或者您尝试更改font-weight：粗体；字体粗细：700；并添加此样式

b { font-weight: 700; }

Answer 4

尝试一下：

Result of Test1: true

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

4 个答案: