遇到 CSS Reset 引起的字体问题该如何解决

背景

在进行前端开发时，我们通常会使用 CSS Reset 来重置不同浏览器的默认样式表。然而，有时候会因此带来一些意想不到的问题，比如字体大小、字体样式等方面出现差异。接下来，我们将讨论如何解决因 CSS Reset 引起的字体问题。

问题

当我们使用 CSS Reset 后，可能会发现字体样式出现了变化，而我们并没有进行相关的修改。这是因为 CSS Reset 会重置所有原样式，并将它们设定为通用值，而这些通用值并不一定与我们所需的样式匹配。因此，当我们使用通用值时，可能会导致出现字体样式不一致的问题。

例如，我们使用了如下的 CSS Reset：

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
}

在此基础上，我们又在某个元素上定义了字体样式：

h1 {
   font-size: 32px;
   font-weight: bold;
   font-family: Arial, sans-serif;
}

此时，我们可能会发现在某些浏览器上，h1 的字体样式并不是 Arial，而是 Times New Roman，明显与我们所需的不一致。

解决方案

1. 精细化设定字体样式

我们可以在 CSS Reset 中去掉对字体大小的设定，而是直接在需要的元素中精确设定字体大小、字重及字体类型，这样就可以避免默认字体样式出现差异。

例如，我们可以定义如下的 CSS Reset：

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
}

在此基础上，我们可以精细化设定具体的字体样式：

h1 {
   font-size: 32px;
   font-weight: bold;
   font-family: Arial, sans-serif;
}

这样做的好处是，我们可以在不同的浏览器和设备上保持相同的字体样式，同时也可以更加精确地控制字体的大小和样式。

2. 使用 normalize.css

除了手动精细设定字体样式外，我们还可以使用洁净的 CSS 样式表来避免由 CSS Reset 导致的字体问题。其中一个受欢迎的选择是 normalize.css。

normalize.css 与 CSS Reset 的不同之处在于它并不完全清除浏览器默认样式，而是将所有浏览器的样式都设为相等的值，使它们在不同浏览器上具有相同的表现。但相比于 CSS Reset，normalize.css 更加注重合理性和规范性，可以避免很多常见的浏览器样式问题。

例如，我们可以在 HTML 文件中引入 normalize.css：

<link rel="stylesheet" href="normalize.css">

使用 normalize.css 后，我们再定义自己的字体样式，就可以保持在不同浏览器和设备上的一致性。

总结

CSS Reset 虽然可以重置浏览器样式，但如果使用不当，会导致字体样式出现差异等问题。为避免这些问题，我们可以手动精细设定字体样式，或者使用 normalize.css 等洁净的样式表。不管采用何种方案，我们都要注重细节，以确保最终的效果符合预期。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647aa5ed968c7c53b065483c