CSS字符编码引起乱码_html/css_WEB-ITnose

乱码引起的css失效原理：
由于一个中文是两个字符组成，在编码不一致的情况下会引发字符的“重新”组合，（半个汉字的编码字符与后面的字符组合生成新的“文字”）引发原本的结束符合“变异”，从而导致找不到结束符号，使得后面的css就会失效。

小技巧1：css中出现的乱码都是由于css字符编码与页面的字符编码不一致所引起的，因此最直接的方法就是使字符编码一致。将css指定编码类型，例：@charset "utf-8";（指定编码类型为utf-8,须写在css文件第一行）
小技巧2：css中出现的乱码都是由于中文字符引发的，因此只要不写中文，就不会产生“乱码引起css失效”的这种情况

撇开以上两种小技巧，我们在刨下根，就会发现“乱码”通常来自以下两种情况。
一、中文注释引起乱码
css注释为：/*某些注释*/
乱码实例：
    正常代码：/*三汉字*/
    引起的乱码：/*涓夋眽瀛?/
    浏览器环境：ie6
    html：gb2312
    css：无编码指定，实际解析为utf-8

上例为乱码阻断了css注释的结束符，使得后面的css内容都在注释范围内，从而导致css的失效
防范措施：加强注释
示例：
    正常代码：/****三汉字****/
    引起的乱码：/****涓夋眽瀛?***/
这种增强版的注释可以防止乱码把注释的最终结束符“变异”，可以在编写css时，提前防范

二、中文字体引起乱码
css指定字体：font-family:"中文字体";
乱码实例：
    正常代码：font-family:"黑体"
    引起的乱码：font-family:"榛戜綋"
    浏览器环境：ie6
    html：gb2312
    css：无编码指定，实际解析为utf-8

上例为乱码使得字体名称变成乱码，导致指定字体失效。这个问题的后果似乎不是很严重，但实际情况中，确实存在一种乱码把后面的引号“变异”的情况，使得后面的css都在字体的引号中，从而后面的css全部失效。
防范措施：采用字体的别名（所以浏览器都可识别）
示例：
    正常代码：font-family:"simhei" （font-family:"ed1f53" ）
    浏览器解析：font-family:"simhei" （font-family:"黑体"，ie6仍为font-family:"ed1f53" 但字体解析显示为黑体）
使用别名，绕开了使用中文，从而避免乱码

css中文字体（font-family）列表

windows的一些：

黑体：simhei

宋体：simsun

新宋体：nsimsun

仿宋：fangsong

楷体：kaiti

仿宋_gb2312：fangsong_gb2312

楷体_gb2312：kaiti_gb2312

微软雅黑体：microsoft yahei

装office会生出来的一些：

隶书：lisu

幼圆：youyuan

华文细黑：stxihei

华文楷体：stkaiti

华文宋体：stsong

华文中宋：stzhongsong

华文仿宋：stfangsong

方正舒体：fzshuti

方正姚体：fzyaoti

华文彩云：stcaiyun

华文琥珀：sthupo

华文隶书：stliti

华文行楷：stxingkai

华文新魏：stxinwei

补充：

使用楷体_gb2312、仿宋_gb2312后，在 windows 7/vista/2008 中可能不再显示为对应的字体。

这是因为 windows 7/vista/2008 中有楷体、仿宋，默认情况下没有楷体_gb2312、仿宋_gb2312，字体名称相差“_gb2312”。

-----------------------------------------------------------

中文字体在 css 中的写法

针对字体的写法，觉得需要说明一下：

body,

button, input, select, textarea {

font: 12px/1 tahoma, helvetica, arial, "b8bf53", sans-serif;

}

“b8bf53″ 就是 “宋体”。用 unicode 表示，不用 simsun, 是因为 firefox 的某些版本和 opera 不支持 simsun 的写法。普及点字体知识：

字体的别名

系统中的一个字体是允许有多种别名形式存在的。比如，在 windows 下，georgia 也可以用 georgia ms 来命名，它们其实是同一种字体。宋体的正式名称是 simsun，而“宋体”只是它的别名。

按照规范，浏览器应该能自动识别字体的别名，并映射到正确的字体文件。比如，font-famliy: simsun和font-family: "宋体"应该具有等价的效果。可惜，似乎很多浏览器都不能正确执行前一条定义……

因此，考虑浏览器兼容，我们需要用“宋体”，转码成 unicode 形式则可以保证在任何编码下都无问题。

-----------------------------------------------------------

     为了方便需要的朋友快速使用，下表中列出了一些常用中文字体的unicode编码：
     黑体 ed1f53
     宋体 b8bf53
     楷体 77f53
     微软雅黑 faef6fc5ed1

文心快码

文心快码（Comate）是百度推出的一款AI辅助编程工具

35

查看详情