网页中使用的字体介绍，pt字号对应

⽹页中使⽤的字体介绍，pt字号对应
字体的选择，是⽹页开发的关键因素之⼀。

合适的字体，对⽹页的美观度（或可读性）有着举⾜轻重的影响。

但是，相⽐英⽂字体，中⽂字体的⽹页开发有着极⼤的局限性。

因为，⼀套中⽂字体最少也要有⼏千个字符，体积为⼏个MB；单单为了浏览⽹页，开发者不可能让⽤户去下载字体，只能依靠操作系统的预装字体。

（*注：确实有提供中⽂字体的web服务，从技术⾓度，我不推荐这样做。

）
不同的操作系统、不同的版本预装不同的字体（因为版权），⼏乎没有交集。

因此，⼤多数开发者索性忽略中⽂字体，让操作系统⾃⾏渲染，或者⽤图⽚呈现字体效果。

下⾯是⽬前中⽂字体的最佳实践，主要参考了的⽂章。

⼀、操作系统的预装字体
操作系统决定了开发者可以使⽤的字体。

所以，第⼀步，我们必须了解操作系统到底提供哪些字体。

中⽂名英⽂名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楷体
仿宋_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 华⽂新魏
中⽂名英⽂名Unicode Unicode 2
Mac OS
苹果电脑中的字体：
华⽂细⿊：STHeiti Light [STXihei]
华⽂⿊体：STHeiti
华⽂楷体：STKaiti
华⽂宋体：STSong
华⽂仿宋：STFangsong
丽⿊ Pro：LiHei Pro Medium
丽宋 Pro：LiSong Pro Light
标楷体：BiauKai
苹果丽中⿊：Apple LiGothic Medium
苹果丽细宋：Apple LiSung Light
⼆、font-family命令
浏览器中展⽰⽹页⽂字内容时，⽂字字体都会按照设计师在css中定义的字体族的顺序来进⾏显⽰。

什么是字体族？字体族就是你在css代码中看到“font-family”的代码内的⼀类字体名称，例如下⾯这⾏代码：
font-family: Georgia, "Times New Roman",
"Microsoft YaHei", "微软雅⿊",
STXihei, "华⽂细⿊",
serif;
CSS的font-family命令，指定了⽹页元素所使⽤的字体。

它的规则有三条。

（1）优先使⽤排在前⾯的字体。

（2）如果找不到该种字体，或者该种字体不包括所要渲染的⽂字，则使⽤下⼀种字体。

（3）如果所列出的字体，都⽆法满⾜需要，则让操作系统⾃⾏决定使⽤哪种字体。

根据这些规则，font-family应该优先指定英⽂字体，然后再指定中⽂字体。

否则，中⽂字体所包含的英⽂字母，会取代英⽂字体，这往往很丑陋。

上⾯图⽚中，红框内的英⽂字母，左边采⽤英⽂字体渲染，右边采⽤中⽂字体渲染，哪⼀种效果⽐较好，⼀⽬了然。

为了保证兼容性，中⽂字体的中⽂名称和英⽂名称，应该都写⼊font-family。

⽐如，”微软雅⿊”的英⽂名称是Microsoft YaHei。

此外，中⽂字体的中⽂名称，以及由多个单词组成的英⽂名称，应该放在双引号内。

三、 Windows平台和Mac平台
由于Windows和Mac的中⽂字体没有交叉，所以应该同时为两个平台指定字体。

常见的做法是，Windows平台指定”微软雅⿊”（Microsoft YaHei），Mac平台指定”华⽂细⿊”（STXihei）。

四、⽹页常⽤字体分类
⽹页常⽤字体通常分为5类：serif(衬线)、sans-serif(⽆衬线)、monospace(等宽)、fantasy(梦幻)、cuisive(草体)，这些通⽤的名称允许⽤户代理从相应集合中选择⼀款字体。

serif 字体在字符笔画末端有叫做衬线的⼩细节，这些细节在⼤写字母中特别明显。

sans-serif 字体在字符笔画末端没有任何细节，与serif字体相⽐，他们的外形更简单。

monospace 字体，每个字母的宽度相等，通常⽤于计算机相关书籍中排版代码块。

fantasy 和 cuisive 字体在浏览器中不常⽤，在各个浏览器中有明显的差异。

