中文字体名称对照表(unicode码)及20个web安全字体

在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,咱们能够经过新增的@font-face属性来引入特殊的浏览器加载字体。但多数状况下,考虑各个因素的影响咱们仍是在尽可能充分利用css

中文名 英文名 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 华文新魏

 

 


在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,咱们能够经过新增的@font-face属性来引入特殊的浏览器加载字体。css3

 

但多数状况下,考虑各个因素的影响咱们仍是在尽可能充分利用这些默认调用的字体实现CSS的编写,这里整理了20个Web安全字体,让你无需任何顾虑的状况下畅快使用。程序员

 

1,  Arialwindows

微软公司的网页核心字体之一,最经常使用的sans serif字体,当字号很小时不容易阅读。可是,大写的“I”和小写的“l”是没法区别的,你能够考虑用Tahoma字体来替代。
(苹果系统没有这种字体,但有一种对应于Arial的字体叫Helvetica,它是MAC机上与Arial 字体最类似的WEB字体,是别一种非衬线字体.它是一种性能优良的打印字体,但在屏幕上表现不是很好,说道Helvetica字体,昨天发现了不少有意思的站点,主要是记念Helvetica字体诞生50年而设的。)浏览器

Arial

CSS写法:font-family: Arial, Helvetica, sans-serif;安全

 

2, Arial Black性能

ArialBlack

CSS写法:font-family: ‘Arial Black’, Gadget, sans-serif;字体

 

3, Arial Narrow网站

ArialNarrow

CSS写法:font-family: ‘Arial Narrow’, sans-serif;编码

 

4, Verdana

微软公司的网页核心字体之一,微软公司专门为屏幕显示而开发的。应用普遍。易于阅读。是显示器中最清晰的字体,即便字号很小,也很容易阅读。半肥猫比较喜欢采用10PX的Verdana来作英文正文字体,也推荐你们使用,但字号最好介于10~14像素之间,超出这个范围就很差看了。

Verdana

CSS写法:font-family: Verdana, Geneva, sans-serif;

 

5,  Georgia
微软公司的网页核心字体之一,可用性好。可读性比Times New Roman强。是网站设计中,浏览效果最好的serif字体,由于它是专为网上阅读设计的。)

Georgia

CSS写法:font-family: Georgia, serif;

 

6,  Times New Roman
微软公司的网页核心字体之一,多是最经常使用的serif字体,是网站浏览器默认的字体,12pt以上的字体容易阅读,但小字号的字体易读性差。(苹果系统没有这个字体,有一个对应于Times New Roman的字体叫Times)

Times New Roman

CSS写法:font-family: 'Times New Roman', Times, serif;

 

7, Trebuchet MS
微软公司的网页核心字体之一,与Arial类似,半肥猫以为:Trebuchet MS比Arial看起来优雅、古典一点。能够用来作标题,但小字号阅读起来会很困难(低于13PIX阅读起来就很累了,不太推荐用来作正文字体)。在苹果系统上也能够用Helvetica作替代。

Trebuchet MS

CSS写法:font-family: 'Trebuchet MS', Helvetica, sans-serif;

 

8 , Courier New
微软公司的网页核心字体之一,老式打印机字体,有一种独特的机械工整感受。呈现计算机编码时,还会用到这种字体。12 pt的Courier New字体曾是美国国务院的公文标准字体,但于2004年1月停用,改使用14 pt的Times New Roman,由于其具“现代性”和“易读性”。

Courier New

CSS写法:font-family: 'Courier New', Courier, monospace;

 

9,  Impact
微软公司的网页核心字体之一,Impact是1965年发表的一个无衬线字体,其特粗的笔画、紧缩的间距。半肥猫以为:字体较为粗犷,适合使用在标题上,而不经常使用在内文。

Impact

CSS写法:font-family: Impact, Charcoal, sans-serif;

 

10,  Comic Sans MS
微软公司的网页核心字体之一,手写体。这是一种争议很大的字体,讲实话,半肥猫也不喜欢这个字体,一点美感都没有,不过在一大堆规规矩矩的字体里面,有这么一个随意性比较的字体,能够变换一下口味,也算不错吧,建议不要用在正规的金融、政府、商业机构站点。

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,不然不少笔画粘连到一块儿,不利于阅读。

Tahoma

CSS写法:font-family: Tahoma, Geneva, sans-serif;

 

