大家都知道，在不同操作系统、不同游览器里面默认显示的字体是不一样的，并且相同字体在不同操作系统里面渲染的效果也不尽相同，那么如何设置字体显示效果会比较好呢？下面我们逐步的分析一下：
例1（小米米官网）：font-family: "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）:font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;
一、首先我们看看各平台的默认字体情况
1、Window下：
宋体（SimSun）：Win下大部分游览器的默认字体，宋体在小字号下（如12px、14px）的显示效果还可以接受，但是字号一大就非常糟糕了，所以使用的时候要注意。
微软雅黑（"Microsoft Yahei"）：从 Vista 开始，微软提供了这款新的字体，一款无衬线的黑体类字体，并且拥有Regular、Bold 两种粗细的字重，显著提高了字体的显示效果。现在这款字体已经成为Windows游览器中最值得使用的中文字体。从Win8开始，微软雅黑又加入了 Light 这款更细的字重，对于喜欢细字体的设计、开发人员又多了一个新的选择。
Arial：Win平台上默认的无衬线西文字体（为什么要说英文字体后面会解释），有多种变体，显示效果一般。
Tahoma：十分常见的无衬线字体，被采用为Windows 2000、Windows XP、Windows Server 2003及Sega游戏主机Dreamcast等系统的预设字型，显示效果比Arial要好。
Verdana：无衬线字体，优点在于它在小字上仍结构清晰端整、阅读辨识容易。
其他：Windows 下默认字体列表：微软官网、维基百科、Office字体
结论：微软雅黑为Win平台上最值得选择的中文字体，但非游览器默认，需要设置；西文字体的选择以Arial、Tahoma等无衬线字体为主。
2、Mac OS下：
华文黑体（STHeiti）、华文细黑（STXihei）：属于同一字体家族系列，OS X 10.6 之前的简体中文系统界面默认字体，也是目前Chrome游览器下的默认字体，有 Regular 和 Bold 两个字重，显示效果可以接受，华文细黑也曾是我最喜欢的字体之一。
黑体-简（Heiti SC）：从 10.6 开始，黑体-简代替华文黑体用作简体中文系统界面默认字体，苹果生态最常用的字体之一，包括iPhone、iPad等设备用的也是这款字体，显示效果不错，但是喇叭口设计遭人诟病。
冬青黑体（ Hiragino Sans GB ）：听说又叫苹果丽黑，日文字体Hiragino KakuGothic的简体中文版，简体中文有 常规体和 粗体 两种，冬青黑体是一款清新的专业印刷字体，小字号时足够清晰，拥有很多人的追捧。
Times New Roman：Mac平台Safari下默认的字体，是最常见且广为人知的西文衬线字体之一，众多网页浏览器和文字处理软件都是用它作为默认字体。
Helvetica、Helvetica Neue：一种被广泛使用的传奇般的西文字体（这货还有专门的记录片呢），在微软使用山寨货的Arial时，乔布斯却花费重金获得了Helvetica苹果系统上的使用权，因此该字体也一直伴随着苹果用户，是苹果生态中最常用的西文字体。Helvetica Neue为Helvetica的改善版本，且增加了更多不同粗细与宽度的字形，共拥有51种字体版本，极大的满足了日常的使用。
苹方（PingFang SC）：在Mac OS X EL Capitan上，苹果为中国用户打造了一款全新中文字体--苹方，去掉了为人诟病的喇叭口，整体造型看上去更加简洁，字族共六枚字体：极细体、纤细体、细体、常规体、中黑体、中粗体。
San Francisco：同样是Mac OS X EL Capitan上最新发布的西文字体，感觉和Helvetica看上去差别不大，目前已经应用在Mac OS 10.11+、iOS 9.0+、watch OS等最新系统上。
其他：Mac下默认字体列表：苹果官网、维基百科
结论：目前苹方和San Francisco为苹果推出的最新字体，显示效果也最为优雅，但只有最新系统才能支持，而黑体-简和Helvetica可以获得更多系统版本支持，显示效果也相差无几，可以接受。
3、Android系统：
Droid Sans、Droid Sans Fallback：Droid Sans为安卓系统中默认的西文字体，是一款人文主义无衬线字体，而Droid Sans Fallback则是包含汉字、日文假名、韩文的文字扩展支持。
结论：Droid Sans为默认的字体，并结合了中英文，无需单独设置。
4、iOS系统：
iOS系统的字体和Mac OS系统的字体相同，保证了Mac上的字体效果，iOS设备就没有太大问题。
5、Linux：
文泉驿点阵宋体：类似宋体的衬线字体，一般不推荐使用。
文泉驿微米黑：几乎是 Linux 社区现有的最佳简体中文字体。
二、选择字体需要注意的问题
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";
加入了 STXihei（华文细黑）和 SimHei（黑体）。
5、补充字体族名称
字体族大体上分为两类：sans-serif（无衬线体）和serif（衬线体），当所有的字体都找不到时，我们可以使用字体族名称作为操作系统最后选择字体的方向。一般非衬线字体在显示器中的显示效果会比较好，因此我们需要在最后添加 sans-serif，写法如下：。
font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
三、我们看一下大公司的常见写法（2016.07查看）
1、小米
font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi MicroHei",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", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
自认为简书的阅读体验很棒，我们看看简书所用的字体，简书优先选择了lucida家族的系列字体作为英文字体，该系列字体在Mac和Win上都是预装的，并且有着不俗的表现；中文字体方面将冬青黑体作为最优先使用的字体，同样考虑了Linux系统。
各大公司的字体设置大同小异，这里不再一一举例查看，有兴趣的可以自己多多查看。
四、其他的一些注意点
1、字体何时需要添加引号
当字体具体某个取值中若有一种样式名称包含空格，则需要用双引号或单引号表示，如：
font-family: "Microsoft YaHei", "Arial Narrow", sans-serif;
如果书写中文字体名称为了保证兼容性也会添加引号，如：
font-family: "黑体-简", "微软雅黑", "文泉驿微米黑";
2、引用外部字体
大多数的中文字体由于版权原因不能随意使用，这里推荐一个免版权而且漂亮的中文字体思源黑体，该字体为Adobe与Google推出的一款开源字体， 有七种字体粗细（ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy），完全支持日文、韩文、繁体中文和简体中文，字形优美，依稀记得小米公司好像有使用过。鉴于中文字体的体积比较大（一般字库全一点的中文字体动辄几Mb），所以较少人会使用外部字体，如果真的需要引入，也可以考虑通过工具根据页面文字的使用多少单独生成中文字体，以减小文件大小。
五、最后，推荐写法
由于每个人的审美不一样，钟爱的字体也会有所有不同，这里给出我个人的常用写法：
font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
另外推荐两个github上的关于中文字体和排版的项目：
Fonts.css -- 跨平台中文字体解决方案
typo.css -- 中文网页重设与排版：一致化浏览器排版效果
--参考资料
如何保证网页的字体在各平台都尽量显示为最高质量的黑体？
Web 中文字体应用指南
"5b8b4f53"的意思
windows常见内置中文字体
字体中文名字体英文名字体应用宋体SimSun（浏览器默认）中文名
英文名
浏览器默认
黑体SimHei中文名
英文名
浏览器默认
微软雅黑Microsoft Yahei中文名
英文名
浏览器默认
微软正黑体Microsoft JhengHei中文名
英文名
浏览器默认
楷体KaiTi中文名
英文名
浏览器默认
新宋体NSimSun中文名
英文名
浏览器默认
仿宋FangSong中文名
英文名
浏览器默认
OS X常见内置中文字体
字体中文名字体英文名字体应用苹方PingFang SC中文名
英文名
浏览器默认
华文黑体STHeiti中文名
英文名
浏览器默认
华文楷体STKaiti中文名
英文名
浏览器默认
华文宋体STSong中文名
英文名
浏览器默认
华文仿宋STFangsong中文名
英文名
浏览器默认
华文中宋STZhongsong中文名
英文名
浏览器默认
华文琥珀STHupo中文名
英文名
浏览器默认
华文新魏STXinwei中文名
英文名
浏览器默认
华文隶书STLiti中文名
英文名
浏览器默认
华文行楷STXingkai中文名
英文名
浏览器默认
冬青黑体简Hiragino Sans GB中文名
英文名
浏览器默认
兰亭黑-简Lantinghei SC中文名
英文名
浏览器默认
翩翩体-简Hanzipen SC中文名
英文名
浏览器默认
手札体-简Hannotate SC中文名
英文名
浏览器默认
宋体-简Songti SC中文名
英文名
浏览器默认
娃娃体-简Wawati SC中文名
英文名
浏览器默认
魏碑-简Weibei SC中文名
英文名
浏览器默认
行楷-简Xingkai SC中文名
英文名
浏览器默认
雅痞-简Yapi SC中文名
英文名
浏览器默认
圆体-简Yuanti SC中文名
英文名
浏览器默认
office安装后新增字体
字体中文名字体英文名字体应用幼圆YouYuan中文名
英文名
浏览器默认
隶书LiSu中文名
英文名
浏览器默认
华文细黑STXihei中文名
英文名
浏览器默认
华文楷体STKaiti中文名
英文名
浏览器默认
华文宋体STSong中文名
英文名
浏览器默认
华文仿宋STFangsong中文名
英文名
浏览器默认
华文中宋STZhongsong中文名
英文名
浏览器默认
华文彩云STCaiyun中文名
英文名
浏览器默认
华文琥珀STHupo中文名
英文名
浏览器默认
华文新魏STXinwei中文名
英文名
浏览器默认
华文隶书STLiti中文名
英文名
浏览器默认
华文行楷STXingkai中文名
英文名
浏览器默认
方正舒体FZShuTi中文名
英文名
浏览器默认
方正姚体FZYaoti中文名
英文名
浏览器默认
开源字体
字体中文名字体英文名字体应用思源黑体Source Han Sans CN中文名
英文名
浏览器默认
思源宋体Source Han Serif SC中文名
英文名
浏览器默认
文泉驿微米黑WenQuanYi Micro Hei中文名
英文名
浏览器默认
版权字体（汉仪）
字体中文名字体英文名字体应用汉仪旗黑HYQihei 40S中文名
英文名
浏览器默认
汉仪旗黑HYQihei 50S中文名
英文名
浏览器默认
汉仪旗黑HYQihei 60S中文名
英文名
浏览器默认
汉仪大宋简HYDaSongJ中文名
英文名
浏览器默认
汉仪楷体HYKaiti中文名
英文名
浏览器默认
汉仪家书简HYJiaShuJ中文名
英文名
浏览器默认
汉仪PP体简HYPPTiJ中文名
英文名
浏览器默认
汉仪乐喵体简HYLeMiaoTi中文名
英文名
浏览器默认
汉仪小麦体HYXiaoMaiTiJ中文名
英文名
浏览器默认
汉仪程行体HYChengXingJ中文名
英文名
浏览器默认
汉仪黑荔枝HYHeiLiZhiTiJ中文名
英文名
浏览器默认
汉仪雅酷黑WHYYaKuHeiW中文名
英文名
浏览器默认
汉仪大黑简HYDaHeiJ中文名
英文名
浏览器默认
汉仪尚魏手书WHYShangWeiShouShuW中文名
英文名
浏览器默认
版权字体（方正）
字体中文名字体英文名字体应用方正粗雅宋简体FZYaSongS-B-GB中文名
英文名
浏览器默认
方正报宋简体FZBaoSong-Z04S中文名
英文名
浏览器默认
方正粗圆简体FZCuYuan-M03S中文名
英文名
浏览器默认
方正大标宋简体FZDaBiaoSong-B06S中文名
英文名
浏览器默认
方正大黑简体FZDaHei-B02S中文名
英文名
浏览器默认
方正仿宋简体FZFangSong-Z02S中文名
英文名
浏览器默认
方正黑体简体FZHei-B01S中文名
英文名
浏览器默认
方正琥珀简体FZHuPo-M04S中文名
英文名
浏览器默认
方正楷体简体FZKai-Z03S中文名
英文名
浏览器默认
方正隶变简体FZLiBian-S02S中文名
英文名
浏览器默认
方正隶书简体FZLiShu-S01S中文名
英文名
浏览器默认
方正美黑简体FZMeiHei-M07S中文名
英文名
浏览器默认
方正书宋简体FZShuSong-Z01S中文名
英文名
浏览器默认
方正舒体简体FZShuTi-S05S中文名
英文名
浏览器默认
方正水柱简体FZShuiZhu-M08S中文名
英文名
浏览器默认
方正宋黑简体FZSongHei-B07S中文名
英文名
浏览器默认
方正宋三简体FZSong中文名
英文名
浏览器默认
方正魏碑简体FZWeiBei-S03S中文名
英文名
浏览器默认
方正细等线简体FZXiDengXian-Z06S中文名
英文名
浏览器默认
方正细黑一简体FZXiHei I-Z08S中文名
英文名
浏览器默认
方正细圆简体FZXiYuan-M01S中文名
英文名
浏览器默认
方正小标宋简体FZXiaoBiaoSong-B05S中文名
英文名
浏览器默认
方正行楷简体FZXingKai-S04S中文名
英文名
浏览器默认
方正姚体简体FZYaoTi-M06S中文名
英文名
浏览器默认
方正中等线简体FZZhongDengXian-Z07S中文名
英文名
浏览器默认
方正准圆简体FZZhunYuan-M02S中文名
英文名
浏览器默认
方正综艺简体FZZongYi-M05S中文名
英文名
浏览器默认
方正彩云简体FZCaiYun-M09S中文名
英文名
浏览器默认
方正隶二简体FZLiShu II-S06S中文名
英文名
浏览器默认
方正康体简体FZKangTi-S07S中文名
英文名
浏览器默认
方正超粗黑简体FZChaoCuHei-M10S中文名
英文名
浏览器默认
方正新报宋简体FZNew BaoSong-Z12S中文名
英文名
浏览器默认
方正新舒体简体FZNew ShuTi-S08S中文名
英文名
浏览器默认
方正黄草简体FZHuangCao-S09S中文名
英文名
浏览器默认
方正少儿简体FZShaoEr-M11S中文名
英文名
浏览器默认
方正稚艺简体FZZhiYi-M12S中文名
英文名
浏览器默认
方正细珊瑚简体FZXiShanHu-M13S中文名
英文名
浏览器默认
方正粗宋简体FZCuSong-B09S中文名
英文名
浏览器默认
方正平和简体FZPingHe-S11S中文名
英文名
浏览器默认
方正华隶简体FZHuaLi-M14S中文名
英文名
浏览器默认
方正瘦金书简体FZShouJinShu-S10S中文名
英文名
浏览器默认
方正细倩简体FZXiQian-M15S中文名
英文名
浏览器默认
方正中倩简体FZZhongQian-M16S中文名
英文名
浏览器默认
方正粗倩简体FZCuQian-M17S中文名
英文名
浏览器默认
方正胖娃简体FZPangWa-M18S中文名
英文名
浏览器默认
方正宋一简体FZSongYi-Z13S中文名
英文名
浏览器默认
方正剪纸简体FZJianZhi-M23S中文名
英文名
浏览器默认
方正流行体简体FZLiuXingTi-M26S中文名
英文名
浏览器默认
方正祥隶简体FZXiangLi-S17S中文名
英文名
浏览器默认
方正粗活意简体FZCuHuoYi-M25S中文名
英文名
浏览器默认
方正胖头鱼简体FZPangTouYu-M24S中文名
英文名
浏览器默认
方正卡通简体FZKaTong-M19S中文名
英文名
浏览器默认
方正艺黑简体FZYiHei-M20S中文名
英文名
浏览器默认
方正水黑简体FZShuiHei-M21S中文名
英文名
浏览器默认
方正古隶简体FZGuLi-S12S中文名
英文名
浏览器默认
方正幼线简体FZYouXian-Z09S中文名
英文名
浏览器默认
方正启体简体FZQiTi-S14S中文名
英文名
浏览器默认
方正小篆体FZXiaoZhuanTi-S13T中文名
英文名
浏览器默认
方正硬笔楷书简体FZYingBiKaiShu-S15S中文名
英文名
浏览器默认
方正毡笔黑简体FZZhanBiHei-M22S中文名
英文名
浏览器默认
方正硬笔行书简体FZYingBiXingShu-S16S中文名
英文名
浏览器默认
web，pc端及手机端支持的字体
页面地址为：《点击此处》
以上为引致张鑫旭的网站内容，仅为了以后方便查看，如有不当，请指出谅解！
手机端字体选择：
手机端支持的字体比较少，对于要求的字体一般如何定义？
相信大家会想到 @font-face 定义为微软雅黑字体并存放到 WEB 服务器上，在需要使用时被自动下载
@font-face {
font-family: 'MicrosoftYaHei';
src: url('MicrosoftYaHei.eot'); /* IE9 Compat Modes */
src: url('MicrosoftYaHei.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('MicrosoftYaHei.woff') format('woff'), /* Modern Browsers */
url('MicrosoftYaHei.ttf') format('truetype'), /* Safari, Android, iOS */
url('MicrosoftYaHei.svg#MicrosoftYaHei') format('svg'); /* Legacy iOS */
}
雅黑字体问题虽然解决了，但也带来了影响，一来消耗用户的流量，二来对页面的打开速度造成了延迟。
三大手机系统的字体
ios 系统
默认中文字体是Heiti SC默认英文字体是Helvetica默认数字字体是HelveticaNeue无微软雅黑字体
android 系统
默认中文字体是Droidsansfallback默认英文和数字字体是Droid Sans无微软雅黑字体
winphone 系统
默认中文字体是Dengxian(方正等线体)默认英文和数字字体是Segoe无微软雅黑字体
结果就是：
各个手机系统有自己的默认字体，且都不支持微软雅黑如无特殊需求，手机端无需定义中文字体，使用系统默认英文字体和数字字体可使用 Helvetica ，三种系统都支持
转载于：https://segmentfault.com/a/1190000006110417
转载于： http://blog.csdn.net/cddcj/article/details/70739481
转载于： https://www.cnblogs.com/jing-blog/p/6877488.html