网页常用安全字体和css font-family 及各大主流网站字体

CrazyKenCN 2019-07-02

网页设计中常用的19个Web安全字体

在windows中的常用字体有：simsun.ttc（宋体），mingliu.ttc（细明体），msyh.ttf（微软雅黑），msyhbd.ttf（微软雅黑加黑），segoeui.ttf（win7默认英文字体），simhei.ttf（黑体），times.ttf（times new roman），timesbd.ttf（times new roman加黑）这些复制到myfonts文件夹。

1, Arial

微软公司的网页核心字体之一，最常用的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;

@常用字体对应表：

HTML，CSS，" background-">宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft YaHei
微软正黑体 Microsoft JhengHei
新宋体 NSimSun
新细明体 PMingLiU
细明体 MingLiU
标楷体 DFKai-SB
仿宋 FangSong
楷体 KaiTi
仿宋_GB2312 FangSong_GB2312
楷体_GB2312 KaiTi_GB2312

宋体：SimSuncss中中文字体（""/>Mac OS的一些：
华文细黑：STHeiti Light [STXihei]
华文黑体：STHeiti
华文楷体：STKaiti
华文宋体：STSong
华文仿宋：STFangsong
儷黑 Pro：LiHei Pro Medium
儷宋 Pro：LiSong Pro Light
標楷體：BiauKai
蘋果儷中黑：Apple LiGothic Medium
蘋果儷細宋：Apple LiSung Light
Windows的一些：
新細明體：PMingLiU
細明體：MingLiU
標楷體：DFKai-SB
黑体：SimHei
新宋体：NSimSun
仿宋：FangSong
楷体：KaiTi
仿宋_GB2312：FangSong_GB2312
楷体_GB2312：KaiTi_GB2312
微軟正黑體：Microsoft JhengHei
微软雅黑体：Microsoft YaHei
装Office会生出来的一些：
隶书：LiSu
幼圆：YouYuan
华文细黑：STXihei
华文楷体：STKaiti
华文宋体：STSong
华文中宋：STZhongsong
华文仿宋：STFangsong
方正舒体：FZShuTi
方正姚体：FZYaoti
华文彩云：STCaiyun
华文琥珀：STHupo
华文隶书：STLiti
华文行楷：STXingkai
华文新魏：STXinwei

@网站应用：
1，京东body和字体初始化代码（借鉴）：
a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var {


}
body {
    background: #fff none repeat scroll 0 0;

    font: 12px/150% Arial,Verdana,"宋体";
}
2，黄淮字体初始化代码(反面教材)：
body {


   宋体","SimSun";
    font-size: 12px;

}
---宋体在显示英文时很丑，例如小写的g
3，物通网字体初始化代码：
body {
    background: #fff none repeat scroll 0 0;

   宋体";
    font-size: 12px;



}
4，新一站body和字体初始化代码（借鉴）：
body, html {
   Hiragino Sans GB",simsun,sans-serif;
    font-size: 12px;
    height: 100%;

}
a, abbr, acronym, address, article, aside, audio, blockquote, body, button, canvas, caption, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, iframe, img, ins, label, legend, li, mark, menu, meter, nav, object, ol, output, p, pre, progress, q, s, section, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, u, ul, var, video {



}
5，淘宝body和字体初始化代码（借鉴）：
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {


}
body, button, input, select, textarea {
    font: 12px/1.5 tahoma,arial,"Hiragino Sans GB",宋体,sans-serif;
}
6，锤子科技body和字体初始化代码（借鉴）：
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {


}
body {

   Hiragino Sans GB","Microsoft Yahei","微软雅黑",STHeiti,"华文细黑",sans-serif;
    font-size: 14px;
}

6，新浪body和字体初始化代码（借鉴）：
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {


}
body {
    background: #fff none repeat scroll 0 0;

    font: 12px/20px "SimSun","宋体","Arial Narrow",HELVETICA;

}
.main-nav {
   Microsoft YaHei","微软雅黑","SimSun","宋体";
}
body, td, th {

}
---整站大部分用的是宋体16x/26x

@CSS设置字体方法

1，CSS如何控制字间距？

在需要设置的CSS标签下加入一下代码即可。具体是哪个自己配置测试下。

@CSS,"cnblogs_post_body" >

转载自http://www.zreading.cn/ican/2014/10/css-"">例1（小米米官网）：Arial","Microsoft YaHei","黑体","宋体",sans-serif;

例2（淘宝技术研发中心）：font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;

