为什么要指定@charset“ UTF-8”；在您的CSS文件中？

我一直将这条指令视为移交给我的众多CSS文件的第一行：

@charset "UTF-8";

它是做什么的，这是必要的规则吗？

另外，如果我在“ head”元素中包含此meta标签，是否就不需要在CSS文件中也包含它了？

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

它告诉浏览器以UTF-8格式读取css文件。如果您的CSS包含unicode字符而不仅是ASCII，那么这很方便。

在meta标签中使用它很好，但仅适用于包含该meta标签的页面。

在CSS 2 的w3c规范中了解CSS 文件的字符集解析规则。

这在不按HTTP标头或其他元数据（例如本地文件系统）告知编码的情况下很有用。

想象以下样式表：

[rel="external"]::after
{
    content: ' ↗';
}

如果读者将文件保存到硬盘驱动器上，而您忽略了该@charset规则，则大多数浏览器将以OS的语言环境编码（例如Windows-1252）读取该文件，并插入-而不是箭头。

不幸的是，您不能依赖此机制，因为这种支持非常罕见。请记住，在网络上，HTTP标头将始终覆盖@charset规则。

确定样式表字符集的正确规则按优先级顺序排列：

1. HTTP字符集标头。
2. 字节顺序标记。
3. 第一条@charset规则。
4. UTF-8。

最后一条规则是最弱的，它会在某些浏览器中失败。HTML 5中的中
的charset属性<link rel='stylesheet' charset='utf-8'>已过时。
注意不同声明之间的冲突。它们不容易调试。

推荐读物

• 拉斯·罗尔夫（Russ Rolfe）： 在CSS中声明字符编码
• IANA：字符集的正式名称 –不允许使用其他名称；使用首选名称@charset如果为同一编码注册了多个，请。
• MDN： @charset。有一个支持表。我不相信这一点。:)
• 来自CSS WG的测试用例。

在每个包含文本的页面上始终包含字符集规范的原因之一是避免跨站点脚本漏洞。在大多数情况下，UTF-8字符集是文本（包括HTML页面）的最佳选择。

如果要在CSS文件中放入<meta>标记，则说明您做错了什么。<meta>标记属于您的html文件，它告诉浏览器html的编码方式，它没有说明css，它是一个单独的文件。可以想象，您的html和css可能会有完全不同的编码，尽管我无法想象这是一个好主意。