@charset

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

概述

@charset CSS @规则指定样式表中使用的字符编码。它必须是样式表中的第一个元素,而前面不得有任何字符。因为它不是一个嵌套语句,所以不能在@规则条件组中使用。如果有多个 @charset @ 规则被声明,只有第一个会被使用,而且不能在 HTML 元素或 HTML 页面的字符集相关 <style> 元素内的样式属性内使用。

@ 规则在某些 CSS 属性中使用非 ASCII 字符时非常有用,例如 content

在样式表中有多种方法去声明字符编码,浏览器会按照以下顺序尝试下边的方法(一旦找到就停止并得出结果):

  1. 文件的开头的 Unicode byte-order 字符值。
  2. 由 Content-Type:HTTP header 中的 charset 属性给出的值或用于提供样式表的协议中的等效值。
  3. CSS @ 规则 @charset
  4. 使用参考文档定义的字符编码:<link> 元素的 charset 属性。该方法在 HTML5 标准中已废除,无法使用。
  5. 假设文档是 UTF-8。

语法

css
@charset "UTF-8";
@charset "iso-8859-15";

语法格式

css
@charset "<charset>";
charset

它是一个 <string> 表示字符编码被使用。它必须是在被 IANA-registry 声明过的 web-safe 字符编码中的一个,还必须被双引号包围,遵循一个空格字符 (U+0020),并且立即以分号结束。如果有多个相关的编码名字,只有被标记为 preferred 的那个才会被使用。

例子

css
@charset "UTF-8";
@charset "utf-8"; /*大小写不敏感*/
/* 设置 css 的编码格式为 Unicode UTF-8 */
css
@charset 'iso-8859-15'; /* 无效的,使用了错误的引号 */
@charset  "UTF-8"; /* 无效的,多于一个空格 */
 @charset "UTF-8"; /* 无效的,在 at-rule 之前多了一个空格 */
@charset UTF-8; /* 无效的,缺少单引号 ' 或双引号 ",charset 不是一个有效的 CSS <string> */

规范

Specification
CSS Syntax Module Level 3
# at-ruledef-charset

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
@charset

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

参见