用7个章节，帮你完整掌握网页设计中的字体设置

前言 

不同操作系统和不同浏览器下的默认字体不同，可以在网页项目中使用 CSS 的 font-family 和 @font-face 让页面渲染出适合当前网页的字体。

正确的字体引用除了具体的设置外，还可以避免同时出现两种字体：

中西文字重不统一：

更多相关干货：

一、关于 font-family 属性

1. 字体的 fallback 机制

在 CSS 中间，可以通过 font-family 引用多个系列，多个字体，并且可以按顺序设置字体。

当用户打开网页时，浏览会被读取 font-family 第一个引用字体，检索用户当前操作系统下的字体，如果显示，如果没有，检索下一个，以此类推。

如果浏览器找不到指定的字体，或者没有设置 font-family 则会 fallback 到浏览器的默认字体。

2. 顺序设置字体

由于中文字体包含西文字体，如果你想优先显示效果更好的西文字体，你需要在中文字体前写西文字体。

尽管在用户群中使用 Windows 有很多系统，但是 Mac 大多数用户都会下载 Office，所以会有很多 Windows 下面常见的字体，如微软雅黑。将 macOS 书写系统的字体 Windows 在前面，可以保证在相应的平台上显示出更好的效果。

二、常见的网页字体

先了解 serif(衬线体)和 sans-serif(无衬线)

衬线体和无衬线体是两种最基本的字形分类，衬线体在笔画的开头和结尾都有小三角形的装饰。

衬线体更多地用于印刷品，纸上棱角分明的字体更容易识别。在屏幕显示中，过多的字体装饰容易造成视觉疲劳，因此无衬线体更多地用于屏幕显示。

一些常见的字体：

system-ui

通用字体系列将选择当前操作系统的默认字体渲染。例如 macOS 与 iOS 系统里 system-ui 中文字体为苹方，西文字体为苹方 .SF NS。

-apple-system

system-ui 兼容写法，在 macOS 与 iOS 在系统中调用苹果系统的默认字体。

BlinkMacSystemFont

为 macOS Chrome 调用苹果系统的默认字体。

Arial

无衬线西文字体，常与 Helvetica 支持不同的操作系统，不同的浏览器，兼容性好，属于安全字体。

Tahoma

无衬线西文字体，常出现，支持不同的操作系统，不同的浏览器，兼容性好，属于安全字体。

Helvetica / Helvetica Neue

无衬线西文字体是苹果生态中最常用的，Helvetica Neue 是 Helvetica 升级版增加了不同厚度和宽度的字形。

Segoe UI

无衬线西文字体，Windows 默认的西文字体系统。

Roboto

无衬线西文字体，Android 默认的西文字体系统。

苹方

除了中文简体，苹果系统的默认中文字体是无衬线中文字体（PingFang SC），还有台湾繁体（PingFang TC）和香港繁体（PingFang HK）。

Hiragino Sans GB (冬青黑体)

无衬线中文字体用于与不支持苹果的旧苹果系统兼容，作为苹果字体 fallback。

Microsoft YaHei (微软雅黑)

中文字体没有衬线，Windows 默认中文字体的系统，iOS 与 Android 该系统不支持微软雅黑。

Noto Sans (思源黑体)

无衬线中文字体，Android 系统的默认中文字体，由系统的默认中文字体 Google 与 Adobe 开源字体。除了中文简体（Noto Sans CJK SC），还有中文繁体（ Sans CJK TC）。

WenQuanYi Micro Hei (文泉驿微米黑)

无衬线中文字体，Linux 该系统的默认中文字体用于兼容 Linux 系统。

Simsun (宋体)

衬线中文字体，风格明显，支持 Windows 与 macOS 系统。

sans-serif

一个无衬线字体系列，一个常见的底字体，在前面所有引用的字体都找不到时就会生效，显示当前浏览器默认的无衬线字体。

三、 一些常见网站的字体设置

1. 如何查看网页项目引用字体？

打开浏览器检查，点击要查看的文本选择功能：

