GB码和BIG5码的互换技术( 中文字符在CSS中的使用，合理设置字符集，彻底搞懂字符集问题)

本文重点讲解CSS文件中的字符集问题，同时展示了中文字体的英文名称应该如何使用。本文属于前端开发的中级教程，适合于有一定的CSS开发经验的学习者。

现在页面的CSS代码多采用CSS文件的方式链接使用，这主要是秉承了“标记”与“表象”相分离的设计原则，让CSS代码在一个独立的文件中呈现。

在CSS文件中同样会出现一定的中文，例如：中文注释，中文字体名称。这些中文内容，浏览器能够自动识别而不至于解释为乱码吗？

W3C为CSS文件准备了一个设置文件字符集的命令，该命令的书写格式如下：

CSS文件使用 @charset “utf-8”; 命令设置文件字符集

该句命令的使用有如下的规定：

上述代码中@和charset之间不得有空格。

所指定的字符集名称必须用双引号引住。

命令末尾必须带有一个分号。

该句命令在一个CSS文件中只允许出现一次。

该句命令必须书写在CSS文件的第一行，前面不得有任何内容，也不得有任何注释。

该句是为CSS文件中出现的非ASCII码字符所设定的。为了让非ASCII字符不出现乱码或者字体中文名称起作用，必须设置该句。当然现在的许多编辑器在这方面处理的都比较好，设计人员无需书写该句，也能正确的实现非ASCII字符。

一、Sublime 中如何修改CSS字符集：

在编辑器Sublime 3中，如果要修改字符集，单纯的在 @charset 命令中改变字符集的名称是不行的。

首先，默认情况下，Sublime 3认定的字符集为 utf-8，从下图中指定的位置可以看出。

Sublime 3 中指定文件当前字符集的位置

图中箭头指向的位置表明当前的字符集设置为“utf-8”，图中第1句指定的字符集命令也是“utf-8”。这样，代码第4行的中文字体名称“汉仪综艺体简”就可以在页面中生效了。

如果想使用“gb2312”或者“big5码”字符集，则需要更改Sublime 3中指定的字符集。方法是在“文件”菜单下选择“设置文件编码”命令，从中找到想使用字符集，例如“GBK”，就表示“gb2312”字符集。

Sublime 3 中更改文件编码

如果没有对Sublime 3进行文件编码设置，只是更改了 @charset 命令中指定的字符集名，则在代码中使用的中文字体名称是不会生效的。

箭头指定的两个位置必须是一致的

二、中文字体的英文名称表示法：

如果能让中文字体的名称不再使用中文书写，而是使用英文书写，那么CSS文件中几乎就很少再会有非ASCII字符的出现了。所以，每一个中文字体都具备一个英文名称表示法。大家应该熟悉一些常用字体的英文名称表示法，这样就不用在CSS文件顶部注明 @charset 命令了。

下面，小海老师就为大家搜集了一些常用中文字体的英文表示法，希望大家在学习过程中注意知识的积累。

宋体：SimSun

仿宋：FangSong

黑体：SimHei

楷体：KaiTi

幼圆：YouYuan

隶书：LiSu

微软雅黑：Microsoft YaHei

华文细黑：STXihei

华文中宋：STZhongsong

华文仿宋：STFangsong

花纹新魏：STXinwei

华文行楷：STXingkai

华文彩云：STCaiyun

华文隶书：STLiti

如果您的电脑是 Apple Mac OS，还可能会用到下列字体：

丽宋Pro：LiSong Pro Light

丽黑Pro：LiHei Pro Medium

苹果丽中黑：Apple LiGothic Medium

苹果丽细宋：Apple LiSung Light

标楷体：BiauKai

将上述中文字体的英文名称用在 font-family 属性中指定字体，就可以不用在书写 @charset 命令了。文章预告

下一次小海老师会为大家讲解CSS中有关文本段落的属性，结合前面HTML的内容，可以对页面中的段落进行更为细致的调整。千万不要错过哦。小海声明