如何在HTML中通过<span style>引入Formula1字体并切换对应子字体

纯HTML（完全不使用任何CSS规则，包括行内样式）无法实现自定义字体的引入与调用。已被HTML5废弃的<font>标签仅支持调用设备本地已安装的字体，且不支持精确匹配同字体下的不同子字体样式。

你之前代码失效的核心原因 #

你将子字体的字重后缀直接写到了font-family属性中，正确的逻辑是：同系列的子字体属于同一个字体族，只需要通过font-weight、font-style属性即可匹配对应样式的子字体，不需要在字体族名中加后缀。

仅用HTML行内样式实现（仅适用本地已安装字体的场景） #

该方案不需要额外写独立CSS代码，仅依赖行内CSS属性，可直接调用你本地已安装的F1字体：

• 调用F1 Display常规字重：

<span style="font-family: 'Formula1 Display', sans-serif; font-weight: 400; font-size: 2em">Safety Car</span>

• 调用F1 Display粗体字重：

<span style="font-family: 'Formula1 Display', sans-serif; font-weight: 700; font-size: 2em">Safety Car</span>

• 调用F1 Text斜体样式：

<span style="font-family: 'Formula1 Text', sans-serif; font-style: italic; font-size: 2em">Safety Car</span>

完整CSS实现（支持引入外部字体，不依赖用户本地安装） #

第一步：用@font-face绑定子字体到对应字体族规则 #

先在CSS中定义字体族，将不同的子字体文件和对应字重、样式做绑定：

/* 定义F1 Display字体族的不同字重 */
@font-face {
  font-family: 'Formula1 Display';
  /* 替换为你自己的字体文件实际存储路径 */
  src: url('./fonts/Formula1Display-Regular.woff2') format('woff2'),
       url('./fonts/Formula1Display-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Formula1 Display';
  src: url('./fonts/Formula1Display-Bold.woff2') format('woff2'),
       url('./fonts/Formula1Display-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 定义F1 Text字体族的不同样式 */
@font-face {
  font-family: 'Formula1 Text';
  src: url('./fonts/Formula1Text-Italic.woff2') format('woff2'),
       url('./fonts/Formula1Text-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

第二步：定义样式类实现子字体切换 #

.f1-display-regular {
  font-family: 'Formula1 Display', sans-serif;
  font-weight: 400;
}
.f1-display-bold {
  font-family: 'Formula1 Display', sans-serif;
  font-weight: 700;
}
.f1-text-italic {
  font-family: 'Formula1 Text', sans-serif;
  font-style: italic;
}

第三步：HTML中调用对应类即可 #

<p class="f1-display-regular" style="font-size: 2em">Safety Car（常规字重）</p>
<p class="f1-display-bold" style="font-size: 2em">Safety Car（粗体字重）</p>
<p class="f1-text-italic" style="font-size: 2em">Safety Car（斜体样式）</p>

内容的提问来源于stack exchange，提问作者Luismi Carmona