CSS 字体粗细(font-weight)不起作用

在本文中，我们将介绍CSS中的font-weight属性，探讨其使用方式以及可能遇到的问题。CSS的font-weight属性用于设置字体的粗细程度，取值范围从100到900，以100为最轻，400为默认值，700为最粗。然而，有时候我们可能会发现font-weight属性并不能按照我们的预期工作。

阅读更多：CSS 教程

问题描述

CSS的font-weight属性在设置字体粗细时通常是可靠的，但在某些情况下可能会表现出不可预测的行为。如下所示的示例代码：

h1 {
  font-weight: bold;
}

在这个例子中，我们期望h1元素的文本以粗体显示。然而，有些浏览器在某些情况下可能无法正确渲染粗体字体，导致设置的font-weight属性不起作用。

可能的原因

字体不支持粗体：一些字体家族可能没有提供粗体字形的设计。在这种情况下，浏览器会尝试模拟出粗体效果，但结果可能不尽如人意。
字体文件未加载：如果字体文件未正确加载，浏览器将无法显示所需的字体粗细，而会选择默认字体。

解决方法

针对CSS字体粗细不起作用的问题，我们可以尝试以下解决方法：

使用其他字体：如果当前字体不支持粗体字形，可以尝试使用其他字体来代替。可以通过在font-family属性中添加备用字体来设置，确保字体粗细始终如预期。

h1 {
  font-family: 'Arial', sans-serif;
  font-weight: bold;
}

使用web字体：使用web字体可以解决字体不完整或无法正确加载的问题。通过使用@font-face规则，将字体文件嵌入到网页中，确保浏览器能够正确加载所需的字体资源。

@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2');
  font-weight: bold;
}

h1 {
  font-family: 'MyCustomFont', sans-serif;
}

示例分析

接下来，我们将通过一个实际的示例来深入了解CSS字体粗细不起作用的问题。

首先，我们创建一个HTML文件，并在其内部添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <title>CSS font-weight not working example</title>
  <style>
    @font-face {
      font-family: 'MyCustomFont';
      src: url('myfont.woff2') format('woff2');
      font-weight: bold;
    }

    h1 {
      font-family: 'MyCustomFont', sans-serif;
    }
  </style>
</head>
<body>
  <h1>This is a heading</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>