下面小编就为大家带来一篇分享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

php 使用css乱码,分享CSS字符编码引起乱码快速解决的方法相关推荐

  1. Ubuntu Linux 下文件名乱码(无效的编码)的快速解决办法

    Ubuntu Linux 下文件名乱码(无效的编码)的快速解决办法 文件是在WIndows 下创建的,Windows 的文件名中文编码默认为GBK,而Linux中默认文件名编码为UTF8,由于编码 不 ...

  2. idea console中文乱码_Python3的字符编码乱码问题解决思路

    在乱码问题上,Python3相比Python2已经好多了,但在处理外来字符时比如文件或者网站时还是会出现乱码问题. 乱码的原因很多,一个是来源的字符编码在接收时处理不当,编程语言默认的UTF8处理gb ...

  3. 20,sql 测试 : 1.4g 文件的 sql 运行测试,表关联,日期转换,字符编码,乱码解决,程序的 shell 执行,字符串转数字,三个隐式转换,用列分区,输出,sum over

    一 ,基础操作 : 1 ,表关联 : select stock.area,goods.smallLei,goods.typeColorId,weekofyear(to_date(stock.sellD ...

  4. python 乱码 无效_python学习第四天:python基础(字符编码和乱码到底咋回事儿)...

    字符编码 这得从字符编码开始说起: 字符串也是一种数据类型,但是,字符串比较特殊的是还有一个编码问题.因为计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理. 最早的计算机在设计时采 ...

  5. 字符集和字符编码为什么乱码是问号?

    什么是字符集和字符编码? 字符:在计算机和电信技术中,一个字符是一个单位的字形.类字形单位或符号的基本信息.即一个字符可以是一个中文汉字.一个英文字母.一个阿拉伯数字.一个标点符号等. 字符集:多个字 ...

  6. SSH中设置字符编码防止乱码

    1.在web.xml中加入一个过滤器和过滤范围的配置 <filter> <filter-name>encoding</filter-name> <filter ...

  7. linux 保存文件名乱码怎么办,Linux 文件名编码转换 乱码 解决办法

    Linux中操作windows下的文件,可能会经常遇到文件编码转换的问题.Windows中默认的文件格式是GBK(gb2312),而Linux一般都是UTF-8.下面介绍一下,在Linux中如何查看文 ...

  8. android u盘盘符乱码,分享U盘中文件出现乱码的原因以及解决方法

    当使用U盘时发现U盘文件成了乱码,就算将U盘拔插了几次也无法恢复,这是怎么回事呢?U盘文件出现乱码又应该如何解决呢?接下来就为大家分享U盘中文件出现乱码的原因以及解决方法. u盘出现乱码的原因: 1. ...

  9. Java开发中字符编码出现乱码的处理

    出现乱码问题的解决方法无非就是在3个地方进行编码设置: 1.HTML.JSP等前端页面: 2.后台servlet中request和response对象: 3.服务器配置文件. 1.HTML.JSP等前 ...

最新文章

  1. mysql刷新连接_MYSQL频繁出现连接失败,刷新后正常的解决办法
  2. C语言——四字节对齐(4对齐后是4, 5对齐后是8)
  3. 关于预付卡,您需要知道的事儿
  4. 计算机网络技术通识试题,超星计算机网络技术章节答案
  5. python多线程为什么要用队列_Python程序中的线程操作-线程队列
  6. 丁洪波 -- 不要“ 总是拿着微不足道的成就来骗自己”
  7. web站点性能测试经验点滴
  8. 在桌面应用中使用JAVA DB[组图]
  9. 李彦宏:百度今年全员涨薪,比去年还多;谷歌暂停Chrome浏览器更新;Eclipse 4.15发布 | 极客头条...
  10. (node:62099) ExperimentalWarning: The fs.promises API is experimental
  11. 实变函数与计算机有关系吗,《复变函数与实变函数》
  12. 2022Android设备唯一标识(AndroidID,OAID等 )
  13. 2 Bitbake执行
  14. 69张图回顾2021和看透2022
  15. python语料库是什么,Python 语料库的搭建
  16. 正尝试在 OS 加载程序锁内执行托管代码。不要尝试在 DllMain 或映像初始化函数内运行托管代码,这样做会导致应用程序挂起。
  17. 程序员兼职网站(自由职业)
  18. 什么是SAS硬盘,服务器硬盘sas和sata有什么区别
  19. 【18-业务开发-基础业务-商品模块-分类管理-前后端管理系统的启动-为分类管理表增加数据-Json插件的下载-返回具有层级目录、父子关系结构的数据】
  20. xd卡数据丢失原因和三种数据恢复方法介绍

热门文章

  1. 2020-1024=996
  2. java基础习题集_java基础集合经典训练题
  3. linux的阻塞waitqueue,Linux阻塞控制 wait_event与wait_event_interruptible函数详解
  4. 一文带你学会国产加密算法SM4的vue实现方案
  5. 下列不属于android布局的是( ),Android软件工程师笔试题(全选择题)【0-1年经验】...
  6. 分布式系统熔断机制的工作原理
  7. prometheus+grafana+pushgateway+node-exporter+consul搭建监控系统
  8. bash参数及运算练习
  9. 这里提供了在Linux上显示某个进程的线程的几种方式
  10. 关于python赋值语句下列选项中描述正确的是_关于Python的分支结构,以下选项中描述正确的是()。...