时间戳

首页 > 解决方案 > CSS：文本随机显示为斜体，以及什么都没有改变

html - CSS：文本随机显示为斜体，以及什么都没有改变

问题描述

所以我的问题是，我有一个关于列表的练习，我正在做，我从 Google Fonts 导出字体 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字体粗细对于我正在做的样式来说太重了），字体随机变成了italics。当我尝试使用 强制它恢复正常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>

标签： htmlcssfonts

解决方案

（<!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>

推荐阅读