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

Question

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

@charset "UTF-8";

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

另外，如果我在我的“head”元素中包含这个元标记，那么是否可以消除在我的CSS文件中也存在它的需要？

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

Answer 1

这在没有按HTTP标头或其他元数据告知编码的上下文中很有用，例如：本地文件系统。

想象一下以下样式表：

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

如果阅读器将文件保存到硬盘驱动器而您省略了@charset规则，则大多数浏览器都会以操作系统的语言环境编码来读取它，例如： Windows-1252，并插入 - 而不是箭头。

不幸的是，你不能依赖这种机制，因为支持相当......很少见。 请记住，在网络上，HTTP标头将始终覆盖@charset规则。

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

1. HTTP Charset标题。
2. Byte Order Mark。
3. 第一个@charset规则。
4. UTF-8。

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

推荐阅读

• Russ Rolfe：Declaring character encodings in CSS
• IANA：Official names for character sets - 不允许使用其他名称;如果为同一编码注册了多个名称，请使用@charset的首选名称。
• MDN：@charset。有一张支持表。我不相信这一点。 ：）
来自CSS WG的
• Test case。

Answer 2

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

在元标记中使用它很好，但仅适用于包含该元标记的网页。

在CSS w3c spec处了解CSS文件的字符集解析规则。

Answer 3

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

Answer 4

如果你要放一个＆lt; meta＆gt;在你的css文件中标记，你做错了什么。 ＆lt; meta＆gt; tag属于你的 html 文件，告诉浏览器html是如何编码的，它没有说明css是一个单独的文件。你可以想象你的html和css有完全不同的编码，虽然我无法想象这会是一个好主意。