Css中常用中文字体的Unicode编码对照

kevin-ying

在网页制作中，最常用的恐怕是字体属性了，在调整页面兼容的时候，也常常发现字体名称的原因导致不兼容或乱码，下面给出几种常用字体的ucicode编码对照，方便使用。

中文名	英文名	Unicode	Unicode 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	华文仿宋
丽黑 Pro	LiHei Pro Medium	\4E3D\9ED1 Pro	丽黑 Pro
丽宋 Pro	LiSong 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	楷体
仿宋_GB2312	FangSong_GB2312	\4EFF\5B8B_GB2312	仿宋_GB2312
楷体_GB2312	KaiTi_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	华文新魏

宋体	SimSun	\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
微软正黑体	Microsoft JhengHei	\5FAE\x8F6F\6B63\9ED1\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53
细明体	MingLiU	\7EC6\660E\4F53
标楷体	DFKai-SB	\6807\6977\4F53
仿宋	FangSong	\4EFF\5B8B
楷体	KaiTi	\6977\4F53
仿宋_GB2312	FangSong_GB2312	\4EFF\5B8B_GB2312
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
华文细黑	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
丽黑 Pro	LiHei Pro Medium	\4E3D\9ED1 Pro
丽宋 Pro	LiSong Pro Light	\4E3D\5B8B Pro
标楷体	BiauKai	\6807\6977\4F53
苹果丽中黑	Apple LiGothic Medium	\82F9\679C\4E3D\4E2D\9ED1
苹果丽细宋	Apple LiSung Light	\82F9\679C\4E3D\7EC6\5B8B

kevin-ying

为什么要分别给中英文指定不同字体？
因为：1，一般的英文字体不带中文，中文必须用不同的字体显示；2，一般的中文字体虽然会带英文，但往往比较难看，比专门的英文字体难看得多。所以，需要中英文用不同的字体显示。
现在通常的做法是，在 CSS 里，把英文字体名字写在前面，中文字体名字写在后面。比如百度首页是这么写的：

1. body{ font-family: arial, 宋体, sans-serif; }

复制代码

这样，理论上，浏览器会优先用英文字体显示文字，英文字体里没包含的字符，则从后面的中文字体里面找，这样就达到了中英文显示不同字体的效果（具体到各个操作系统和浏览器，还有不少差别，可参见 jjgod 的《浏览器如何渲染文本》）。比如上面的例子就是英文用 Arial，汉字用宋体。
这样的问题是：1，各个系统和浏览器的行为不同，有的用后面规定的中文字体，有的会用浏览器或系统默认字体。2，有的字符，可能英文字体和中文字体里都有，于是想用中文字形却显示成了英文字形（比如知乎上有人提出的中文破折号断开的问题）。
今天在 http://rishida.net/blog/?p=760 看到，可用 CSS3 的 @font-face 指定某编码范围内的字符使用某字体。因为是指定编码范围，所以这个办法高度灵活，不仅可以指定中英文分别使用不同字体，甚至可以指定某一个特定字符使用某个特定字体，并且无需格外使用 HTML 标签包裹文本。
原文中的例子：

1. @font-face {
   
2.   font-family: myJapanesefont;
   
3.   src: local(MS-Mincho);
   
4. }
   
5. 
   
6. @font-face {
   
7.   font-family: myJapanesefont;
   
8.   src: local(Gentium);
   
9.   unicode-range: U+41-5A, U+61-7A, U+C0-FF;
   
10. }
    
11. 
    
12. p {
    
13.   font-family: myJapanesefont;
    
14. }

复制代码

原文是用日语举的例子，我们把粗体部分改成中文的 Unicode 编码范围就行了。此例中粗体范围的字符会用 Gentium 字体，其他会用 MS-Mincho 字体，我们使用时可根据自己的需要设置。
local() 表示先在用户电脑上寻找该字体，也可以指定备用字体或提供 WOFF 字体下载路径。
CSS3 的功能真心强大，可惜的是，此方法目前似乎只有 Chrome 和 Safari 支持，Firefox、Opera 和 IE9 都不行……所以目前还不实用……期待各浏览器快点跟上，用户们快点更新吧。
关于此方法的标准草案详见 http://www.w3.org/TR/css3-fonts/#unicode-range-desc

kevin-ying

参考文献:

响应式网页字体图标