使用 CSS Reset 之后页面出现乱码？-JavaScript中文网-JavaScript教程资源分享门户

众所周知，在前端开发中，CSS Reset 是一个常用的技巧，它用来消除浏览器默认样式引起的跨浏览器兼容问题，让不同浏览器之间的页面显示更加一致。但是在实际使用中，我们可能会遇到一个问题，就是在使用 CSS Reset 之后，页面出现了乱码，甚至文字全部变成了方框。那么这到底是什么原因造成的呢？

原因分析

造成页面乱码的原因很简单，就是因为重置了浏览器的默认字体和编码。在我们使用 CSS Reset 的时候，很多一开始被忽视的细节都变得非常重要，其中一个就是字体的设置。在大多数 CSS Reset 中，都会重置浏览器默认字体为"Helvetica Neue"或"Simsun"，但是它们之间存在着编码的差异，当浏览器加载网页时无法识别编码，从而导致了乱码的出现。

解决方法

如果您遇到了这种情况，以下是两种解决方法：

1.手动设置字体编码

事实上，可以手动设置字体编码来解决这个问题。通过 CSS 中的 @charset 属性，我们可以告诉浏览器我们使用的是什么编码。例如：

@charset "UTF-8";

这样，浏览器就会以 UTF-8 编码解析该页面，并正确显示内容。

2.使用 Normalize.css

上面的方法虽然可行，但是比较麻烦。更好的方式是使用 Normalize.css，它是一份较为完整的 CSS Reset 文件，能够消除大部分的跨浏览器兼容问题，并且不会出现乱码问题。与传统 CSS Reset 不同的是，Normalize.css 遵循了更多 Web 标准，并以最小化的样式为准，同时提供了一个良好的默认字体设置。

<head>
  <link rel="stylesheet" href="normalize.css">
  <style>
    /* 这里可以写您自己的样式 */
  </style>
</head>

在使用 Normalize.css 之后，我们还可以编写自己的 CSS 样式，以完成页面的开发。

总结

不出意外，这个问题应该不会再有了吧！在这个问题上，我们需要注意一些细节，比如浏览器默认字体和编码等。如果您遇到了这个问题，欢迎尝试两种解决方法，使您的网页更加美好。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6491188f48841e9894f1db78