项目中已加载字体如何调用不同样式？是否需逐个加载对应文件？

首先得指出你示例代码里的错误：font-style: Regular;和font-style: Bold;是写法错误——font-style属性是用来控制字体斜体/正常样式的（取值为normal/italic/oblique），而Regular、Bold这类是字重，对应CSS里的font-weight属性，比如Regular对应font-weight: 400，Bold对应font-weight: 700，Extrabold一般对应font-weight: 800。

接下来回答你的核心问题：能不能直接用已加载字体的不同字重，取决于你的字体文件类型和@font-face的声明方式：

• 如果你的WorkSans.ttf是仅包含单个字重的普通字体文件（比如只有Regular）：
  你没法直接调用Bold、Extrabold这类样式，强行设置font-weight: 700的话，浏览器只会把Regular字体“模拟加粗”——也就是通过算法把笔画变粗，结果会导致字体边缘模糊、字形失真，视觉效果很差，不建议这么做。这种情况必须为每个字重单独加载对应的字体文件。

• 如果你的WorkSans.ttf是包含多字重的可变字体（Variable Font）：
  可以直接调用不同字重，但需要在@font-face规则里声明字重的范围，比如：

  @font-face {
    font-family: WorkSans;
    font-style: normal;
    font-display: fallback;
    font-weight: 400 800; /* 声明支持的字重范围，从Regular(400)到Extrabold(800) */
    src: url(../sass/fonts/WorkSans.ttf) format("truetype");
  }
  
  .test{
    font-family: WorkSans;
    font-weight: 400; /* 对应Regular */
  }
  
  .test2{
    font-family: WorkSans;
    font-weight: 700; /* 对应Bold */
  }
  
  .test3{
    font-family: WorkSans;
    font-weight: 800; /* 对应Extrabold */
  }
  

  这样就能直接通过font-weight调用不同字重，不需要单独加载多个文件。

• 如果每个字重对应单独的字体文件（比如WorkSans-Regular.ttf、WorkSans-Bold.ttf、WorkSans-ExtraBold.ttf）：
  必须为每个字重单独编写@font-face规则，共用同一个font-family名称，示例如下：

  /* 加载Regular字重 */
  @font-face {
    font-family: WorkSans;
    font-style: normal;
    font-display: fallback;
    font-weight: 400;
    src: url(../sass/fonts/WorkSans-Regular.ttf) format("truetype");
  }
  
  /* 加载Bold字重 */
  @font-face {
    font-family: WorkSans;
    font-style: normal;
    font-display: fallback;
    font-weight: 700;
    src: url(../sass/fonts/WorkSans-Bold.ttf) format("truetype");
  }
  
  /* 加载Extrabold字重 */
  @font-face {
    font-family: WorkSans;
    font-style: normal;
    font-display: fallback;
    font-weight: 800;
    src: url(../sass/fonts/WorkSans-ExtraBold.ttf) format("truetype");
  }
  
  .test{
    font-family: WorkSans;
    font-weight: 400;
  }
  
  .test2{
    font-family: WorkSans;
    font-weight: 700;
  }
  

  这样浏览器会根据你设置的font-weight自动加载对应的字体文件，显示原生的字重样式，效果是最好的。

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