在前端开发中，CSS Reset 是一个重要的概念，它的作用是将 HTML 元素的默认样式归零，以保证不同浏览器的页面排版效果尽量一致。但是在使用 CSS Reset 的过程中，我们可能会遇到一个问题，那就是它会影响到一些特定的字体库，比如 FontAwesome。
FontAwesome 是一个开源的图标字体库，它包含了大量的图标可以直接用作页面元素，而且字体的大小和颜色都可以轻松修改。但是，如果我们使用了 CSS Reset，FontAwesome 的所有图标都会被重置成默认的字体，无法正常显示。那么，如何避免 CSS Reset 影响到 FontAwesome 字体库呢？下面我们来一步步解决这个问题。
问题分析
首先，我们要了解 CSS Reset 对字体库的影响是如何产生的。CSS Reset 通常会将所有元素的字体大小、字体颜色、行高等属性都设置成了默认值，这样可以保证在不同的浏览器中页面显示效果的一致性。但是，这也就意味着，如果 FontAwesome 的图标字体的属性也是被 Reset 掉的，它们就会变成默认的字体，无法正常显示。
我们可以通过 Chrome 的开发者工具来分析这个问题。首先，在网页上使用 FontAwesome 的一个图标（比如 "fa-bug"）：
<i class="fas fa-bug"></i>
然后，在开发者工具的 Style 标签页中查看这个元素的属性：
font-family: "Font Awesome 5 Free"; /* 确认使用了FontAwesome字体 */
接着，在 head 标签中加入 CSS Reset：
<head> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="fontawesome.css"> </head>
在 reset.css 文件中加入以下代码：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 16px;
font-family: Arial, sans-serif;
}重新加载页面，再次查看这个元素的属性：
font-family: Arial, sans-serif; /* Reset 影响了FontAwesome字体 */
我们可以发现，CSS Reset 中的 font-family 属性覆盖了原本应该使用的 Font Awesome 5 Free 字体。这就是问题产生的源头。
解决方法
有了问题的分析，我们就可以来思考解决方法了。根据问题的产生原因，我们可以得出两个解决方法：避免使用 CSS Reset，或者为 FontAwesome 的字体设定一个专属的 font-family。
避免使用 CSS Reset
第一个解决方法是避免使用 CSS Reset。如果你的项目中没有多浏览器兼容的需求，或者已经使用了已经兼容了不同浏览器的解决方案（比如 normalize.css），那么其实可以避免使用 CSS Reset。如果使用了 CSS Reset，就要记住它可能会影响到一些字体库，需要做出相应的处理。
为 FontAwesome 设定专属字体
第二个解决方法就是为 FontAwesome 设定一个专属的 font-family。我们可以在 head 标签中新增一个 style 标签，设定 FontAwesome 的字体，在 CSS Reset 不会覆盖的情况下， FontAwesome 的图标应该就能正常显示了。
-- -------------------- ---- -------
------
----- ---------------- -----------------
----- ---------------- -----------------------
-------
--- ----------- ------- -------------
-----
---- -
------------ ----- ------- - ------
-
---- -
------------ ----- ------- - --------
-
--------
-------在上面的代码中，我们为不同的 FontAwesome 图标类别设定了不同的字体。需要注意的是，如果还要使用其他的字体库，也需要为它们设定专属的字体。并且，如果使用了其他的 FontAwesome 拓展库（比如 Font Awesome 5 Pro），其 font-family 可能也会有所不同。
示例代码
为了更好地理解解决方法，下面是完整的示例代码。
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- -----------------
----- ---------------- -----------------------
-------
--- ----------- ------- -------------
-----
---- -
------------ ----- ------- - ------
-
---- -
------------ ----- ------- - --------
-
--------
-------
------
-- ---------- ------------
-- ---------- --------------
-------
-------在这个示例中，我们使用了 FontAwesome 的 "fa-bug" 和 "fa-apple" 两个图标，其中 "fa-bug" 属于 fas 类型，需要使用 Font Awesome 5 Free 字体，而 "fa-apple" 属于 fab 类型，需要使用 Font Awesome 5 Brands 字体。我们为这两个字体分别设定了专属的 font-family，以确保它们不会受到 CSS Reset 的影响。
总结
在前端开发中，CSS Reset 是一个常用的技术手段，但是它也可能会对某些特定的字体库产生影响，需要我们额外注意。针对 FontAwesome 字体库的问题，我们可以通过为其设定专属的 font-family 来解决。如果你的项目需要使用多个字体库，并且使用了 CSS Reset，那么就需要为每个字体库都设定专属的字体属性，以确保它们能正常显示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6481620348841e98940d6fb5