例3（加网）：font: 14px/1.5 'Microsoft YaHei',arial,tahoma,\5b8b\4f53,sans-serif;

例4（淘宝UED）：font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;

例5（一淘UX）:Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;

font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;

---总结百家所长：font: 12px/150% Tahoma,Helvetica,Arial,Verdana,"Microsoft YaHei","SimSun","宋体";

Windows 中的中文字体。
在默认情况下，也就是未自行安装新字体或者 Office 等文字处理软件的情况下，Windows 默认提供下列字体：
Windows 95/98/98SE 宋体、黑体、楷体_GB2312、仿宋_GB2312
Windows XP/2000/2003/ME/NT 宋体/新宋体、黑体、楷体_GB2312、仿宋_GB2312 (Windows XP SP3 宋体-PUA)
Windows Vista/7/2008 宋体/新宋体、黑体、楷体、仿宋、微软雅黑、SimSun-ExtB
那么每种字体能显示那些汉字呢？
Vista 之前的 Windows 中宋体/新宋体、黑体支持 GBK 1.0 字符集，
楷体_GB2312、仿宋_GB2312 支持 GB2312-80 字符集。
（注：Windows 3.X 只能支持 GB2312-80 字符集）
Vista 及之后的 Windows 中宋体/新宋体、黑体、楷体、仿宋、微软雅黑支持 GB18030-2000 字符集，
SimSun-ExtB 只支持 GB18030-2005 字符集扩展 B 部分。
下面对字符集进行简单的介绍：
GB2312-80 < GBK 1.0 < GB18030-2000 < GB18030-2005
GB2312-80 中的字符数量最少，GB18030-2005 字符数量最多。
GB2312-80 是最早的版本，字符数比较少；
GBK 1.0 中的汉字大致与 Unicode 1.1 中的汉字数量相同；
GB18030-2000 中的汉字大致与 Unicode 3.0 中的汉字数量相同，主要增加了扩展 A 部分；
GB18030-2005 中的汉字大致与 Unicode 4.1 中的汉字数量相同，主要增加了扩展 B 部分；
由于 Unicode 5.2 的发布，估计 GB18030 会在近期发布新版本，增加扩展 C 部分。
需要说明的是在 GB18030 中扩展 B 部分并不是强制标准。
如果想查看 GB18030 的标准文本，请访问 http://www.gb168.cn 中的强标阅读。
如果想了解 Unicode 的内容，请访问 http://www.unicode.org。
现在纠正网上普遍的一个错误：
GB18030-2000 和 GB18030-2005 都不支持单字节的欧元符号
与简体中文有关的代吗页如下：
936 gb2312 简体中文(GB2312)————其实是GBK
10008 x-mac-chinesesimp 简体中文(Mac)
20936 x-cp20936 简体中文(GB2312-80)
50227 x-cp50227 简体中文(ISO-2022)
51936 EUC-CN 简体中文(EUC)
52936 hz-gb-2312 简体中文(HZ)
54936 GB18030 简体中文(GB18030)
补充：
使用楷体_GB2312、仿宋_GB2312后，在 Windows 7/Vista/2008 中可能不再显示为对应的字体。
这是因为 Windows 7/Vista/2008 中有楷体、仿宋，默认情况下没有楷体_GB2312、仿宋_GB2312，字体名称相差“_GB2312”。

@总结：
1，Arial出镜率最高，一般在第二位，Arial 确实是前 ClearType 时代 Windows 里最好的几个
正文字体之一（还有 Verdana 和 Tahoma 等）。
2，其次是Tahoma，3个大网站把它放在第一位。
3，宋体，"SimSun"---微软宋体，一般放在最后两位。
4，总结，使用原则------Tahoma，Arial，Verdana可以放在前边，宋体放在最后。其他可以尝试用下微软雅黑等字体。

@字体名称最好写成英文，否则编码问题有些地区可能看到的是乱码
1，simsun=宋体
2，在西方国家罗马字母阵营中，字体分为两大种类：Sans Serif(偏粗，厚)和Serif(偏细)
---Verdana等则属于Sans Serif字体。对中文而言，同样存在这两大种类，很明显，
宋体、细明体(繁体中常用)等就属于Serif，而黑体、幼圆等则属于Sans Serif。
3，Microsoft Yahei微软雅黑
4，tahoma字体，Tahoma和Verdana师出同门，同为名设计师马修·卡特的作品。
---xyz首选字体
5，Arial，xyz次选字体
6，不会设计，仿好的网站，例如新一站的字体初始化代码：Hiragino Sans GB","simsun",sans-serif;