为什么要指定@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. 字节顺序标记.
3. 第一条@charset规则.
4. UTF-8.

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

推荐阅读

• Russ Rolfe:在CSS中声明字符编码
• IANA:字符集的正式名称 - 不允许使用其他名称; 如果为同一编码注册了多个名称,请使用首选名称@charset.
• MDN : @charset. 有一张支持表.我不相信这一点.:)
• 来自CSS WG的测试用例.

Answer 2

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

在元标记中使用它很好,但仅适用于包含该元标记的页面.

在CSS 2 的w3c规范中阅读CSS文件的字符集分辨率规则.