• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • @charset

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

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

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

    示例

    @charset "utf-8";
    @charset "iso-8859-15";
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持@charset

    语法

    @charset"charset"
    • charset:它是一个字符串,表示被使用的字符编码。它必须是在被IANA-registry声明过的 web-safe 字符编码中的一个。
    • 字符串编码还必须被双引号("")包围。
    • @charset之后只能有一个空格字符(U+0020)。
    • 规则之后必须以分号结束(;)。
    • 如果有多个相关的编码名字,只有被标记为preferred的那个才会被使用。

    例子

    @charset "utf-8";
    @charset "utf-8"; /*大小写不敏感*/  
    
    /* 设置css的编码格式为unicode utf-8 */
    @charset 'iso-8859-15'; /* 无效的, 使用了错误的引号 */
    @charset 'utf-8';       /* 无效的, 使用了错误的引号 */
    @charset  "utf-8";      /* 无效的, 多于一个空格 */
    @charset "utf-8";      /* 无效的, 在at-rule之前多了一个空格 */
    @charset utf-8;         /* 无效的,因为没有引号,utf-8 就不是一个字符串数据*/
    

    上篇:@media

    下篇:@import