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

我一直把这条指令看作众多 CSS 文件中的第一行，这些文件已经转交给了我:

@charset "UTF-8";

它是做什么的? 这是必要的吗？

另外，如果我在“ head”元素中包含这个 meta 标记，是否就不需要在 CSS 文件中显示它了？

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
135848 次浏览
小开
最佳答案

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

在 meta 标记中使用它是可以的，但是只适用于包含该 meta 标记的页面。

阅读有关 CSS 文件的字符集分辨率的规则，位于 CSS 2的 W3c 规格。

小开

这在 HTTP 头或其他元数据(例如本地文件系统)没有告知编码的上下文中非常有用。

设想下面的样式表:

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

如果读取器将文件保存到硬盘驱动器中，而您忽略了 @charset规则，大多数浏览器将以操作系统的区域编码(例如 Windows-1252)读取该文件，并插入以下代替箭头。

不幸的是，你不能依靠这种机制，因为支持是相当... 罕见的。 请记住，在网络上，HTTP 头总是会覆盖 @charset规则。

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

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

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

推荐阅读

小开

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

小开

如果你在你的 css 文件中放置了一个 < meta > 标签，那么你就做错了。标签 < meta > 属于您的 Html文件，它告诉浏览器 html 是如何编码的，它没有说任何关于 css 的内容，css 是一个单独的文件。你可以想象你的 html 和 css 有完全不同的编码，虽然我不认为这是一个好主意。


提交答案