@font-face 尽管声明了字体，但没有显示粗体版本 - 为什么？答案

【问题标题】：@font-face not showing bold version of font despite it declaration - why?@font-face 尽管声明了字体，但没有显示粗体版本 - 为什么？
【发布时间】：2022-07-26 21:50:30
【问题描述】：

我创建了一个小型沙盒页面，虽然 CSS 确实有效，但字体对于从 Google Fonts 下载的本地托管 Open Sans 来说是个问题。

我已经在本地托管了字体，所以这个测试页面现在是独立的。

body {
 font-family: Helvetica,Arial,sans-serif;
}
h1,
h2,
h3,
h4,
h5 {
 font-family:"Open Sans", Helvetica, Arial,sans-serif;
 font-weight:400;
 font-style:normal;
 line-height:1.4em;
 color:#333;
 margin:0 0 15px 0;
}
h1 {
 font-size:22px;
}
h2 {
 font-size:20px;
}
h3 {
 font-size:18px;
}
h4 {
 font-size:16px;
}
h5 {
 font-size:14px;
}
p {
 font-family:"Open Sans", Helvetica, Arial,sans-serif;
 font-weight:400;
 font-style:normal;
 font-size:14px;
 line-height:1.2em;
 color:#333;
 margin:0 0 15px 0
}
a {
text-decoration: none;
}
b {
font-family: Open Sans, sans-serif;
font-weight: 700;
}
#header {
  background: #01b14c;
  width: 100%;
  box-shadow: 0 0 10px 0 rgba(0,0,0,.15);
  left: 0;
  right: 0;
  padding: 6px 0;
}
.fal.fa-phone::before {
  content: "\ea39";
}
.footer {
  padding: 60px 0;
  background: #000;
  color: #FFF;
}
#cloned-hometext {
width: 470px;
}

.about-text {
font-size: 13px;
}

@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
    url('fonts/OpenSans-Regular.ttf'); 
    font-display: swap;   
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'Open Sans';
    src:
    url('fonts/OpenSans-Bold.ttf');
    font-weight: 700;
    font-display: swap;
    font-style: bold;
}

@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
    url('fonts/OpenSans-ExtraBold.ttf');
    font-weight: 900;
    font-display: swap;
    font-style: bold;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test page</title>
    <link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<header id="header">
<h1>A TEST</h1>
</header>
<div id="cloned-hometext" class="about-text">
  <h1>TEST</h1>
<p>This is a test</p>
<h3>This works</h3>
<b>It's got to work</b>
</div>
<footer class="footer">
Content to come
</footer>
</body>
</html>

尽管 style.css 所在的样式的字体文件夹中有 OpenSans-Bold 字体，但文档仅显示 Open Sans 或仿粗体。

这些是目录中的所有字体：

OpenSans-Bold.ttf

OpenSans-ExtraBold.ttf

OpenSans-Medium.ttf

OpenSans-Regular.ttf

OpenSans-SemiBold.ttf

但是，即使我在 HTML 中声明，粗体字体也不会显示。

如何在我拥有的 CSS 中解决这个问题？

注意上面的代码，就是 style.css 的内容；它不是内联的。

【问题讨论】：

在您提供的 sn-p 中工作正常
@tacoshy：它显示的是默认字体，而不是 OpenSans。

标签： html css fonts

【解决方案1】：

检查字体文件的路径 url，如果它在同一路径中，请将 url 路径更改为“url('./fonts/OpenSans-Regular.ttf')”

【讨论】：

谢谢。发现错误，我给了错误的字体粗细是 h2/h3/h4 字体粗细。

【解决方案2】：

将 format('truetype') 添加到您的 @font-face 声明中。此外，如果它不起作用，则将 @font-face 声明移动到 CSS 的顶部。

此外，如果 Open Sans 是您的默认字体，则将其应用于正文，您不必像现在一样一遍又一遍地为所有元素指定 font-family。

你也确定字体文件的路径，看起来它可能需要一些点和斜线。

【讨论】：