1. 什么是 CSS @charset？
CSS @charset 是 CSS 标准中定义的一组规则，用于指定 CSS 文件的字符编码。在 CSS 文件头部使用 @charset 规则可以帮助浏览器正确解析文件中特殊字符、特定语言以及使用非 ASCII 字符集的文件。@charset 规则需要在文件中的任何其他规则之前声明。
@charset "UTF-8";
/* 文件中的其他 CSS 规则 */
上面代码中，通过 @charset "UTF-8"; 声明了当前 CSS 文件使用的字符编码为 UTF-8。
1.1 支持 CSS @charset 的浏览器
几乎所有主流浏览器现在都支持 CSS @charset 规则，可以正确解析具有不同字符编码的 CSS 文件。
1.2 编码格式对浏览器渲染的影响
如果 CSS 文件使用不同于 HTML 文件的编码格式，那么在浏览器渲染页面时可能会出现乱码和显示错误的情况。因此，使用 @charset 规则来指定 CSS 文件的编码格式是非常重要的。
2. 如何使用 CSS @charset 规则
在 CSS 文件的开头，可以使用 @charset 规则来声明 CSS 文件的字符编码格式。具体使用方式如下：
@charset "UTF-8";
/* 文件中的其他 CSS 规则 */
用于声明 CSS 文件的字符编码的字符串双引号中，可以填写任何有效的字符编码格式。注意，CSS 文件的编码格式必须和文件存储编码格式一致。
如果同一个 HTML 页面中使用多个 CSS 文件，每个 CSS 文件都可以使用自己的 @charset 规则来声明编码格式。
/* 在第一个 CSS 文件中声明编码格式 */
@charset "UTF-8";
/* 文件中的其他 CSS 规则 */
/* 在第二个 CSS 文件中声明编码格式 */
@charset "GB2312";
/* 文件中的其他 CSS 规则 */
3. 使用 CSS @charset 规则的注意事项
3.1 @charset 声明必须在 CSS 规则之前
@charset 规则必须在 CSS 文件中的任何其他规则之前声明，并且必须是文件中的第一行。
@charset "UTF-8";
/* 文件中的其他 CSS 规则 */
注意，BOM (Byte Order Mark) 是一个字节序标志，在 UTF-8 编码格式中用于区分字节顺序。如果 CSS 文件是用 UTF-8 编码格式保存的，那么应该确保该文件不包含 BOM 字节序标志。否则，@charset 声明可能被识别为样式规则而不是编码声明，因为 BOM 字节序标志在 CSS 语法中被视为无效字符。
3.2 只能在 CSS 文件中使用一次 @charset 声明
每个 CSS 文件中只能使用一个 @charset 声明，用于声明文件的字符编码格式，不能在文件的其他位置多次使用。
/* 正确的用法 */
@charset "UTF-8";
/* 文件中的其他 CSS 规则 */
/* 错误的用法 */
@charset "UTF-8";
/* 文件中的其他 CSS 规则 */
@charset "UTF-8";
/* 文件中的其他 CSS 规则 */
3.3 可以省略 UTF-8 编码格式的声明
对于使用 UTF-8 编码格式保存的 CSS 文件，可以将 @charset "UTF-8"; 声明省略。因为 UTF-8 编码被认为是 CSS 的默认编码格式。
但是，如果在文件中使用了除 ASCII 以外的非法字符或字符集，仍然需要使用 @charset 规则来声明文件的编码格式。
/* CSS 文件使用了非 ASCII 字符，需要声明编码格式 */
@charset "UTF-8";
/* 文件中的其他 CSS 规则 */
4. 使用示例
4.1 使用 GB2312 编码格式
以下是使用 GB2312 编码格式保存的 CSS 文件示例：
@charset "GB2312";
/* CSS 文件中其他规则 */
上面代码中，使用了 @charset "GB2312" 声明该文件使用的字符编码格式为 GB2312。
4.2 使用 UTF-8 编码格式
以下是使用 UTF-8 编码格式保存的 CSS 文件示例：
@charset "UTF-8";
/* CSS 文件中的其他规则 */
上面代码中，使用了 @charset "UTF-8" 声明该文件使用的字符编码格式为 UTF-8。
4.3 使用 ASCII 和非 ASCII 字符
以下是使用非 ASCII 字符的 CSS 文件示例，需要使用 @charset 规则声明编码格式：
@charset "UTF-8";
/* CSS 文件中的其他规则 */
h1:before {
content: "?";
}
上面代码中，使用了 @charset "UTF-8" 声明该文件使用的字符编码格式为 UTF-8，并在 ::before 伪元素中使用了一个非 ASCII 字符，需要使用 @charset 规则。
总结
@charset 规则是 CSS 语言中非常重要的一条规则，用于帮助浏览器正确解析使用不同字符编码格式的 CSS 文件。在使用 CSS 文件时，我们应该始终遵循正确的编码格式，并根据需要在文件头部添加 @charset 声明，以便浏览器能够正确地解析文件内容。