问题描述
在进行前端开发时，我们经常会使用 CSS Reset 来重置 HTML 元素的默认样式，以解决不同浏览器对元素样式的兼容性问题。然而，有时候使用 CSS Reset 后，网页上的字体样式会出现错乱的情况，如下图所示：
可以看到，原本应该是宋体字体的文字现在变成了 Arial 字体，且字号和颜色也发生了改变。这种情况下，用户体验就会变差，影响网页的美观和易用性。
问题原因
为什么会出现这种情况呢？实际上，CSS Reset 重置了 HTML 元素的样式，这也包括了字体样式。比如，下面是一个常见的 CSS Reset 样式：
-- -------------------- ---- ------- ---- - ------- -- -------- -- ---------- ------ ------------ ------ ---------- ----------- - -- -- ----- ----- -- --- --- --- --- --- -- - ---------- ----- ------------ ------- - -- -- - ----- -- - - ------- -- -------- -- -
这段代码中设置了默认的字体样式 font-family: Arial, Helvetica, sans-serif;，这意味着在网页的任何地方如果没有明确指定字体样式，就会使用这个默认的字体。如果网页中某些元素原本使用的是其他字体，如宋体，那么就会被 CSS Reset 覆盖，导致字体样式出现错乱。
解决办法
避免 CSS Reset 导致字体样式错乱的方法有很多，这里介绍两种常用的方法。
1. 明确指定字体样式
一个简单的方法是在样式表中明确指定元素的字体样式，如下面的样式：
-- -------------------- ---- ------- ---- - ------------ --- ------- ----------- - --- --- --- --- --- -- - ------------ ------ ----------- - - - ------------ --- ------- ----------- -
在上面的例子中，我们分别为 body、h1-h6 标题和 p 标签指定了不同的字体样式，这样即使使用了 CSS Reset，这些元素的字体样式也不会受到影响。
2. 使用网页字体
另一种方法是使用网页字体，比如 Google Fonts 或者 Adobe Fonts 等，这些网站提供了各种自定义字体，可以通过链接或者嵌入代码的方式引用。使用网页字体的好处是可以保持一致的字体样式，不受 CSS Reset 影响，且可以提升网页的美观程度。
以 Google Fonts 为例，下面是如何在网页中引用一个自定义字体：
- 打开 Google Fonts 网站，搜索并选择一个合适的字体；
- 点击 "Select This Font" 按钮，选择自己需要的字体样式；
- 点击 "Customize" 按钮，调整字体的大小、颜色和样式等；
- 最后复制页面上的
link或者@import代码，并将其添加到 HTML 文档的<head>标签内，例如：
<head> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> </head>
在引用了网页字体之后，就可以在样式表中调用对应的字体了，如：
body {
font-family: 'Roboto', sans-serif;
}总结
CSS Reset 可以解决浏览器兼容性问题，但也可能会引起字体样式的错误。为了避免这种问题，开发人员需要明确指定元素的字体样式，或者使用网页字体。这样可以确保网页的字体样式不被 CSS Reset 影响，提升用户体验和网页的美观程度。
示例代码
HTML 代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ----- -------------------
----- ------------------------------------------------------------------ -----------------
-------
-- --- ----- --
---- -
------- --
-------- --
---------- ------
------------ ------ ---------- -----------
-
--- --- --- --- --- -- -
---------- -----
------------ -------
-
- -
------- --
-------- --
-
-- ---- --
-- -
------------ --------- -----------
---------- ----
------ -----
-
- -
------------ --------- -----------
---------- ------
------ -----
-
--------
-------
------
---------------------
---- --- ----- -----------------------------------------------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b79aa2add4f0e0ff02754b