前言
最近钻研各大网站的font-family字体设置，发现每个网站的默认值都不雷同，甚至一些大网站也犯了很显著的谬误，阐明字体还是有很大学识的，值的咱们好好钻研。
不同的操作系统、不同浏览器下内嵌的默认字体是不同的，谬误的字体设置会导致页面在不同环境渲染的凌乱，抉择一套适合的字体是打造优良网页的第一步。通过本文，咱们会介绍字体的知识点，并摸索在PC和Mobile两端该如何正确的设置字体。
字体基础知识
字体的分类
- serif(衬线)
- sans-serif(无衬线)
- monospace(等宽)
- fantasy(梦幻)
- cuisive(草体)
这些不是指某一个字体，而是一个字体族，是一系列字体的汇合。咱们接触最多的就是衬线字体和无衬线字体。
serif(衬线字体) & sans-serif(无衬线字体)
Serif的意思是，在字的笔划开始及完结的中央有额定的装璜，而且笔画的粗细会有所不同。衬线字体的格调都比较突出，常见的衬线字体有Times New Roman、宋体。
Sans Serif字体没有这些额定的装璜，笔划粗细大抵差不多，字形端庄，横平竖直，常见的无衬线字体有Tahoma、Verdana、Arial、Helvetica、苹方、微软雅黑等等。
monospace(等宽字体)
等宽字体是指字符宽度雷同的字体，通常用于编辑器以及技术文章的代码块中。courier是最常见的等宽字体，而对于中文每个汉子都是等宽的。
fantasy(梦幻字体) & cuisive(草书字体)
在浏览器中应用的场景不多。
font-family属性
设置元素的字体，能够同时指定多个，如果浏览器不反对第一个字体，则会尝试下一个，能够设置字体或字体系列。
如：font-family: Arial, sans-serif;
如果不设置font-family则应用浏览器默认字体，如果设置的font-family有效，也会fallback到浏览器的默认字体。
常见字体介绍
Helvetica
苹果零碎反对的一种西文无衬线字体，是苹果生态中最罕用的一套西文字体。Helvetica Neue是Helvetica字体改善版本，减少了更多不同粗细与宽度的字形。
Arial
是为了与Helvetica竞争而设计的无衬线西文字体，表现形式和Helvetica相似，在不同零碎的浏览器都反对，兼容性十分好。
Tahoma
一种无衬线字体，间距较小，在不同零碎的浏览器都反对，兼容性良好，能够解决Helvetica和Arial所为人诟病的毛病，比方大写的 I 和小写的 L 难以分辨。
San Francisco
苹果于2017年推出一种无衬线字体，也是目前苹果零碎的默认西文字体，相比于Helvetica字体，San Francisco的字体格调更加简洁，缩小了一些润饰的细节，反对符号的整体居中，比方工夫显示，之前的 Helvetica 的冒号是不居中的。
最低兼容版本：ios9、macOS10.11
PingFang SC(苹方-简)
苹果专为中国用户打造的一个中文无衬线字体，在2017年和San Francisco一起推出，SC代表简体，同时还有台湾繁体和香港繁体，整体造型简洁好看，是苹果零碎默认的中文字体。
最低兼容版本：ios9、macOS10.11
Hiragino Sans GB(冬青黑体)、Heiti SC(黑体)
苹果零碎中较早的中文无衬线字体，为了兼容旧版macOS零碎，咱们个别用它们作为苹方字体的fallback。
Segoe UI
windows零碎下的一种无衬线西文字体，也是windows零碎的默认西文字体。
Microsoft YaHei(微软雅黑)
Windows零碎默认的中文字体，也是一套无衬线字体。macOS上的浏览器大都预装微软雅黑，然而safari浏览器没有。
ios和android零碎不反对微软雅黑，所以设置挪动端字体时能够疏忽微软雅黑。
宋体
一种中文衬线字体，windows 和 macOS都有反对，字体偏瘦，格调显著。
宋体也是windows XP及更早零碎的默认中文字体。
WenQuanYi Micro Hei(文泉驿微米黑)
Linux零碎下默认中文字体，个别为了兼容Linux零碎才会设置这个字体。
Roboto
Android零碎的默认西文字体，也是一种无衬线字体
Noto Sans (思源黑体)
Android零碎的默认中文字体，也是一种无衬线字体，由google推出的一款开源字体。
Apple Color Emoji
苹果产品的文字表情，在Mac和iOS零碎中到处都能够看到，也是咱们接触的最多的Emoji表情。
Segoe UI Emoji
Windows10零碎中的Emoji表情，黑描边格调，没有苹果的圆润和质感。
Noto Color Emoji
Google推出的表情，和苹果的较为相似，更加扁平。
浏览器默认字体
默认字体分为零碎默认字体和浏览器默认字体，这两者是不同的。
这里咱们探讨的是浏览器默认字体，零碎默认字体会在上面的system-ui中介绍。
当没有各元素指定font-family或者设置的font-family有效时，会fallback到浏览器默认字体。
PC端
PC端的浏览器反对设置不同的默认字体。
下图是chrome的配置选项，规范字体就是默认字体，当font-family属性没有设置时会启用这个字体。
因为Arial是西文字体，对中文有效，浏览器会抉择适合的中文字体，在Windows上个别为微软雅黑，在macOS个别为苹方。然而局部浏览器会依据默认字体的格调抉择近似的中文字体，Arial是无衬线字体，浏览器也会抉择一种无衬线字体适配中文，如果默认字体是衬线字体，那么浏览器就会抉择一种衬线中文字体，为了抹平这种差别，咱们通常在font-family最初设置sans-serif指定无衬线字体作为兜底。
挪动端
挪动端浏览器通常不反对指定默认字体。
ios的默认中文字体为苹方，当lang设置为zh-CN，西文也是苹方。当lang不设置或者设置为en时，西文默认字体为Times New Roman，一种衬线字体。
<!DOCTYPE html><html lang='zh-CN'>...android的字体略微简单，它的的默认字体为西文：Roboto，中文：Noto Sans (思源黑体)，但不同厂商可能会应用自定义的字体，比方小米局部手机应用的是小米兰亭。
android端lang设置为zh-CN或en时体现也有可能不同，尽管都是无衬线字体，但差别很显著。即使lang都设置为zh-CN，不同的安卓机上的默认西文字体体现也有可能是不同的，一个字形容：乱。
以上提到的挪动端系统版本：ios9+ android4+，更低版本的零碎不再兼容了
正是因为浏览器默认字体的简单体现出设置font-family的重要性。
system-ui
system-ui是一种通用字体系列，它抉择以后操作系统下的默认零碎字体，它的劣势在于和以后零碎应用的字体相匹配，能够让Web页面和App格调看起来更对立。
应用形式
font-family: system-ui;兼容性
system-ui推出的工夫较晚，但兼容性比拟不错，目前支流的浏览器都曾经反对。
下图是Can I Use上统计的兼容信息
-apple-system-apple-system是system-ui的兼容写法，只在ios和macOS上的safari、Firefox、webview等环境下反对。
BlinkMacSystemFont
也是system-ui的兼容写法，只在macOS chrome下反对，次要针对chrome 53-55版本
成果
在ios和macOS上，system-ui指向的中文字体为苹方，西文字体为San Francisco。android零碎下中文通常为Noto Sans (思源黑体)，西文字体为Roboto。windows零碎上个别为微软雅黑，然而在局部windows上的字体会呈现问题，所以windows零碎上不倡议应用system-ui。
sans-serif(无衬线字体)
在现行支流终端设备中，无衬线体比有衬线体更易读，无衬线体更适宜作为网页的默认全局字体设置，所以sans-serif个别用在字体定义的最初作为兜底。
PC端浏览器能够在设置中指定sans-serif字体。
挪动端浏览器不能在设置中指定sans-serif字体，它们会依据lang指定的语言环境抉择适合的字体，和system-ui指定的字体不肯定雷同。
每个零碎都会带有无衬线字体，所以sans-serif个别放在最初，sans-serif之后的字体都不会失效，除了Emoji字体。
书写字体规定
在介绍字体规定前，有几点是须要留神的：
1、不同平台，预置的字体并不相同。比方Helvetica和苹方也只有苹果零碎内置，微软雅黑只有windows零碎内置，android 和 iOS 零碎内置的字体各不相同。
2、字体是有版权的，然而如果没有援用内部字体文件（如 Web font 或者内嵌到 App 中），而仅仅是在 CSS 中指定字体名称，不须要购买受权，因为其只是一段申明，示意冀望浏览器优先应用某种字体渲染文本。
3、中文网站波及两种文字类型：西文字体和中文字体，西文字体包含英文数字等，不包含中文，然而中文字体个别包含英文和数字，所以要先设置西文字体，后设置中文。
4、如果字体蕴含空格或者是中文字体，须要增加引号。
5、大部分字体全名中会蕴含字体粗细、斜体（italic）、长体（condensed）等具体属性，但个别不倡议间接应用，字体的格调应该在 CSS 中通过 font-weight、font-style、font-stretch等属性指定，由浏览器决定理论渲染的字体。
6、font-family属于可继承属性，全局的font-family个别设置在body元素上。
咱们能够总结字体定义的大略规定如下：
1、西文在前，中文在后
中文字体大多都蕴含西文，但西文的局部又不难看，而西文不蕴含中文，通常先定义西文后定义中文以达到更优的显示成果。
2、优先应用system-uisystem-ui应用以后零碎的默认字体，让web页面和操作系统的格调对立，体验更好。
3、兼顾不同的操作系统
抉择字体的时候要思考不同的操作系统，还须要思考旧版本操作系统的用户。
即使是同一个字体在不同的操作下也会有轻微的差异，所以咱们要尽量做到雷同零碎应用同一种字体，保障同一个零碎下的字体一致性。对于不同零碎尽量保障字体格调靠近，比方都应用无衬线字体。
为了保障苹果零碎中应用更优雅的中文字体，优先申明苹方字体, 对于不反对苹方的低版本macOS，应用Hiragino Sans GB(冬青黑体)字体做适配。
如果须要兼容Linux零碎，还须要增加WenQuanYi Micro Hei(文泉驿微米黑)字体。
如果须要兼容不同平台的表情符号，个别在sans-serif后增加"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"。
4、以serif或sans-serif字体族结尾
为了保障在各种不同环境或条件下显示失常，咱们个别将sans-serif放在字体的前面，非衬线字体在显示器中的显示成果更好。
5、简洁实用
字体设置并不是越多越好，在能满足设计需要的状况下尽量简洁。雷同零碎下中西文字体各有一个fallback即可，不须要太多。
字体设置
通过字体的知识点和字体设置标准介绍，咱们总结出全局默认字体的设置形式。
挪动端
兼容版本：ios9+、android4+
举荐写法：
font-family: system-ui, -apple-system, Arial, sans-serif;解读：优先应用system-ui，应用Arial做西文字体的fallback是因为它和Helvetica字体类似，并且在ios和android支持性很好。
PC端
举荐写法1：
macOS零碎优先应用零碎字体
font-family: -apple-system, BlinkMacSystemFont, Tahoma, Arial, "Hiragino Sans GB", "Microsoft YaHei", sans-serif;windows系统对system-ui兼容性不好，所以只有
举荐写法2：
指定字体
font-family: Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;windows零碎电脑屏幕分辨率广泛不高，Tahoma字体在小字号下构造清晰端整、浏览辨识容易，在不同操作系统支持性好，所以作为首选字体，如果零碎没有预装Tahoma，则应用Arial作为代替。但两者差异不大，Arial优先级提前也行。
须要须要兼容Linux零碎和表情符号，能够增加WenQuanYi Micro Hei和Emoji字体，如：
font-family: -apple-system, BlinkMacSystemFont, Tahoma, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";如想突出macOS和windows的字体特色，能够在Tahoma后面设置Helvetica或Segoe UI为首选字体，如：
font-family: "Helvetica Neue", "Segoe UI", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;留神：
字体的设置没有固定规范，须要依据业务状况进行定夺，以上只是举荐写法，如果设计师有要求能够在此基础上进行改变。
指定元素字体
当给某个元素设置了font-faimily后，全局默认字体则对这个元素有效，这时也要思考字体兼容问题，最好指定一个fallback字体，并以sans-serif结尾。
div { font-faimiy: "PingFang SC", sans-serif;}各大网站font-family点评
首先申明，以下仅为个人观点，如有谬误欢送指出????
以下数据取值工夫：2020-11-25
淘宝首页
tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif\5b8b\4f53为宋体的Unicode编码，这样能够无效的防止浏览器解释CSS代码时候呈现乱码的问题。
淘宝首页的默认字体十分简洁，然而在macOS上应用的中文字体为无衬线的冬青黑体，而在windows上应用的是衬线字体宋体，两个零碎字体体现差别还是很显著的，可能他们有本人的思考。
京东首页
Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif京东首页应用微软雅黑作为首选字体，这样中英文都会为微软雅黑，在macOS safari默认是不反对微软雅黑所以会fallback到Heiti SC(黑体)，而黑体作为较早版本macOS的默认中文字体因为喇叭口设计被诟病已久。当然京东这么设置必定是有他们的思考，然而中文字体放在tahoma、arial等西文字体前还是不倡议的。
天猫首页
"Microsoft YaHei",SimSun,'\5b8b\4f53',sans-serifSimSun也是宋体
天猫首页默认字体设置和京东相似，首选中英文都是微软雅黑，下面说到过macOS safari默认是不反对微软雅黑，所以会fallback到宋体，宋体是衬线字体，导致macOS上其余浏览器和safari浏览器字体差别很大。
下图别离为macOS10.14.5下，chrome和safari的成果
腾讯网首页
'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif腾讯网首页也是以微软雅黑作为中西文首选字体，并且在不同零碎上都有相应的fallback，实践上是不错的，但还是那句话，除非设计师或业务须要，不倡议以中文字体结尾。
新浪微博
Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif新浪微博的默认字体集体感觉是十分好的。
掘金首页
-apple-system,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial掘金这里犯了一个非常明显的谬误，在sans-serif后定义了其它中英文字体，因为sans-serif后定义的中英文字体都是有效的，掘金作为大神星散的中央，犯这么低级的谬误切实不应该。
segmentfault首页
-apple-system,"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","WenQuanYi Micro Hei","Microsoft Yahei",sans-serif集体感觉很好。
知乎首页
-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serifSource Han Sans SC、Noto Sans CJK SC这两个都是思源黑体，尽管是开源字体，然而在大部分零碎中都没有内置，这里设置是不是没必要？有晓得的同学能够解答一下吗？
头条首页
PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,Helvetica Neue,Arial,sans-serif也是如同下面提到的，Helvetica Neue,Arial等西文字体倡议放在后面。
在此重申，以上仅是集体教训观点，如有谬误欢送指出????
参考链接
Web 字体 font-family 再探秘
你该晓得的字体 font-family
字体，以及 font-family
如何优雅的抉择字体(font-family)
从Web字体谈起——默认字体款式设置
PingFang SC 不应该作为挪动端网页字体的首选项
iOS 9 字体的介绍与应用