如何正确使用从Google Fonts选取的多字重及样式字体

你当前的问题出在错误地将字重参数写进了font-family属性中，font-family仅用于指定字体名称，字重和斜体需要通过专门的CSS属性来控制。

核心修正逻辑 #

• 保持font-family统一为'Fira Sans', sans-serif
• 使用font-weight属性设置字重（对应你引入的100、200、400、500、700等数值）
• 使用font-style属性控制斜体（normal对应非斜体，italic对应斜体，对应你引入参数里的ital@0和ital@1）

修正后的完整代码 #

CSS代码

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,400;0,500;0,700;1,400&display=swap');

.box1 {
  font-family: 'Fira Sans', sans-serif;
  /* 默认字重为400，与引入参数一致 */
}

.box2 {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 500; /* 设置为500字重 */
}

.box3 {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 700; /* 设置为700粗体 */
}

/* 额外示例：斜体+指定字重 */
.box4 {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 400;
  font-style: italic; /* 启用斜体，对应引入的ital@1,400 */
}

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Flexbox 3</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="main1">
    <div class="box1">box 1（默认400字重）</div>
    <div class="box2">box 2（500字重）</div>
    <div class="box3">box 3（700粗体）</div>
    <div class="box4">box 4（400字重+斜体）</div>
  </div>
</body>
</html>

补充说明 #

你引入的Google Fonts链接中，ital,wght@0,100;0,200;0,400;0,500;0,700;1,400的含义是：

• 0代表非斜体，1代表斜体
• 后面的数字对应字重，比如0,500就是非斜体+500字重，1,400就是斜体+400字重
  只要CSS属性与这些引入的参数对应，就能正确加载并显示对应的字体样式。

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