CSS：文本随机显示为斜体，并且 <font-style: normal;> 没有任何变化答案

【问题标题】：CSS: text randomly appearing as italics, and <font-style: normal;> changes nothingCSS：文本随机显示为斜体，并且 <font-style: normal;> 没有任何变化
【发布时间】：2021-04-01 17:57:08
【问题描述】：

所以我的问题是，我有一个关于列表的练习，我正在做，我从谷歌字体中导出了 Exo 2 字体：

@font-face {
    font-family: 'Exo 2', sans-serif;
    src: url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300&display=swap');
}

但是当我将字体分配给 h1 和 h2 并添加 font-weight:500; 时（因为否则默认的 h1 字体重量对于我正在做的样式来说太重了），字体随机变成了斜体。当我尝试使用font-style: normal; 强制它恢复正常时，它仍然是那样。不使用斜体的唯一方法是保留默认重量。

这是为什么？我该如何解决这个问题？

MRE：

HTML

@font-face {
    font-family: 'Exo 2', sans-serif;
    src: url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300&display=swap');
}
*{
    font-family: 'Exo 2', sans-serif;
}
h1,h2{
    font-weight: 500;
    font-style: normal;
}

<h1>Mugekenaga</h1>
<h2>Komeji</h2>
<ol>
    <li>Fomikatarye</li>
    <li>Domikatarye</li>
</ol>

【问题讨论】：

试试!important;，看看它是否适合你。

标签： html css fonts

【解决方案1】：

（如果没有，请在最顶部指定<!DOCTYPE html>）

尝试以这种方式导入谷歌字体：

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

css

  *{font-family: 'Exo 2', sans-serif;}
  h1,h2{font-size: 30px; font-weight: 300;}

html

<h2>Komeji</h2>
<ol>
    <li>Fomikatarye</li>
    <li>Domikatarye</li>
</ol>

只是一个旁注，取决于您使用的浏览器，有时对于 h1~h*，字体粗细的数值可能无法识别。

我已经在 chrome 上尝试过这段代码，看起来所有 100~900 的字体粗细都可以正常工作。为了您的方便，我将完整的代码放在下面。

<!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>Document</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>

    *{font-family: 'Exo 2', sans-serif;}
    h1,h2{font-size: 30px; font-weight: 300;}
    </style>
</head>
<body>
  <h2>Komeji</h2>
  <ol>
      <li>Fomikatarye</li>
      <li>Domikatarye</li>
  </ol>
</body>
</html>

【讨论】：