所谓”衬线体”（Serif），指的是笔画的末端带有衬线的字体。

Sans-serif:
Helvetica: 被评为设计师最爱的字体，Realist风格，简洁现代的线条，⾮常受到追捧。

在Mac下⾯被认为是最佳的⽹页字体，在Windows下由于Hinting的原因显⽰很糟糕。

Arial: Helvetica的「克隆」，和Helvetica⾮常像，细节上⽐如R和G有⼩⼩差别。

如果字号太⼩，⽂字太多，看起来会有些累眼。

Win和Mac
显⽰都正常
Lucida Family: Lucida Grande是Mac OS UI的标准字体，属于humanist风格，稍微活泼⼀点。

Mac下的显⽰要⽐Win下好。

Verdana: 专门为了屏显⽽设计的字体，humanist风格，在⼩字号下仍可以清楚显⽰，但是字体细节缺失严重，最好别做标题。

Tahoma: 也是humanist风格，字体和Verdana有点像，但是略窄⼀些，counter略⼩，曾经是Windows的标准字体，Mac 10.5之后默认也有安装。

Trebuchet MS: 为微软设计的⼀个humanist风格字体，个⼈觉得个性太过突出，⽤得不好会不搭。

Serif：
Georgia: 基本上适合正⽂屏显的衬线字体，⾮Georgia莫属了。

笔画粗重，衬线明线，轮廓较⼤，⼩字体显⽰也很清晰，同时细节还算OK。

Times: Times是为了报纸⽽设计的，特点是可以在有限的空间塞进去更多的⽂字，笔画较弱，⼩字号正⽂屏显看起来累眼。

曾经Engadget 改版的时候⽤了Times作为正⽂，被骂得很惨之后换成了Georgia。

就像英⽂字体⼀样，中⽂字体也可以分成”衬线体”和”⽆衬线体”（San-serif）。

⽐如，对于繁体字来说，微软正⿊（Microsoft JhengHei）是⽆衬线体，新细明体（PMingLiU）是衬线体。

对于简体字来说，微软雅⿊（Microsoft yahei）是⽆衬线体，宋体（SimSun）是衬线体。

⼀般来说，衬线体装饰性强，往往⽤于标题；⽆衬线体清晰度好，往往⽤于正⽂。

五、⽹页设计常⽤WEB安全字体
1, Arial
微软公司的⽹页核⼼字体之⼀，最常⽤的sans serif字体，当字号很⼩时不容易阅读。

但是，⼤写的“I”和⼩写的“l”是⽆法区别的，你可以考虑⽤Tahoma字体来替代。

（苹果系统没有这种字体，但有⼀种对应于Arial的字体叫Helvetica，它是MAC机上与Arial 字体最相似的WEB字体,是别⼀种⾮衬线字体.它是⼀种性能优良的打印字体,但在屏幕上表现不是很好，说道Helvetica字体，昨天发现了很多有意思的站点，主要是纪念Helvetica字体诞⽣50年⽽设的。

）
CSS写法：font-family: Arial, Helvetica, sans-serif;
2, Arial Black
CSS写法：font-family: ‘Arial Black’, Gadget, sans-serif;
3, Arial Narrow
CSS写法：font-family: ‘Arial Narrow’, sans-serif;
4, Verdana
微软公司的⽹页核⼼字体之⼀，微软公司专门为屏幕显⽰⽽开发的。

应⽤⼴泛。

易于阅读。

是显⽰器中最清晰的字体，即使字号很⼩，也很容易阅读。

半肥猫⽐较喜欢采⽤10PX的Verdana来做英⽂正⽂字体，也推荐⼤家使⽤，但字号最好介于10~14像素之间，超出这个范围就不好看了。

CSS写法：font-family: Verdana, Geneva, sans-serif;
5, Georgia
微软公司的⽹页核⼼字体之⼀，可⽤性好。

可读性⽐Times New Roman强。

是⽹站设计中，浏览效果最好的serif字体，因为它是专为⽹上阅读设计的。

）
CSS写法：font-family: Georgia, serif;
6, Times New Roman
微软公司的⽹页核⼼字体之⼀，可能是最常⽤的serif字体，是⽹站浏览器默认的字体，12pt以上的字体容易阅读，但⼩字号的字体易读性差。