您可以看到字体堆栈，以及当前有效的字体。

当选文本包含中西文时，可以看到当前生效的中西文字体。

如图所示，因为在第一位 -apple-system 因此，目前的中文字体是有效的 PingFang SC，西文字体为 .SF NS。

2. 爱奇艺

因为苹方写在前面，西文字体也是苹方自带的西文，所以写在后面 Helvetica 没有生效。

有的会在网页上显示特定的字体：

3. 腾讯官网

TencentSans

4. OPPO 官网

OPPO Sans

会发现在 Rendered Fonts 中显示 TencentSans 和 OPPO Sans 为 Network resource，与知乎和爱奇艺渲染的字体不同 Local file。

由于特定字体不能保证存在于所有用户的计算机中，除非用户主动下载和安装，只能使用 font-family 未安装字体的计算机无法渲染。

四、如何在网页项目中显示特定的字体

方法一：

下载需要使用的字体文件并将其放在服务器上 @font-face 将字体文件作为资源应用 CSS 文件。

需要准备各种字体格式文件来兼容不同的浏览器，字体格式文件与浏览器的兼容性：

.ttf / .otf

Firefox3.5+，Chrome4+，Safari3+，Opera10+，iOS Safari4.2+。

.woff

IE9+，Firefox3.5+，Chrome6+，Safari3.Opera11.1+6+。

.eot

IE4+ 专用。

.svg

主要针对 Safari 做兼容。

方法二：

谷歌提供一个网站 Google Fonts 字体资源库可以下载或链接。

方法三：

有一种技术可以根据需要截取和生成网站使用的文本 .ttf .eot .woff .svg 四个字体格式文件可以支持所有浏览器，并最大限度地优化字体体积。还有第三方网站支持，例如，只要需要使用字体或提供一段字体库网站 js 可以实现代码。

方法四：

如果项目中只使用少量特殊字体，可以考虑切图导出 .svg 格式（比 .png 在导出之前，将文本轮廓化，使文本形成形状，否则可能会导致 svg 内部字体失效，如下图所示：

五、CSS 引用不可商用的字体会造成侵权吗？

用 font-family 该属性引用不可商用的字体，该字体也可以显示在网页上，不构成侵权问题，也不需要额外的授权许可。因为它可以使用 font-family 引用成功的字体是存在于用户系统中的字体。

然而，这仅限于在计算机中显示。如果将网页截取的图片用于宣传，则将脱离计算机系统的范围。此时，如果不购买字体版权，则属于侵权。

使用 @font-face 下载字体文件后，需要上传项目或服务器参考，使页面显示字体不再依赖于用户系统自己的字体。此时，如果您想使用不可用的字体，您需要购买字体版权，否则它将被侵权。

六、为什么中西文字重不统一？

设置字体字重的属性 font-weight 短语或数字(权重等级)可用于值，短语的有效值为 normal 和 bold，数字的有效值为 100-900。

短语的 normal 对应数字的 400，即设计软件中常见的“常规体”，bold 对应 700。

当浏览器渲染字体时，它会从字体中找到相应的权重水平进行渲染，但并不是每个字体都有 100-900 有些字体只提供权重水平 normal 和 bold 两个字重，拿普通的 Arial 和 Noto Sans(思源黑体)中西文混合示例:

如上图所示，西文字体将比中文字体更厚，在设计软件中将字体设置为“中粗体” font-weight 的值就为 500。

由于西文 Arial 只有 normal 和 bold 两种字重，500 权重水平大于 normal 对应的 所以显示了400 bold(700)，而 Noto Sans (思源黑体)字体对应 500 由于中西文字体的字重不统一，中粗体出现了。

七、推荐字体网站

1. 字由

网址：https://www.hellofont.cn/font-list

2. 优化字体导航

网址：https://hao.uisdc.com/font/

3. Google Fonts

网址：https://www.googlefonts.cn/chinese

欢迎关注作者微信微信官方账号:「柠檬设计笔记」