在前端开发中，我们通常会使用 CSS reset 来消除不同浏览器之间的样式差异，以确保网站的稳定和一致性。然而，有时候我们在使用 CSS reset 的过程中会发现字体大小变化了，给用户带来了不良的用户体验。本文将介绍如何在使用 CSS reset 的情况下避免字体大小变化。
什么是 CSS Reset？
CSS reset 是一组通用的 CSS 规则，它可以在初始加载时删除所有浏览器的默认样式，并将这些元素的属性重置为常见值。这样做是为了消除浏览器之间的差异，以确保网站在所有浏览器中都能以相同的方式呈现。
CSS Reset 会导致字体大小变化的原因
CSS reset 会将所有的元素的字体大小重置为一个标准值，这个标准值在不同的 CSS reset 中可能会有所不同。例如，Eric Meyer's Reset CSS 将所有元素的字体大小设置为 100%，而 Normalize.css 则将字体大小设置为 1em。这样做的目的是确保不同浏览器的默认字体大小一致。然而，在这个过程中，如果页面中已经手动设置了某个元素的字体大小，那么这个元素的字体大小将会被重置为 CSS reset 中的标准值，从而导致字体大小变化。
如何避免字体大小变化
要避免字体大小变化，需要先了解哪些元素会受到 CSS reset 影响。通常来讲，只有少部分元素会受到 CSS reset 影响，例如标题（h1-h6）、段落（p）、表格（table）等。因此，只需要针对这些元素手动设置字体大小即可避免字体大小变化。示例代码如下：
/* 重置所有元素的字体大小 */
* { font-size: 100%; }
/* 针对受影响的元素手动设置字体大小 */
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
p { font-size: 1em; }
table { font-size: 1em; }在这个示例代码中，我们首先使用 * 选择器将所有元素的字体大小重置为 100%，然后针对受影响的元素（例如 h1、h2、p、table 等）手动设置字体大小，从而避免了字体大小变化的问题。
总结
在使用 CSS reset 的时候，要注意不要将带有手动设置字体大小的元素也重置为 CSS reset 中的标准值，从而导致字体大小变化。只需要针对受影响的元素手动设置字体大小即可避免这个问题。希望本文能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64823e1148841e98941b023e