【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", "微软雅黑";

【本文来源于互联网转载，如侵犯您的权益或不适传播，请邮件通知我们删除】