中文字体在CSS中的写法整理

所属分类: 网页制作 / CSS 阅读数: 793
收藏 0 赞 0 分享
今天在折腾wordpress主题的时候,想把侧边栏上的2个标题转换为“方正姚体”,用Firebug调试OK了,保存到css文件里上传后,可是怎么弄也显示不对,网上搜索了一下,才知道原来在CSS中不能出现中文字体,解决办法就是把这些中文字体名字转换成英文名。

Unicode简单的说一下制作网页时的为了兼顾到一些浏览器CSS样式文档中一般是不出现中文字体的,尤其是 {}中,因此通过参照下表将其对应转编,可以将中文名转成英文名、unicode、unicode2注意unicode2是直接输出为文本的,
比如:微软雅黑,我们在CSS中的设置为

font-family:”Microsoft Yahei”;

也可以是对应的unicode

font-family:”\5FAE\8F6F\96C5\9ED1″;

但微软雅黑对应的unicode2即微软正黑体写在样式文档里是没有效果的,因为unicode2是以文本形式输出的,这个可以将对应的unicode2 放到html文档中尝试一下,对应输出微软雅黑四个字
常用字体设置

font-family:' SimSun','\5B8B\4F53' /*宋体*/

font-family:' Microsoft Yahei','\5FAE\8F6F\96C5\9ED1' /*微软雅黑*/

中文名英文名UnicodeUnicode 2

Mac OS

华文细黑STHeiti Light [STXihei] \534E\6587\7EC6\9ED1 华文细黑
华文黑体STHeiti \534E\6587\9ED1\4F53 华文黑体
华文楷体STKaiti \534E\6587\6977\4F53 华文楷体
华文宋体STSong \534E\6587\5B8B\4F53 华文宋体
华文仿宋STFangsong \534E\6587\4EFF\5B8B 华文仿宋
丽黑 ProLiHei Pro Medium \4E3D\9ED1 Pro 丽黑 Pro
丽宋 ProLiSong Pro Light\4E3D\5B8B Pro丽宋 Pro
标楷体BiauKai\6807\6977\4F53标楷体
苹果丽中黑Apple LiGothic Medium \82F9\679C\4E3D\4E2D\9ED1 苹果丽中黑
苹果丽细宋Apple LiSung Light \82F9\679C\4E3D\7EC6\5B8B 苹果丽细宋

Windows

新细明体PMingLiU\65B0\7EC6\660E\4F53新细明体
细明体MingLiU\7EC6\660E\4F53细明体
标楷体DFKai-SB\6807\6977\4F53标楷体
黑体SimHei\9ED1\4F53黑体
宋体SimSun\5B8B\4F53宋体
新宋体NSimSun\65B0\5B8B\4F53新宋体
仿宋FangSong\4EFF\5B8B仿宋
楷体KaiTi\6977\4F53楷体
仿宋_GB2312FangSong_GB2312\4EFF\5B8B_GB2312仿宋_GB2312
楷体_GB2312KaiTi_GB2312\6977\4F53_GB2312楷体_GB2312
微软正黑体Microsoft JhengHei\5FAE\x8F6F\6B63\9ED1\4F53微软正黑体
微软雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1微软雅黑

Office

隶书LiSu\96B6\4E66隶书
幼圆YouYuan\5E7C\5706幼圆
华文细黑STXihei\534E\6587\7EC6\9ED1华文细黑
华文楷体STKaiti\534E\6587\6977\4F53华文楷体
华文宋体STSong\534E\6587\5B8B\4F53华文宋体
华文中宋STZhongsong\534E\6587\4E2D\5B8B华文中宋
华文仿宋STFangsong\534E\6587\4EFF\5B8B华文仿宋
方正舒体FZShuTi\65B9\6B63\8212\4F53方正舒体
方正姚体FZYaoti\65B9\6B63\59DA\4F53方正姚体
华文彩云STCaiyun\534E\6587\5F69\4E91华文彩云
华文琥珀STHupo\534E\6587\7425\73C0华文琥珀
华文隶书STLiti\534E\6587\96B6\4E66华文隶书
华文行楷STXingkai\534E\6587\884C\6977华文行楷
华文新魏STXinwei\534E\6587\65B0\9B4F华文新魏
更多精彩内容其他人还在看

Opera中国的WEB标准课程

网页制作Webjx文章简介:在这篇文章里,我要向大家介绍我和其他很多人花费数月时间开发的一个课程——Web标准课程,该课程旨在向大家提供Web设计和开发的坚实基础,无论读者是谁,此教程完全免费、可访问,并且不需要预备知识。当然,我主要还
收藏 0 赞 0 分享

CSS样式表渐进增强的基本概念

网页制作Webjx文章简介:如果你挠着头想弄清楚优雅降级和渐进增强的区别,我告诉你,这是视角问题。优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点,以及这种关注对工作流程的影响
收藏 0 赞 0 分享

简单介绍Web Developer插件制作网页

网页制作Webjx文章简介:Firefox浏览器是一个良好支持W3C标准的开放源代码的浏览器,拥有Linux/Windows/Mac版本。因为Firefox浏览器良好支持W3C标准,所以使用Firefox来调试网页是非常好的。 Firefox浏览器是
收藏 0 赞 0 分享

CSS布局带来的巨大影响:CSS display属性值

网页制作Webjx文章简介:网页元素应用上那些与表格相关的display属性值后,能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。 应原书编辑要求,先在文章顶部给出链接:《Everything You
收藏 0 赞 0 分享

用div css模拟表格对角线

这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点。如果对此深以为然的朋友,请一笑过之 首先声明: 这只是探讨一种CSS模拟表格对角线的
收藏 0 赞 0 分享

IE Firefox在css中的差别 (部分)

1、单位问题 问题:任何距离的数值ie可以不加单位,ff必须要求写单位(0除外) 解决:写全单位如padding:0px; 2、水平居中 问题:div里的内容,ie默认为center,而ff默认left 解决:mairgin:0px auto; 3、高度问题
收藏 0 赞 0 分享

不用js可以实现信息提示效果

[code] <style> body { font:verdena; font-size:14px; color:#000 } h1{ font:verdena; font-size:22px; color:#000 } h2{ font:verdena;
收藏 0 赞 0 分享

CSS解决未知高度的垂直水平居中自适应问题

今天有人问起,晚上试着写出来,供参考; 以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。 从最简单的开始………… 一、如何让一个DIV水平居中? 这个简单不作过多说明! [code] <st
收藏 0 赞 0 分享

CSS cursor 属性 -- 鼠标指针样式效果

取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize |
收藏 0 赞 0 分享

css 简单区别ie6,ie7,firefox的写法

同一样式里可以这样 [code] margin:17px; FF +margin:17px; IE6 IE7 _margin:17px; IE6 [/code] 按这个顺序,刚好区分开三个浏览器
收藏 0 赞 0 分享
查看更多