不同的操作系统、不同浏览器下内嵌的默认字体是不同的，错误的字体设置会导致页面在不同环境渲染的混乱，选择一套合适的字体是打造优秀网页的第一步。通过本文，我们会介绍字体的知识点，并探索在PC和Mobile两端该如何正确的设置字体。
一、字体基础知识
1、字体的分类
- serif(衬线)
- sans-serif(无衬线)
- monospace(等宽)
- fantasy(梦幻)
- cuisive(草体)
这些不是指某一个字体，而是一个字体族，是一系列字体的集合，我们接触最多的就是衬线字体和无衬线字体。
2、serif(衬线字体) & sans-serif(无衬线字体)
Serif的意思是，在字的笔划开始及结束的地方有额外的装饰，而且笔画的粗细会有所不同。衬线字体的风格都比较突出，常见的衬线字体有Times New Roman、宋体。
Sans Serif字体没有这些额外的装饰，笔划粗细大致差不多，字形端庄，横平竖直，常见的无衬线字体有Tahoma、Verdana、Arial、Helvetica、苹方、微软雅黑等等。
3、英文和中文的字体是不同的
我们可以为英文、中文等两种字体调用不同的字体来渲染。如：Arial,'Times New Roman'这两种字体不认识中文，只认识英文，所以这两种字体只能渲染英文数字和一些特殊符号，而页面中的中文就会自动调用第三种字体Microsoft YaHei(PS:假如存在这种字体的话)。
所以在定义字体的时候把英文的字体写在前面把中文的写在后面。这样，系统就会自动按顺序依次给字用字体，如果当前字体不支持文本，自动换用列表中的下一个字体。
二、书写字体规则
在介绍字体规则前，有几点是需要注意的：
1、不同平台，预置的字体并不相同。比如Helvetica和苹方也只有苹果系统内置，微软雅黑只有windows系统内置(由于很多人安装Office的缘故，Mac电脑中也会出现微软雅黑字体)，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-ui
system-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即可，不需要太多。
三、字体设置
通过字体的知识点和字体设置规范介绍，我们总结出全局默认字体的设置方式。
1、移动端
兼容版本：ios9+、android4+
推荐写法：
font-family: system-ui, -apple-system, Arial, sans-serif;
解读：优先使用system-ui，使用Arial做西文字体的fallback是因为它和Helvetica字体相似，并且在ios和android支持性很好。
2、PC端
推荐写法1： macOS系统优先使用系统字体
font-family: -apple-system, BlinkMacSystemFont, Tahoma, Arial, "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
推荐写法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;
注意：
1、字体的设置没有固定标准，需要根据业务情况进行定夺，以上只是推荐写法，如果设计师有要求可以在此基础上进行改动。
2、css的font-family权重是高于浏览器默认字体的，有一些网站选择不设置font-family，使用浏览器的默认字体，倾向于用户的选择，这就是仁者见仁了。
3、
目录
一、字体基础知识
1、字体的分类
2、serif(衬线字体) & sans-serif(无衬线字体)
3、英文和中文的字体是不同的
二、书写字体规则
三、字体设置
1、移动端
2、PC端
3、指定元素字体
指定元素字体
当给某个元素设置了font-faimily后，全局默认字体则对这个元素无效，这时也要考虑字体兼容问题，最好指定一个fallback字体，并以sans-serif结尾。
div {font-faimiy: "PingFang SC", sans-serif;
}
