为什么指定@charset“UTF-8”; 在你的CSS文件？
我已经看到这个指令是许多CSS文件的第一行，这些文件已经交给我了：
@charset "UTF-8"; 它是做什么的，这是必要的吗？
另外，如果我把这个meta标签包含在我的“head”元素中，那么这样做是否可以避免在我的CSS文件中出现？
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
它告诉浏览器以UTF-8读取css文件。 如果您的CSS包含unicode字符而不仅仅是ASCII，这很方便。
在元标记中使用它很好，但只适用于包含元标记的页面。
阅读关于CSS2的w3c规范的CSS文件字符集分辨率的规则。
这在编码不是通过HTTP头或其他元数据（例如本地文件系统）被告知的上下文中是有用的。
想象下面的样式表：
[rel="external"]::after { content: ' ↗'; }
如果阅读器将文件保存到硬盘驱动器，并且省略@charset规则，则大多数浏览器将在操作系统的本地编码（例如Windows-1252）中读取它，并插入→而不是箭头。
不幸的是，你不能依靠这种机制，因为支持是相当罕见的。 请记住，在networking上，HTTP标头将始终覆盖@charset规则。
确定样式表字符集的正确规则按优先顺序排列：
- HTTP字符集标题。
- 字节顺序标记。
- 第一个
@charset规则。 - UTF-8。
最后的规则是最弱的，在一些浏览器中会失败。
<link rel='stylesheet' charset='utf-8'>的charset属性在HTML 5中已经过时。
注意不同声明之间的冲突。 他们不容易debugging。
推荐阅读
- Russ Rolfe： 在CSS中声明字符编码
- IANA： 字符集的官方名称 – 其他名称是不允许的; 如果为同一编码注册了多个名称 ，请使用
@charset的首选名称 。 - MDN：
@charset。 有一个支持表。 我不相信这个 🙂 - 来自CSS工作组的testing用例 。
在每个包含文本的页面上始终包含字符集规范的一个原因是为了避免跨站点脚本漏洞。 在大多数情况下，UTF-8字符集是包括HTML页面在内的文本的最佳select。
如果你在你的css文件中join了一个<meta>标签，那么你做错了什么。 <meta>标签属于你的html文件，并告诉浏览器html是如何编码的，它没有提到css，它是一个单独的文件。 你可以想象有完全不同的编码为您的HTML和CSS，但我无法想象这是一个好主意。