12,  Courier
Courier是一个等宽字体的粗衬线字体,主要是依据打字机所打印出来的字型来设计。原来Courier New的字体是IBM公司在1950年代设计给打印机使用的字体,后来这个字型成为整个打字机制造业的标准。Courier New是Courier的变体,比Courier更具机械味道。

Courier New

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相似。

Lucida Console

CSS写法:font-family: 'Lucida Console', Monaco, monospace;

 

15,  Garamond
Garamond(加拉蒙德)是一类西文衬线字体的总称,自16世纪40年代开始至今,有不少家公司和不少设计师参与到Garamond字体设计,如: Adobe Garamond, Monotype Garamond, Sioncini Garamond,和 Stempel Garamond等等。半肥猫以为:字体给人端庄典雅,有些古典的感受,在博物馆和历史性悠久的项目中使用,应该能够得到不错的效果。

Garamond

CSS写法:font-family: Garamond, serif;

 

16 ,  MS Sans Serif
微软系统自带字体。屏幕显示的像素字体。非衬线字体。

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

Palatino Linotype

CSS写法:font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;

 

 

19, Symbol

Symbol

CSS写法:font-family: Symbol, sans-serif;

 

 

20, Bookman Old Style

Bookman Old Style

CSS写法:font-family: 'Bookman Old Style', serif;

本文参考了WEB安全字体,但愿在Web编写过程当中这些核心的Web字体能对你有用。

 


总结几套实用而简单的font-family

font-family: Tahoma, Helvetica, Arial, sans-serif;

Tahoma 系的中性字体。推荐使用在13px以上的环境。

 

font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;

Verdana 系的宽扁字体。推荐在11px如下环境使用。

 

font-family: Geogia, Times New Roman, Times, serif;

衬线字体的不二之选。

 

font-family: Lucida Console, Monaco, Courier New, mono, monospace;

一系列等宽字体。写代码很好用。另外,若是以为Lucida Console太宽的话,能够换成比较窄的Lucida Sans Typewriter。话说老赵blog上的代码块使用的就是Lucida Sans Typewriter 哟~

- 你知道吗?

  • 字体的别名

    系统中的一个字体是容许有多种别名形式存在的。好比,在windows 下,Georgia 也能够用 Georgia MS 来命名,它们实际上是同一种字体。宋体的正式名称是SimSon,而"宋体"只是它的别名。

    按照规范,浏览器应该能自动识别字体的别名,并映射到正确的字体文件。好比,font-famliy: SimSon 和 font-family: "宋体" 应该具备等价的效果。惋惜,彷佛不少浏览器都不能正确执行前一条定义……

     

  • 何时在字体名称前面加引号

    你们来看这个字体样式定义:

    font-family: Times New Roman, 宋体, serif;

    不少人都会说,这个样式写法是错的,由于 Times New Roman 和宋体都应该用引号括起来,像下面这样:

    font-family: "Times New Roman", "宋体", serif;

    实际上呢,上面两种写法都是对的。和不少人想象中的不同,字体名称外面的引号其实并不是必须的。那么加引号和不加引号有什么区别呢?

    其实最大的不一样在于对字体名称中空白字符(如空格、制表符)的解释。

    不加引号的时候,浏览器对于字体名称中空白字符的解释应该和XML中同样,即忽略字体名称左右的空白字符,而且单词中间的空白字符被解释为一个空格。好比 font-family:         Times       New Roman                , serif; 会被解释成 font-family: Times New Roman, serif;


     

    加引号的时候,浏览器必须保留引号内全部的空白字符。若是写成 font-family: "Times       New Roman"; 那么浏览器不会显示 Times New Roman 字体,而是搜索一个叫作"Times       New Roman"的字体。


     

    至 于"宋体"这样的字体名称,由于中间没有空白字符,所以彻底没有必要加引号。可是考虑到并不是左右的操做系统都有汉字支持,而且并不是全部的程序员都会注意 css文件的正确编码问题,全部保险起见,通常会加上引号。固然,解决这种问题的最好方法是使用别名。好比宋体,其实应该写成SimSon,这样哪怕浏览 者的系统不支持中文,而且这个css文件被错误的编码成了GB2132也没问题,浏览器仍是知道这是宋体,而且作出正确的字体搜索。惋惜,不是全部浏览器 都支持就是了……

相关文章
相关标签/搜索