为什么指定@charset "UTF-8"; 在你的 CSS 文件中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2526033/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why specify @charset "UTF-8"; in your CSS file?
提问by rsturim
I've been seeing this instruction as the very first line of numerous CSS files that have been turned over to me:
我一直将这条指令视为已移交给我的众多 CSS 文件的第一行：
@charset "UTF-8";
What does it do, and is this at-rule necessary?
它有什么作用，这个规则是否必要？
Also, if I include this meta tag in my "head" element, would that eliminate the need to have it also present within my CSS files?
另外，如果我在我的“head”元素中包含这个元标记，是否不需要在我的 CSS 文件中也存在它？
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
采纳答案by Oded
It tells the browser to read the css file as UTF-8. This is handy if your CSS contains unicode characters and not only ASCII.
它告诉浏览器以 UTF-8 格式读取 css 文件。如果您的 CSS 包含 unicode 字符而不仅仅是 ASCII，这会很方便。
Using it in the meta tag is fine, but only for pages that include that meta tag.
在元标记中使用它很好，但仅适用于包含该元标记的页面。
Read about the rules for character set resolution of CSS files at the w3c specfor CSS 2.
在CSS 2的w3c 规范中阅读 CSS 文件的字符集解析规则。
回答by fuxia
This is useful in contexts where the encoding is not told per HTTP header or other meta data, e.g. the local file system.
这在不按 HTTP 标头或其他元数据（例如本地文件系统）告知编码的上下文中很有用。
Imagine the following stylesheet:
想象一下以下样式表：
[rel="external"]::after
{
content: ' ↗';
}
If a reader saves the file to a hard drive and you omit the @charsetrule, most browsers will read it in the OS' locale encoding, e.g. Windows-1252, and insert a?— instead of an arrow.
如果阅读器将文件保存到硬盘驱动器而您忽略了该@charset规则，则大多数浏览器会以操作系统的语言环境编码（例如 Windows-1252）读取它，并插入一个?— 而不是箭头。
Unfortunately, you cannot rely on this mechanism as the support is rather … rare.
And remember that on the net an HTTP header will always override the @charsetrule.
不幸的是，您不能依赖这种机制，因为这种支持相当……罕见。请记住，在网络上，HTTP 标头将始终覆盖该@charset规则。
The correct rules to determine the character set of a stylesheetare in order of priority:
确定样式表字符集的正确规则按优先级排序：
- HTTP Charset header.
- Byte Order Mark.
- The first
@charsetrule. - UTF-8.
- HTTP 字符集标头。
- 字节顺序标记。
- 第一条
@charset规则。 - UTF-8。
The last rule is the weakest, it willfail in some browsers.
The charsetattribute in <link rel='stylesheet' charset='utf-8'>is obsolete in HTML 5.
Watch out for conflict between the different declarations. They are not easy to debug.
最后一条规则是最弱的，它会在某些浏览器中失败。
在charset中属性<link rel='stylesheet' charset='utf-8'>是过时的HTML 5。
注意不同声明之间的冲突。它们不容易调试。
Recommended reading
推荐阅读
- Russ Rolfe: Declaring character encodings in CSS
- IANA: Official names for character sets– other names are not allowed; use the preferred namefor
@charsetif more than one name is registered for the same encoding. - MDN:
@charset. There is a support table. I do not trust this. :) - Test casefrom the CSS WG.
- Russ Rolfe：在 CSS 中声明字符编码
- IANA：字符集的官方名称——不允许使用其他名称；如果为同一编码注册了多个名称，
@charset则使用首选名称。 - MDN：
@charset。有一个支撑台。我不相信这个。:) - 来自 CSS WG 的测试用例。
回答by tony
One reason to always include a character set specification on every page containing text is to avoid cross site scripting vulnerabilities. In most cases the UTF-8 character set is the best choice for text, including HTML pages.
在每个包含文本的页面上始终包含字符集规范的一个原因是避免跨站点脚本漏洞。在大多数情况下，UTF-8 字符集是文本的最佳选择，包括 HTML 页面。
回答by WJS
If you're putting a <meta> tag in your css files, you're doing something wrong. The <meta> tag belongs in your htmlfiles, and tells the browser how the html is encoded, it doesn't say anything about the css, which is a separate file. You could conceivably have completely different encodings for your html and css, although I can't imagine this would be a good idea.
如果您在 css 文件中放置了 <meta> 标签，那么您就做错了。<meta> 标签属于你的html文件，它告诉浏览器 html 是如何编码的，它没有说明 css，它是一个单独的文件。你可以想象你的 html 和 css 有完全不同的编码，尽管我无法想象这会是一个好主意。
