最近我在学习前端样式相关的知识，所以经常到一些大型网站看他们的页面布局，并且每次都能学到不少东西。

昨天在看了多个网站后，发现不同网站的字体样式是不一样的，对此产生了疑惑，他们是怎么做到的呢？

1. 不同网站字体的形成原因

在看了多个网站的 font-family 后，发现他们的描述都是不一样的，并且描述的差异很大，其中很多都是我不知道的，这就让我很想弄懂这玩意儿的使用方法了。

如下是我看到的几个网站的 font-family，他们的描述都有很大的不同。

（1）京东的 font-family：

font-family: "Microsoft YaHei", "Heiti SC", tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif;

（2）飞书文档的 font-family：

font-family: LarkHackSafariFont,LarkEmojiFont,LarkChineseQuote,-apple-system,BlinkMacSystemFont,Helvetica Neue,Arial,Segoe UI,PingFang SC,Microsoft Yahei,Hiragino Sans GB,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;

（3）石墨文档的 font-family：

font-family: BlinkMacSystemFont, "PingFang SC", Helvetica, Tahoma, Arial, "Microsoft YaHei", 微软雅黑, 黑体, Heiti, sans-serif, SimSun, 宋体, serif;

在经过了一番学习后，我发现这个属性的作用真是太大了，它可以让你的网站在不同的设备上使用不同的字体，那它要怎么使用呢？接下来我逐步解释给你听。

2. 常见的字体类型

我们常用的网页字体类型，一般就以下这五种：

• serif（衬线字体）
• sans-serif（无衬线字体）
• cursive（草书字体）
• fantasy（幻想字体）
• monospace（等宽字体）

2.1 serif（衬线字体）

衬线字体代表脚本的正式文本样式，一般是有收尾的笔划、喇叭形、锥形末端或具有实际衬线结尾的，具有装饰性细节的字形。

衬线字体展示：

2.2 sans-serif（无衬线字体）

通常垂直和水平的词干具有接近相同的粗细，并且笔画结尾很简单，没有任何喇叭形、交叉笔画或其他装饰。

无衬线字体展示：

衬线字体和无衬线字体的对比：

2.3 cursive（草书字体）

草书字体中的字形通常使用更非正式的脚本样式，结果看起来更像手写笔或毛笔字，而不是印刷字体。

草书字体展示：

2.4 fantasy（幻想字体）

幻想字体主要是装饰性或表达性字体，包含字符的装饰性或表达性表示。

幻想字体展示：

2.5 monospace（等宽字体）

等宽字体的唯一标准是所有字形都具有相同的固定宽度。这通常用于呈现计算机代码示例。

等宽字体展示：

2.6 新增的几种类型

在 w3 网站 中我还看到了几种新增的字体类型，同样也是很有作用的，分别是：

2.6.1 system-ui

此通用字体系列允许在平台上使用默认用户界面字体呈现文本。

2.6.2 emoji

此字体系列旨在与表情符号字符一起使用。表情符号是象形文字（图形符号），通常以彩色形式呈现并在文本中内嵌使用。

2.6.3 math

此字体系列旨在与数学表达式一起使用。

2.6.4 fangsong

该字体系列用于中文仿宋字体，它是宋（衬线）和楷（草书）之间的一种轻松的中间形式。通常，与宋体相比，水平线是倾斜的，端点花体较小，笔画宽度变化较小。常用于中国政府的官方文件。

2.6.5 ui-serif

该字体系列用于系统用户界面的衬线变体。ui-serif 的目的是允许 Web 内容与本机操作系统的外观和感觉集成。

macOS Catalina 和 iOS 13 上的示例 ui-serif 字体：纽约

2.6.6 ui-sans-serif

此字体系列用于系统用户界面的无衬线变体。ui-sans-serif 的目的是允许 Web 内容与本机操作系统的外观和感觉集成。

macOS Catalina 和 iOS 13 上的示例 ui-sans-serif 字体：旧金山

2.6.7 ui-monospace

此字体系列用于系统用户界面的等宽变体。ui-monospace 的目的是允许 Web 内容与本机操作系统的外观和感觉集成。

macOS Catalina 和 iOS 13 上的示例 ui-monospace 字体：SF Mono

2.6.8 ui-rounded

此字体系列用于系统用户界面的圆形变体。ui-rounded 的目的是让 Web 内容与本机操作系统的外观和感觉相结合。

macOS Catalina 和 iOS 13 上的示例 ui-rounded 字体：SF Rounded

3. font-family 中的字体写法

我们可以在 font-family 属性中添加上述字体类型，以表示你想让网站展现何种字体。

书写方式如下：

font-family: sans-serif;

4.常见系统的适用字体

4.1 适用于 Android 系统的字体

Roboto 是为 Android 操作系统设计的一个无衬线字体家族 。Google 描述该字体为“现代的、但平易近人”和“情绪化”的。该字体在 Apache 许可证下授权使用。

整个字体家族在 2012 年 1 月 12 日在新推出的 Android 设计网站 Android Design 上正式提出以供免费下载，这个字体家族包含 Regular 和 Thin、Light、Regular、Medium、Bold、Black 与 Condensed 版的斜体。

4.2 适用于 IOS、mac OS、tv OS、watch OS 的字体

San Francisco 是适用于运行 IOS、mac OS、tv OS、watch OS 的苹果设备的字体家族。

4.3 适用于 Windows 系统的字体

Segoe UI 是 windows 系统下默认的一种无衬线西文字体。

Microsoft YaHei（微软雅黑）是 Windows 系统默认的一套无衬线中文字体。

5. 浏览器支持的字体

并不是只要系统支持了某种字体，浏览器就能很完美地将字体展示出来，需要浏览器的开发者增加对某种字体的支持才行。

例如我们前文提到的 system-ui，它可以让浏览器展示不同操作系统的默认字体，但是需要此浏览器支持 system-ui。

我们可以通过 caniuse.com 查看不同浏览器对 system-ui 的支持情况。

我们可以看到 IE11 并不支持此属性，但是 Chrome 102-103 版本支持这个属性，如果我们将带有 font-family: system-ui; 的网站通过 Chrome 打开，那么浏览器就可以展示默认地址。

6. 自定义 font-family

我们可以看看前文京东网站中的 font-family，它代表什么意思呢？

font-family: "Microsoft YaHei", "Heiti SC", tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif;

可以看到每个不同字体之间都是用,隔开，用;结尾。

Microsoft YaHei：优先使用微软雅黑；
Heiti SC：在 OSX / IOS 中使用此字体；
tahoma：在 Windows 系统中使用此字体；
Arial：在微软的应用中使用此字体；
Hiragino Sans GB：Heiti SC，则在 OSX / IOS 中使用此字体；
宋体：在 Windows 中可使用此字体；
sans-serif：若以上字体都找不到，那就使用无衬线的字体。

他们的优先级是从高到低的，先使用前面的字体描述，若找不到则使用后面的字体描述。

最后

以上就是 font-family 的使用方法了，我们讲解了常见的字体类型和适用于不同系统的字体，以及浏览器支持字体的查看方法，希望对你有所帮助。