在进行前端开发时，我们经常会使用 CSS Reset 来统一浏览器的默认样式，以便更好地控制页面的布局和样式。然而，使用 CSS Reset 后，我们可能会发现一些文字样式被重置了，比如字体、字号、行高等，这会影响页面的可读性和美观度。本文将介绍如何解决这个问题，让我们的页面既能使用 CSS Reset，又能保留自己的文字样式。
问题分析
在使用 CSS Reset 后，我们的页面中的文字样式被重置了，这是因为 CSS Reset 会将所有元素的样式都重置成一些基础样式，比如字体大小为 16px，行高为 1.2 等。这些基础样式会覆盖我们自己定义的样式，导致页面的文字样式被重置。
解决方案
要解决这个问题，我们需要在使用 CSS Reset 的同时，保留我们自己定义的文字样式。具体的做法是，在 CSS Reset 之后，重新定义文字样式。
重新定义文字样式
我们可以在 CSS Reset 之后，重新定义文字样式，比如字体、字号、行高等。这样，我们自己定义的文字样式就会覆盖 CSS Reset 的基础样式，保留了我们自己的文字样式。
-- -------------------- ---- ------- -- --- ----- -- - - ------- -- -------- -- ----------- ----------- - -- -------- -- ---- - ------------ ------ ---------- ----------- ---------- ----- ------------ ---- -
使用 normalize.css
另外一个解决方案是使用 normalize.css。normalize.css 是一种比较轻量级的 CSS Reset 工具，它不会将所有元素的样式都重置成基础样式，而是只重置一些常见的样式，比如表格、表单、列表等。同时，normalize.css 也提供了一些修复浏览器兼容性问题的样式。
使用 normalize.css 的好处是，它不会影响我们自己定义的文字样式，因为它只重置了一些常见的样式，而不是所有元素的样式。我们可以在使用 normalize.css 后，继续定义自己的文字样式。
-- -------------------- ---- -------
---- -- ------------- ---
----- ---------------- --------------------------------------------------------------------------------
---- --------- ---
-------
---- -
------------ ------ ---------- -----------
---------- -----
------------ ----
-
--------总结
在使用 CSS Reset 的同时保留自己的文字样式，可以让我们更好地控制页面的布局和样式，提高页面的可读性和美观度。我们可以通过重新定义文字样式或使用 normalize.css 来解决文字样式被重置的问题。无论哪种方法，都需要注意保留自己的文字样式，避免影响页面的可读性和美观度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6568d86ad2f5e1655d17ac69