浅谈网页中的字体的设置

首先，我们应该明确，并不是你设置了这种字体，用户电脑便会以这种字体显示。如果用户电脑没有安装这种字体，那么它便会以你设置的第二种字体来渲染。
而且由于设计稿和平台的不同,导致了制作有时候无法还原设计稿，理清各种平台字体区别，有助于做出最好的选择。
在不同操作系统、不同游览器里面默认显示的字体是不一样的，并且相同字体在不同操作系统里面渲染的效果也不尽相同，那么如何设置字体显示效果会比较好呢?

一、选择字体需要注意的问题

1、字体的中英文写法：

我们在操作系统中常常看到宋体、微软雅黑这样的字体名称，但实际上这只是字体的显示名称，而不是字体文件的名称，一般字体文件都是用英文命名的，如SimSun、Microsoft Yahei。在大多数情况下直接使用显示名称也能正确的显示，但是有一些用户的特殊设置会导致中文声明无效。
因此，保守的做法是使用字体的字体名称（英文）或者两者兼写。如下示例：

font-family: STXihei, "Microsoft YaHei";
font-family: STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑";

2、声明英文字体：
绝大部分中文字体里都包含英文字母和数字，不进行英文字体声明是没有问题的，但是大多数中文字体中的英文和数字的部分都不是特别漂亮，所以建议也对英文字体进行声明。
由于英文字体中大多不包含中文，我们可以先进行英文字体的声明，这样不会影响到中文字体的选择，因此优先使用最优秀的英文字体，中文字体声明则紧随其次。如下示例：

font-family: Arial, "Microsoft YaHei";

3、照顾不同的操作系统：

英文、数字部分：
在默认的操作系统中，Mac和Win都会带有Arial, Verdana, Tahoma等几个预装字体，从显示效果来看，Tahoma要比Arial更加清晰一些，因此字体设置Tahoma最好放到前面，当找不到Tahoma时再使用Arial；而在Mac中，还拥有一款更加漂亮的Helvetica字体，所以为了照顾Mac用户有更好的体验，应该更优先设置Helvetica字体；Android系统下默认的无衬线字体就可以接受，因此无需单独设置。最后，英文、数字字体的最佳写法如下：

font-family: Helvetica, Tahoma, Arial;

中文部分：
在Win下，微软雅黑为大部分人最常使用的中文字体，由于很多人安装Office的缘故，Mac电脑中也会出现微软雅黑字体，因此把显示效果不错的微软雅黑加入到字体列表是个不错的选择；同样，为了保证Mac中更为优雅字体苹方（PingFang SC）、黑体-简（Heiti SC）、冬青黑体（ Hiragino Sans GB ）的优先显示，需要把这些字体放到中文字体列表的最前面；同时为了照顾到Linux操作系统的体验，还需要添加文泉驿微米黑字体。最后，中文字体部分最佳写法如下

font-family: "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";

中英文整合写法：

font-family: Helvetica, Tahoma, Arial, "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";
font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";

4、注意向下兼容
如果还需要考虑旧版本操作系统用户的话，不得不加上一些旧版操作系统存在的字体：Mac中的华文黑体、冬青黑体，Win中的黑体等。同样按照显示效果排列在列表后面，写法如下：

font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", STXihei, "Microsoft YaHei", SimHei, "WenQuanYi Micro Hei";

5、补充字体族名称
字体族大体上分为两类：sans-serif（无衬线体）和serif（衬线体），当所有的字体都找不到时，我们可以使用字体族名称作为操作系统最后选择字体的方向。一般非衬线字体在显示器中的显示效果会比较好，因此我们需要在最后添加 sans-serif，写法如下：

font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "MicrosoftYaHei", "WenQuanYi Micro Hei", sans-serif;

二、我们看一下大公司的常见写法

1、小米

font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","HeitiSC","WenQuanYi Micro Hei",sans-serif;

小米公司优先使用Helvetica Neue这款字体以保证最新版本Mac用户的最佳体验，选择了Arial作为Win下默认英文字体及Mac的替代英文字体；中文字体方面首选了微软雅黑，然后选择了冬青黑体及黑体-简作为Mac上的替代方案；最后使用文泉驿微米黑兼顾了Linux系统。

2、淘宝

font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;

其实从图中明显看出淘宝网的导航及内容有着大量的衬线字体，鉴于淘宝网站大部分字号比较小，显示效果也还可以接受。代码中可以看出淘宝使用了Tahoma、Arial作为首选英文字体，中文字体首选了冬青黑体，由于Win下没有预装该款字体，所以显示出了后面的宋体（5b8b4f53为汉字宋体用 unicode 表示的写法，不用SimSun是因为 Firefox 的某些版本和 Opera 不支持 SimSun的写法）

3、简书

font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "MicrosoftYaHei", "WenQuanYi Micro Hei", sans-serif;

自认为简书的阅读体验很棒，我们看看简书所用的字体，简书优先选择了lucida家族的系列字体作为英文字体，该系列字体在Mac和Win上都是预装的，并且有着不俗的表现；中文字体方面将冬青黑体作为最优先使用的字体，同样考虑了Linux系统。

三、附:css常用font-family

实例:
例1（小米米官网）：

font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;

例2（淘宝技术研发中心）：

font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',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）:

font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;

例6（简书）：

font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

HTML，CSS，font-family：中文字体的英文名称:
1.通用:

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

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

3.Windows的一些：

• 新細明體：PMingLiU
• 細明體：MingLiU
• 標楷體：DFKai-SB
• 黑体：SimHei
• 新宋体：NSimSun
• 仿宋：FangSong
• 楷体：KaiTi
• 仿宋_GB2312：FangSong_GB2312
• 楷体_GB2312：KaiTi_GB2312
• 微軟正黑體：Microsoft JhengHei
• 微软雅黑体：Microsoft YaHei

4.装Office会生出来的一些：

• 隶书：LiSu
• 幼圆：YouYuan
• 华文细黑：STXihei
• 华文楷体：STKaiti
• 华文宋体：STSong
• 华文中宋：STZhongsong
• 华文仿宋：STFangsong
• 方正舒体：FZShuTi
• 方正姚体：FZYaoti
• 华文彩云：STCaiyun
• 华文琥珀：STHupo
• 华文隶书：STLiti
• 华文行楷：STXingkai
• 华文新魏：STXinwei

5.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

参考文章:
CSS字体font-family的正确选择方案:点击这里
css常用font-family:点击这里
部分摘选, 详情推荐大家阅读原文