【CSS】font-family的相关字体设置
大家都知道，在不同操作系统、不同游览器里面默认显示的字体是不一样的，并且相同字体在不同操作系统里面渲染的效果也不尽相同，那么如何设置字体显示效果会比较好呢？下面我们逐步的分析一下：
一、字体基础知识
css 中的font-family
对于 CSS 中的 font-family 而言，它有两类取值。
在中，定义了 5 个通用字体族名（其中用的最多的就是衬线字体和无衬线字体）：
serif 衬线字体族sans-serif 非衬线字体族 等宽字体1688库移动站，即字体中每个字宽度相同cursive 草书字体fantasy 主要是那些具有特殊艺术效果的字体
而在中微软640xl怎样设置字体，新增了4个通用字体族关键字（其中用的最多的是system-ui）：
serif(衬线字体) & sans-serif(无衬线字体)
Serif的意思是，在字的笔划开始及结束的地方有额外的装饰，而且笔画的粗细会有所不同。衬线字体的风格都比较突出，常见的衬线字体有Times New Roman、宋体。
Sans Serif字体没有这些额外的装饰，笔划粗细大致差不多，字形端庄，横平竖直【CSS】font-family的相关字体设置，常见的无衬线字体有Tahoma、Verdana、Arial、、苹方、微软雅黑等等。
system-ui
简单而言，font-family: system-ui的目的就是在不同的操作系统的 Web 页面下，自动选择本操作系统下的默认系统字体。
默认使用特定操作系统的系统字体可以提高性能，因为浏览器或者 webview 不必去下载任何字体文件，而是使用已有的字体文件。
font-family: system-ui字体设置的优势之处在于它与当前操作系统使用的字体相匹配，对于文本内容而言，它可以得到最恰当的展示。
看看system-ui的兼容性，(图片截取日 )：
二、常见字体介绍
苹果系统支持的一种西文无衬线字体，是苹果生态中最常用的一套西文字体。 Neue是字体改善版本，增加了更多不同粗细与宽度的字形。
Arial
是为了与竞争而设计的无衬线西文字体，表现形式和类似，在不同系统的浏览器都支持，兼容性非常好。
Tahoma
一种无衬线字体，间距较小，在不同系统的浏览器都支持，兼容性良好，可以解决和Arial所为人诟病的缺点，比如大写的 I 和小写的 L 难以分辨。
San
苹果于2017年推出一种无衬线字体，也是目前苹果系统的默认西文字体，相比于字体，San 的字体风格更加简洁，减少了一些修饰的细节，支持符号的整体居中，比如时间显示，之前的的冒号是不居中的。
最低兼容版本：ios9、macOS10.11
SC(苹方-简)
苹果专为中国用户打造的一个中文无衬线字体，在2017年和San 一起推出，SC代表简体，同时还有台湾繁体和香港繁体，整体造型简洁美观，是苹果系统默认的中文字体。
最低兼容版本：ios9、macOS10.11
Sans GB(冬青黑体)、Heiti SC(黑体)
苹果系统中较早的中文无衬线字体，为了兼容旧版macOS系统，我们一般用它们作为苹方字体的。
Segoe UI
windows系统下的一种无衬线西文字体，也是windows系统的默认西文字体。
YaHei(微软雅黑)
Windows系统默认的中文字体，也是一套无衬线字体。macOS上的浏览器大都预装微软雅黑，但不包括safari浏览器。
ios和android系统不支持微软雅黑，所以设置移动端字体时可以忽略微软雅黑。
SimSun(宋体)
一种中文衬线字体，windows 和 macOS都有支持，字体偏瘦，风格明显。
宋体也是windows XP及更早系统的默认中文字体。
Micro Hei(文泉驿微米黑)
Linux系统下默认中文字体，一般为了兼容Linux系统才会设置这个字体。
Roboto
Android系统的默认西文字体微软640xl怎样设置字体，也是一种无衬线字体
Noto Sans (思源黑体)
Android系统的默认中文无衬线字体，由google推出的一款开源字体。
Apple Color Emoji
苹果产品的文字表情，在Mac和iOS系统中到处都可以看到，也是我们接触的最多的Emoji表情。
Segoe UI Emoji
系统中的Emoji表情，黑描边风格，没有苹果的圆润和质感。
Noto Color Emoji
Google推出的表情，和苹果的较为类似，更加扁平。
三、浏览器默认字体 PC端
PC端的浏览器支持设置不同的默认字体。
下图是chrome的配置选项，标准字体就是默认字体，当font-family属性没有设置时会启用这个字体。
因为Arial是西文字体，对中文无效，浏览器会选择合适的中文字体，在Windows上一般为微软雅黑，在macOS一般为苹方。但是部分浏览器会根据默认字体的风格选择近似的中文字体，Arial是无衬线字体，浏览器也会选择一种无衬线字体适配中文，如果默认字体是衬线字体，那么浏览器就会选择一种衬线中文字体，为了抹平这种差异，我们通常在font-family最后设置sans-serif指定无衬线字体作为兜底。
移动端
移动端浏览器通常不支持指定默认字体。
ios的默认中文字体为苹方，当lang设置为zh-CN，西文也是苹方。当lang不设置或者设置为en时，西文默认字体为Times New Roman，一种衬线字体。
'zh-CN'>
...android的字体稍微复杂，它的的默认字体为西文：Roboto，中文：Noto Sans (思源黑体)，但不同厂商可能会使用自定义的字体，比如小米部分手机使用的是小米兰亭。
android端lang设置为zh-CN或en时表现也有可能不同，虽然都是无衬线字体，但差异很明显。即便lang都设置为zh-CN，不同的安卓机上的默认西文字体表现也有可能是不同的，一个字形容：乱。
以上提到的移动端系统版本：ios9+ +
正是由于浏览器默认字体的复杂体现出设置font-family的重要性。
四、各平台的默认字体 1、Window下： 2、Mac OS下： 3、Android系统： 4、iOS系统： 5、Linux： 五、选择字体需要注意的问题
1、字体的中英文写法：
我们在操作系统中常常看到宋体、微软雅黑这样的字体名称，但实际上这只是字体的显示名称，而不是字体文件的名称，一般字体文件都是用英文命名的，如SimSun、 Yahei。在大多数情况下直接使用显示名称也能正确的显示，但是有一些用户的特殊设置会导致中文声明无效。
因此，保守的做法是使用字体的字体名称（英文）或者两者兼写。如下示例：
font-family: STXihei, "Microsoft YaHei";
font-family: STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑";【本文来源于互联网转载，如侵犯您的权益或不适传播，请邮件通知我们删除】