背景
在进行前端开发时，我们通常会使用 CSS Reset 来重置不同浏览器的默认样式表。然而，有时候会因此带来一些意想不到的问题，比如字体大小、字体样式等方面出现差异。接下来，我们将讨论如何解决因 CSS Reset 引起的字体问题。
问题
当我们使用 CSS Reset 后，可能会发现字体样式出现了变化，而我们并没有进行相关的修改。这是因为 CSS Reset 会重置所有原样式，并将它们设定为通用值，而这些通用值并不一定与我们所需的样式匹配。因此，当我们使用通用值时，可能会导致出现字体样式不一致的问题。
例如，我们使用了如下的 CSS Reset：
- -
------- --
-------- --
------- --
-------- --
---------- -----
--------------- ---------
-在此基础上，我们又在某个元素上定义了字体样式：
-- - ---------- ----- ------------ ----- ------------ ------ ----------- -
此时，我们可能会发现在某些浏览器上，h1 的字体样式并不是 Arial，而是 Times New Roman，明显与我们所需的不一致。
解决方案
1. 精细化设定字体样式
我们可以在 CSS Reset 中去掉对字体大小的设定，而是直接在需要的元素中精确设定字体大小、字重及字体类型，这样就可以避免默认字体样式出现差异。
例如，我们可以定义如下的 CSS Reset：
- -
------- --
-------- --
------- --
-------- --
--------------- ---------
-在此基础上，我们可以精细化设定具体的字体样式：
-- - ---------- ----- ------------ ----- ------------ ------ ----------- -
这样做的好处是，我们可以在不同的浏览器和设备上保持相同的字体样式，同时也可以更加精确地控制字体的大小和样式。
2. 使用 normalize.css
除了手动精细设定字体样式外，我们还可以使用洁净的 CSS 样式表来避免由 CSS Reset 导致的字体问题。其中一个受欢迎的选择是 normalize.css。
normalize.css 与 CSS Reset 的不同之处在于它并不完全清除浏览器默认样式，而是将所有浏览器的样式都设为相等的值，使它们在不同浏览器上具有相同的表现。但相比于 CSS Reset，normalize.css 更加注重合理性和规范性，可以避免很多常见的浏览器样式问题。
例如，我们可以在 HTML 文件中引入 normalize.css：
----- ---------------- ---------------------
使用 normalize.css 后，我们再定义自己的字体样式，就可以保持在不同浏览器和设备上的一致性。
总结
CSS Reset 虽然可以重置浏览器样式，但如果使用不当，会导致字体样式出现差异等问题。为避免这些问题，我们可以手动精细设定字体样式，或者使用 normalize.css 等洁净的样式表。不管采用何种方案，我们都要注重细节，以确保最终的效果符合预期。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/647aa5ed968c7c53b065483c