（苹果系统没有这个字体，有⼀个对应于Times New Roman的字体叫Times）
CSS写法：font-family: 'Times New Roman', Times, serif;
7, Trebuchet MS
微软公司的⽹页核⼼字体之⼀，与Arial相似，半肥猫觉得：Trebuchet MS⽐Arial看起来优雅、古典⼀点。

可以⽤来做标题，但⼩字号阅读起来会很困难（低于13PIX阅读起来就很累了，不太推荐⽤来做正⽂字体）。

在苹果系统上也可以⽤Helvetica做替代。

CSS写法：font-family: 'Trebuchet MS', Helvetica, sans-serif;
8 , Courier New
微软公司的⽹页核⼼字体之⼀，⽼式打印机字体，有⼀种独特的机械⼯整感觉。

呈现计算机编码时，还会⽤到这种字体。

12 pt的Courier New字体曾是美国国务院的公⽂标准字体，但于2004年1⽉停⽤，改使⽤14 pt的Times New Roman，因为其具“现代性”和“易读性”。

CSS写法：font-family: 'Courier New', Courier, monospace;
9, Impact
微软公司的⽹页核⼼字体之⼀，Impact是1965年发表的⼀个⽆衬线字体，其特粗的笔画、紧缩的间距。

半肥猫觉得：字体较为粗犷，适合使⽤在标题上，⽽不常⽤在内⽂。

CSS写法：font-family: Impact, Charcoal, sans-serif;
10, Comic Sans MS
微软公司的⽹页核⼼字体之⼀，⼿写体。

这是⼀种争议很⼤的字体，讲实话，半肥猫也不喜欢这个字体，⼀点美感都没有，不过在⼀⼤堆规规矩矩的字体⾥⾯，有这么⼀个随意性⽐较的字体，可以变换⼀下⼝味，也算不错吧，建议不要⽤在正规的⾦融、政府、商业机构站点。

CSS写法：font-family: 'Comic Sans MS', cursive;
11, Tahoma
Tahoma是⼀个⼗分常见的⽆衬线字体，Tahoma和Verdana师出同为名设计师马修·卡特的作品，由微软在1999年推出，被采⽤为Windows 2000、Windows XP、Windows Server 2003等系统的默认字型。

半肥猫觉得：它的字体结构和Verdana很相似，其字符间距较⼩，⽤来作为标题，效果好过Arial（Tahoma的⼤写I 和⼩写l⽐Arial容易识别），但如果作为正⽂，他的字号不能⼩于13PIX，否则很多笔画粘连到⼀起，不利于阅读。

CSS写法：font-family: Tahoma, Geneva, sans-serif;
12, Courier
Courier是⼀个等宽字体的粗衬线字体，主要是依据打字机所打印出来的字型来设计。

原来Courier New的字体是IBM公司在1950年代设计给打印机使⽤的字体，后来这个字型成为整个打字机制造业的标准。

Courier New是Courier的变体，⽐Courier更具机械味道。

CSS写法：font-family: Courier, monospace;
13, Lucida Sans Unicode
是⼀种OpenType型的⽆衬线字体。

1993年制作并随微软公司的Windows NT 3.1操作系统发布。

有较⼤的x字⾼，具有很好的可读性，被⼴泛⽤于显⽰、出版等各种⽤途。

它⽀持Unicode2.0版本的基本字符，包括拉丁字母，希腊字母，西⾥尔字母，希伯来字母，以及国际⾳标字符。

该字体是⾸个 Unicode代码的字体，该字体从Windows 98开始⼀直作为系统预装字体发⾏。

后来发布的 Lucida Grande字体作为苹果公司Mac OS X系统的默认字体发布。

CSS写法：font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
14, Lucida Console
同Lucida Sans Unicode类似。

CSS写法：font-family: 'Lucida Console', Monaco, monospace;
15, Garamond
Garamond（加拉蒙德）是⼀类西⽂衬线字体的总称，⾃16世纪40年代开始⾄今，有很多家公司和很多设计师参与到Garamond字体设计，如： Adobe Garamond, Monotype Garamond, Sioncini Garamond，和 Stempel Garamond等等。

半肥猫觉得：字体给⼈端庄典雅，有些古典的感觉，在博物馆和历史性悠久的项⽬中使⽤，应该可以获得不错的效果。

