芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
9

CSS 中文字体 Unicode 编码方案

作者 芒果/分类 代码/发布于 2010-09-03 21:42

CSS 中使用中文字体通常直接设置字体名称,比如设置字体为宋体:font-family:’宋体’;但因此产生的一个问题是,如果 CSS 编码有误,会导致页面加载后 CSS 中的中文字体乱码,请看下图所示:

通常会采用对中文字体进行 Unicode 编码的方式来解决这个危险的问题。比如字符“宋体”经过 Unicode 编码后为 “\5b8b\4f53″。以淘宝为例:font:12px/1.5 tahoma,arial,\5b8b\4f53; 预选的中文字体是编码后的宋体。

有一种快速获得字体 Unicode 编码的方法,如果你使用火狐的 Firebug 插件,直接在控制台中输入 escape(‘黑体’),就可以得到黑体的 Unicode 编码,但需要经过处理才可以使用到 CSS 文件中来,请看下图所示:

于此获得到了 “%u9ED1%u4F53″,将其改写为 “\9ED1\4F53” 即可写入 CSS 文件。

这样或许还是有些小麻烦,那也没关系,芒果这里有一份比较完整的表格,自己查吧。

中文名 Unicode
新细明体 \65B0\7EC6\660E\4F53
细明体 \7EC6\660E\4F53
标楷体 \6807\6977\4F53
黑体 \9ED1\4F53
宋体 \5B8B\4F53
新宋体 \65B0\5B8B\4F53
仿宋 \4EFF\5B8B
楷体 \6977\4F53
仿宋_GB2312 \4EFF\5B8B_GB2312
楷体_GB2312 \6977\4F53_GB2312
微软正黑体 \5FAE\x8F6F\6B63\9ED1\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1
版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/css-chinese-font-unicode-encode-solution/" title="CSS 中文字体 Unicode 编码方案" rel="bookmark">CSS 中文字体 Unicode 编码方案 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 9 条群众意见

  1. 书香阁 /2010-09-03 22:25

    不错,学习一下。 回应

    #1
  2. ?
    CSS中文字体编码 - 数据力量 /2010-09-04 02:54

    […] 【来源】芒果 – CSS 中文字体 Unicode 编码方案 【整理】horan@数据力量 – CSS中文字体编码 […] 回应

    #2
  3. DeadFire /2010-09-06 11:25

    字体可以这样写的吧:font-family:’song’; 每个中文字体都有一个英文名的,可以直接用英文名。 回应

    #3
  4. Mr.Think /2010-09-13 13:37

    哈,实用,此方法可用于转换普通中文。 回应

    #4
  5. Vincent /2010-11-23 12:26

    请问把网页默认字体设置为微软雅黑,可以不可以呢? 回应

    #5
  6. ?
    CSS中文字体编码-Unicode - Peter Wang – HTML5 | WEB 前端技术 /2011-01-28 11:24

    […] 华文新魏 有时候找起来还真是麻烦,索性将找到的整理了一下在这儿种下,暂放这么多。 芒果blog:CSS 中文字体 Unicode 编码方案 […] 回应

    #6
  7. ?
    快速转换 CSS 字体 Unicode 编码 | WordPress体验中心 /2011-04-17 16:04

    […] CSS 中文字体 Unicode 编码方案 […] 回应

    #7
  8. brand /2012-05-08 15:25

    一直在找,收藏了,用的比较多,谢谢。 回应

    #8
  9. hidoosbrand/2013-05-14 15:47

    http://hotoo.googlecode.com/svn/trunk/labs/css/css-fonts.html
    这里也有一份,挺全的。 回应

    #9

下面我简单说几句