什么是 CSS Reset
在开发网页时，我们可以使用 CSS Reset 来重置浏览器默认的样式，以使我们的样式更加统一、可控。CSS Reset 通常在代码的最开始部分定义，它会覆盖浏览器默认的样式，例如：
-- -------------------- ---- ------- -- -- ---- -- -- ---- - ------- -- -------- -- - -- ---------------- -- - - ------ -------- ---------------- ----- ------- -------- - -- ------- -- --- -- - ----------- ----- ------- -- -------- -- -
这样做可以帮助我们统一不同浏览器之间的样式表现，确保我们的网页在各种浏览器上显示一致。
CSS Reset 带来的问题
尽管 CSS Reset 带来的样式重置，使我们的样式能够更加统一，但它也会带来一些问题，其中之一就是字体样式问题。
CSS Reset 通常会将字体、字号、颜色等其他样式都设置为默认值。然而，这样的设置可能与我们所希望的样式不一致，导致网页的字体样式出现问题。
例如，在 CSS Reset 中，所有的字体都会被设置为 font-family: inherit;。这会导致子元素的字体继承父元素的字体，而一旦我们的 CSS 设置了新的字体样式，字体继承关系就会被打破。
-- -------------------- ---- ------- -- --- ----- -- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- ---------- ----- ------------ -------- --------------- --------- - -- ------------------- -- ---- - ------------ ------ ----------- -
在这种情况下，如果我们设置了一个子元素的字体样式，它将与父元素的字体样式不同：
<div> <p>这是一个段落</p> <p style="font-family: Georgia, serif;">这是另一个段落</p> </div>
在这里，第二个段落的字体将不会被继承。
解决方案
为了解决此问题，我们可以使用一种较为保守的 CSS Reset，它只会重置最需要的浏览器默认样式，而不会对字体样式造成影响。例如：
-- -------------------- ---- ------- -- -------------- -- ----- ----- ---- ----- --- --- --- --- --- --- -- -- --- ------- ---- --- --- --- ------ --- --- ------ ------ ------ -------- ----- --------- -------- ------ ------ ------- --------- ------ - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- -
这种较为保守的 CSS Reset 仍然会覆盖某些浏览器默认的样式，但不会覆盖字体样式。这样，我们就可以在网页中定义我们自己的字体样式，而减少 CSS Reset 带来的问题。
此外，可以使用 normalize.css 这样的第三方库，它可以在不破坏可预测浏览器行为的前提下，提供一致的外观。这个库是一个支持所有浏览器的 CSS 和 HTML 规范化，使得样式表的工作起来更加一致和可预测。
总结
CSS Reset 可以帮助我们统一不同浏览器之间的样式表现，确保我们的网页在各种浏览器上显示一致。然而，它也可能会带来一些问题，尤其是字体样式问题。解决这个问题的方法是使用一种较保守的 CSS Reset，只覆盖最需要的浏览器默认样式，而不会覆盖字体样式。同时，使用第三方库，例如 normalize.css，可以在不破坏可预测浏览器行为的前提下，提供一致的外观。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a4bb0a48841e989411d16c