CSS写法：font-family: Garamond, serif;
16 , MS Sans Serif
微软系统⾃带字体。

屏幕显⽰的像素字体。

⾮衬线字体。

CSS写法：font-family: 'MS Sans Serif', Geneva, sans-serif;
17 , MS Serif
微软系统⾃带字体。

屏幕显⽰的像素字体。

衬线字体。

CSS写法：font-family: 'MS Serif', 'New York', sans-serif;
18, Palatino Linotype
CSS写法：font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
19, Symbol
CSS写法：font-family: Symbol, sans-serif;
20, Bookman Old Style
CSS写法：font-family: 'Bookman Old Style', serif;
六、⼏种常见中⽂字体
（1）宋体（SimSun）
宋体是Win最常见的字体，⼩字体点阵，⼤字体TrueType，但是⼤字体并不好看，所以最好别做标题。

如果没有指定字体，操作系统往往选择它来渲染。

很多⼈认为，这种字体并不美观。

（2）微软雅⿊（Microsoft YaHei）
Vista之后新引⼊的字体，打开Cleartype之后显⽰效果不错，不开Cleartype发虚。

美观度和清晰度都较好，可以作为⽹页的⾸选字体。

它在Mac平台的对应字体是华⽂细⿊（STXihei）。

但是，Windows XP没有预装这种字体，这时可以选择⿊体（Simhei）替代。

不过，⿊体⽐较粗，不应⽤于字号较⼩的⽂字。

（3）仿宋（FangSong）
这种字体是衬线体，⽐宋体的装饰性更强。

如果字号太⼩，会影响清晰度，所以只有在字号⼤于14px的情况下，才可以考虑这种字体。

它在Mac平台的对应字体是”华⽂仿宋”（STFangsong）。

（4）楷体（KaiTi）
楷体也是衬线体，装饰性与仿宋体接近，但是宽度更⼤，笔画更清楚⼀些。

这种字体也不应该在⼩于14px的情况下使⽤。

它在Mac平台的对应字体是”华⽂楷体”（STKaiti）。

1.在chrome上显⽰的结果
2.在ie8上显⽰的结果　
3.在firefox上显⽰的结果
5.在此次测试中发现：
android设备中各个浏览器都很不给⼒（ios的还没有测试，我想肯定也好不到哪去吧），android⼿机中各个浏览器⽀持的常⽤字体只有三种：
sans-serif(⽆衬线)类 : Arial; //只要设置成sans-serif类，不管什么字体，都⼀个样⼦。

serif(衬线)类：Georgia； //只要设置成serif类，不管什么字体，都⼀个样⼦。

monospace(等宽)类 //只要设置成monospace类，不管什么字体，都⼀个样⼦。

在CSS⽂件中，我们常看到有些字体名称变成了乱码，这是由于CSS⽂件基本都是UTF-8的编码模式，编写者将中⽂字体的名字直接写成了中⽂，并且再上传或者拷贝复制的时候⽆意间变成了乱码。

所以我们可以把中⽂字体的名称⽤相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。

⽐如中⽂字体“宋体”经过Unicode编码后为“\5b8b\4f53″，在CSS中就可以这样写：font-family:’ \5b8b\4f53’;
我们常⽤中⽂字体的英⽂名称对照表如下： Windows⾃带的字体：
如果在你“DIV+CSS”的过程中，还需要⽤到⼀些表中没有的字体的话，可以借助Firefox的插件Firebug来查询所需中⽂字体对应的 Unicode 编码，⽅法很简单，就是打开Firefox，然后打开Firebug，在“控制台”⾥底部“>>>”的后⾯像这样输⼊ “escape(‘⿊体’)”，然后会显⽰⼀个错误信息，*** is not defined 前⾯的部分就是中⽂字体“⿊体”对应的Unicode编码“\9ED1\4F53”，注意命令符⾥的符号都是英⽂符号，否则可能会出错。

另外，在设置字体时候最好把英⽂字体写在前⾯，不然可能⽹页⾥所有的英⽂字体和数字都变成“宋体”或者别的字体去了，那样看起来⽐较不美观。

七、特殊字体应⽤⽅案
⽬前⽅案⽆⾮三种：
1. 客户打开⽹页的时候，提⽰客户安装该字体。

