背景
在前端开发中，为了消除浏览器之间的差异，我们常常使用 CSS Reset 来重置浏览器的默认样式。但是，在使用 CSS Reset 后，我们可能会遇到文本过小或过大的问题，这是因为 CSS Reset 会将文本的字体大小、行高等样式都重置为默认值，而不同浏览器的默认值可能不同。
解决方法
方法一：重新设置文本样式
我们可以在 CSS Reset 之后，重新设置文本的样式，包括字体大小、行高、字体族等。例如：
body {
font-size: 16px;
line-height: 1.5;
font-family: Arial, sans-serif;
}这样可以保证文本在不同浏览器中都具有相同的样式。
方法二：使用 normalize.css
normalize.css 是一款流行的 CSS Reset 库，它不仅可以重置浏览器的默认样式，还可以解决文本过小或过大的问题。它会将文本的字体大小、行高等样式设置为一个相对于根元素的百分比值，从而保证在不同浏览器中文本的大小相同。
我们可以在项目中引入 normalize.css，并在 CSS Reset 之后引入它。例如：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------- --------------------- ----- ---------------- ----------------- ----- ---------------- --------------------- ------- ------ --------------- ------- -------
方法三：使用 em 或 rem 单位
em 和 rem 是相对单位，可以根据父元素或根元素的字体大小来确定实际的字体大小。我们可以在 CSS Reset 之后使用 em 或 rem 单位来设置文本的字体大小和行高。
例如，假设我们的根元素字体大小为 16px，我们可以这样设置文本的样式：
-- -------------------- ---- ------- ---- - ---------- ----- ------------ ---- - -- - ---------- ----- ------------ ---- -
这样可以保证文本在不同浏览器中都具有相同的样式，并且可以根据根元素的字体大小进行缩放。
总结
在使用 CSS Reset 时，我们需要注意文本过小或过大的问题，可以通过重新设置文本样式、使用 normalize.css 或使用相对单位来解决。这些方法可以保证文本在不同浏览器中具有相同的样式，并且可以根据根元素的字体大小进行缩放。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6515783595b1f8cacdded0bc