`
dowhathowtodo
  • 浏览: 781565 次
文章分类
社区版块
存档分类
最新评论

CSS字符编码引起乱码

阅读更多


乱码引起的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:"\9ed1\4f53" )
浏览器解析:font-family:"SimHei" (font-family:"黑体",IE6仍为font-family:"\9ed1\4f53" 但字体解析显示为黑体)
使用别名,绕开了使用中文,从而避免乱码

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, "\5b8b\4f53", sans-serif;

}

“\5b8b\4f53″ 就是 “宋体”。用 unicode 表示,不用 SimSun, 是因为 Firefox 的某些版本和 Opera 不支持 SimSun 的写法。普及点字体知识:

字体的别名

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

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

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

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

为了方便需要的朋友快速使用,下表中列出了一些常用中文字体的Unicode编码:
黑体 \9ED1\4F53
宋体 \5B8B\4F53
楷体 \6977\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1


分享到:
评论

相关推荐

    CSS字符编码引起乱码的快速解决方法

    下面小编就为大家带来一篇CSS字符编码引起乱码的快速解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    day019-io笔记和代码.rar

    OutputStreamWriter(OutputStream out) 创建一个使用默认字符编码的OutputStreamWriter。 * 2. OutputStreamWriter(OutputStream out, String charsetName) 创建一个使用指定字符集的...

    GamVan Club 社区 v3.0

    1.今晚在线社区独有的双风格分桢形式 2.社区最多可进行3级分类,大部分论坛应该够用了。...6.UTF-8编码,解决贴繁体或国外字符乱码问题。 7.CSS控制整个社区颜色及风格。 8.版面多种可选属性,让社区变得更灵活。

    GamVan Club v3.0 Beta3(含源文件)

    特色: 1.今晚在线社区独有的双风格分桢形式 2.社区最多可进行3级分类,大部分论坛应该...6.UTF-8编码,解决贴繁体或国外字符乱码问题。 7.CSS控制整个社区颜色及风格。 8.版面多种可选属性,让社区变得更灵活。

    《WordPress 宝典》[PDF]

    不过,由于使用的编码原因,中文字符截断时会出现乱码。不过桑葚网友制作的中文 WordPress 工具箱插件可以解决这个问题。  WordPress 可以说是世界上目前最先进的 weblog 程序。目前开发的程序大多都是根据它仿造的...

    PHP开发实战1200例源码

    实例112 解决用substr()函数对中文字符串截取时出现乱码的问题 143 实例113 字符串与HTML标记相互转换 144 实例114 运用PHP 5.0新型字符串输出XML数据 145 实例115 判断字符串中是否存在指定子串 146 2.9 正则...

    如何快速拥有新云网站内容管理系统WAP程序

     QuickWAP之所以采用UTF-8而非GB2312则是因为UTF-8可以看作是大字符集,它包含了大部分文字的编码。使用UTF-8的最大好处是其他地区的用户(如香港台湾)和国外用户无需安装简体中文支持就能正常观看你的文字而不会...

    SynWrite(代码编辑器) v6.38.2720.zip

    5.编码帮助:自动完成,源代码模板,SmartTagTabbing功能,SyncEdit功能编辑相同标识符,支持HTML CSS XSL的高速编码引擎,彩色预览 颜色选择器 6.剪贴板历史查看 7.搜索替换和正则表达式 8.搜索并替换多个文档...

    Notepad2.1.19.0_cn.exe

    注:对个别UTF-8编码的中文显示为乱码的解决办法:  文件菜单->编码->默认,勾选“不使用Unicode自动检测”。再次运行即可。  程序的配置信息保存于程序同目录内和程序同名的.ini的文件内。该文件可以手工...

    notepad3.0.20.exe

    注:对个别UTF-8编码的中文显示为乱码的解决办法:  文件菜单->编码->默认,勾选“不使用Unicode自动检测”。再次运行即可。  程序的配置信息保存于程序同目录内和程序同名的.ini的文件内。该文件可以手工...

    ET_deliver发货单查询系统 v3.0

    说明: 因为有一些朋友觉得程序不错,并给我提出了一些建议,所以再次更新 ...修正:在输入查询条件时至少要输入5个字符 ...修改:改了一些css样式 ...如果安装后一片空白,可能是由于你的浏览器设置的编码

    ET_deliver发货单查询系统 v3.0.zip

    修正:在输入查询条件时至少要输入5个字符 修改:改了一些css样式 修正:错误提示改为消息文件,所以安装程序后可以删除application/view/err.php文件,当然,不删除也行。 增加:不在本系统里的单号也可以直接...

    GVclub v1.1

    6.UTF-8编码,解决贴繁体或国外字符乱码问题。 7.CSS控制整个社区颜色及风格。 8.版面多种可选属性,让社区变得更灵活。 v1.1部分升级内容列举 1、黑名单增强处理 2、订阅文章,每当有新...

    今晚在线GamVan Club v3.0 beta 4

    6.UTF-8编码,解决贴繁体或国外字符乱码问题。 7.CSS控制整个社区颜色及风格。 8.版面多种可选属性,让社区变得更灵活。 v3.0 beta 4更新内容: beta4把持久层代码彻底从逻辑层解放出来了,...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1

    实例112 解决用substr()函数对中文字符串截取时出现乱码的问题 143 实例113 字符串与HTML标记相互转换 144 实例114 运用PHP 5.0新型字符串输出XML数据 145 实例115 判断字符串中是否存在指定子串 146 2.9 正则表达式...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例112 解决用substr()函数对中文字符串截取时出现乱码的问题 143 实例113 字符串与HTML标记相互转换 144 实例114 运用PHP 5.0新型字符串输出XML数据 145 实例115 判断字符串中是否存在指定子串 146 2.9 正则表达式...

    GamVan Club v3.0 beta 2

    6.UTF-8编码,解决贴繁体或国外字符乱码问题。 7.CSS控制整个社区颜色及风格。 8.版面多种可选属性,让社区变得更灵活。 v3.0 Beta 2更新内容: 1. 完成好友列表添加删除等功能。 2....

Global site tag (gtag.js) - Google Analytics