2. 制作图⽚嵌⼊⽹页。

3. 把字体嵌⼊到⽹页中(通过上传字体⽂件到指定⽬录，让CSS引⽤显⽰)。

第⼀种⽅案明显存在弊端，⽤脚本程序去识别客户端是否含有该字体，加重程序的负载量。

⽽且严重影响⽤户的体验。

效果最次！
第⼆种⽅案⽣成图⽚，⽹页加载慢，不利于百度收录，效果差！
第三种⽅案流量⼩加载速度快,效果最好！
第三种⽅案就是指⽹络字体(web font,也被称为“⽹页内嵌字体”或“⽹页外调字体”)，通过上传字体⽂件到指定⽬录，然后在CSS中⽤规定格式进⾏引⽤就可以使字体效果跃上你的页⾯了，使⽹页⽤字不再受浏览客户端的影响。

⼋、⼀些建议
最好是使⽤⼤多数⼈的机器上可能有的常见的truetype字体。

Arial、Times Roman、Courier、Verdana和Century Gothic是常见的字体，中⽂⾥⾯Windows⾃带宋体、⿊体及楷体。

如果你使⽤不常见的字体，不要忘记为没有此字体的浏览器指定替代的字体。

通过css设置font-family来制定字体集，浏览器可以顺序查找使⽤你制定的⼀系列字体，让你的页⾯看起来还不错。

·装饰性字体组好只⽤于标题。

然后⽤css的font-family指定缺省字体。

·不要过分地使⽤字体，在同⼀页⾯中不要使⽤太多不同的字体。

通常使⽤两种字体就⾜够了：⼀种⽤于标题，⼀种由于⽂本。

某些字体组合常常⽆法⼯作。

例如，不要再同⼀页⾯中使⽤script和斜体字体，不要在同⼀页⾯中使⽤⼀种以上的装饰性字体。

·尝试使⽤相同字型的不同浓淡度使页⾯更有趣。

如果你的页⾯相当乏味，没有图像，那么尝试设置促体的浓淡度（通过css的font-weight特性），这会使页⾯更⽣动。

使⽤不⽤的浓淡度不仅可以使页⾯更吸引⼈，它还是组织信息的最有效的⽅法之⼀。

·不要在同⼀页⾯中放两种sans serif字体，除⾮你确实知道在做什么。

如果你要在同⼀页⾯中使⽤两种字体，它们应该来⾃两种不同的字型类别。

·不同的操作系统及浏览器中pt字会不⼀样⼤。

pt（磅）最早是⽤于印刷的字号，在windows和mac os⾥⾯，相同的pt值会对应不同的px（像素）值。

唯⼀可靠的单位，就是px。

·设置字号的时候，要考虑好来你的⽹站的客⼈会是什么样的⼈？
如果你设置了固定的字号，⽐如12px，那么，对于普通浏览者来说，这是没什么问题的，但是如果你的⽹站的浏览者包括⽼⼈和视⼒有问题的⼈群，那么这个尺⼨就太⼩了，最好提供个他们可以选择页⾯字体的权利。

Arial、Times Roman、Courier、Verdana和Century Gothic是常见的字体，中⽂⾥⾯Windows⾃带宋体、⿊体及楷体。

如果你使⽤不常见的字体，不要忘记为没有此字体的浏览器指定替代的字体。

通常内容应⽤的字体,font-family:宋体,微软雅⿊,Arial,Verdana,arial,serif。

通常标题应⽤的字体,font-family:font-family:宋体,微软雅⿊,Arial,只是字号的⼤⼩不⼀样。

通常的字体⼤⼩,font-size:12px或14px。

让⽹页显⽰微软雅⿊效果通常这样写CSS代码font-family:微软雅⿊,宋体。

这样⽹站⾸选微软雅⿊，如果⽤户未安装微软雅⿊字体，就默认显⽰宋体。

在新版本的CSS3，可以使⽤ @font-face 调⽤⼀些其他的字体库，弊端是，⽤户在访问的时候要去下载这个⽂件，所以会影响整个⽹站的效率。

Arial,Helvetica,San-serif 这个组合适配性是最好的,也是最保险的.
font-family: arial,helvetica,sans-serif;（完）。