CSS 字重在Mac/Safari上变轻

在本文中，我们将介绍CSS中字重在Mac/Safari浏览器上变轻的现象，以及如何解决这个问题。

阅读更多：CSS 教程

什么是CSS字重？

在CSS中，字重（font weight）表示文本的粗细程度。常用的字重值有：normal（普通）、bold（粗体）以及数值形式的100（最轻）到900（最重）。字重样式可以应用于文本、标题、按钮等元素上。

在Mac/Safari浏览器上，一些用户反映字重样式似乎比其他浏览器要轻。这个问题尤其在使用字重值为bold时更为明显。在某些情况下，文本显示效果不统一，给用户带来困惑和不满。

这个问题主要是由于Mac/Safari浏览器对于字重样式的权重计算方式不同于其他浏览器。在Mac/Safari上，字重值为bold的文本样式会变得比较细，看起来更轻。这是Mac/Safari浏览器自身的默认渲染效果。

虽然无法直接改变Mac/Safari浏览器的默认渲染效果，但我们可以采用一些技巧来解决这个问题。

取代使用关键字字重，我们可以使用数值字重（font-weight: 400;）来精确指定文本的字重。数值字重在不同浏览器上通常更加一致。通过使用数值字重，我们可以确保在不同浏览器上获得一致的字重样式。

示例代码：

h1 {
  font-weight: 400;
}

另一种解决方案是通过给文本应用阴影或轮廓效果，来达到增加字体粗细的目的。这种方法可以有效地控制文本的外观，并且在Mac/Safari上得到一致的字体粗细效果。

示例代码：

h1 {
  text-shadow: 0 0 2px black; /* 使用文本阴影增加粗细 */
}

h2 {
  outline: 2px solid black; /* 使用文本轮廓增加粗细 */
}

另外一个解决方案是使用Web字体，如Google Fonts或Adobe Fonts等。这些Web字体经过优化，可以在不同的浏览器和操作系统上获得一致的字体粗细效果。通过引入Web字体，我们可以更好地控制文本的展示效果，以解决Mac/Safari上字重变轻的问题。

示例代码：

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');

body {
  font-family: 'Roboto', sans-serif;
}

本文介绍了CSS中字重在Mac/Safari浏览器上变轻的现象，并提供了解决这个问题的方法。我们可以使用数值字重、文本阴影或轮廓，以及Web字体来达到一致的字体粗细效果。通过这些技巧，我们可以有效地解决在Mac/Safari上字重变轻的问题，提升用户的浏览体验。