撸了这么多代码，你真的了解字体吗？

拼搏现实的明天。 2023-06-13 08:53 59阅读 0赞

## 前言 ##

我周围的码农当中，有很多是技术大神，却常常被字体这种简单的东西所困扰。

这篇文章，我们来讲一讲关于字体的常识。这些常识所涉及到的问题，有很强的可操作性，都是在实际业务中真实遇到的，都是需要开发同学和产品经理、设计师不断重复沟通的。

字体真的只是“**系统默认，无从解释**”这么简单吗？是产品被忽悠？还是开发在敷衍？二者之间的博弈究竟谁能胜出？学会本文，你就能胜出。

## 字体分类 ##

常见的字体可以分为两类：**衬线体、无衬线体**。

![null][]

**1、serif（衬线体）**：在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。

常见的衬线体有：

•宋体、楷体•Times New Roman

**2、sans-serif（无衬线体）**：笔划粗细基本一致，只剩下主干，造型简明有力，起源也很晚。适用于标题、广告等，识别性高。

常见的无衬线体有：

•黑体•Windows 平台默认的中文字体：微软雅黑（Microsoft Yahei）•Windows 平台默认的英文字体：Arial•Mac & iOS 平台默认的中文字体：苹方（PingFang SC）•Mac & iOS 平台默认的英文字体：San Francisco•Android 平台默认字体：Droid Sans

**补充**：

衬线体如今已经很少使用了，你所熟悉的“宋体”，也基本只能在纸质出版物中见到。而**非衬线体更符合现代审美**。

所以，在这里温馨提示各位：**做PPT不要用宋体**。如果你不知道用什么字体，那就用系统的默认字体就好：Win 平台用微软雅黑、Mac 平台用苹方字体。

如果你发现一名设计师，在做海报设计、或者制图的时候，使用了宋体，说明她一定是个外行。

## 字体族 ##

CSS 中的字体族可以理解成是某一类字体。常见的字体族可以分为五类：

•serif：衬线体。•sans-serif：无衬线体。•monospace：等宽字体。每一个字母所占的宽度是相同的。写代码的字体尽量用等宽字体。•cursive：手写字体。比如徐静蕾手写体。•fantasy：梦幻字体。比如一些艺术字。

这五类字体族不代表某一个具体的字体，而是当你在 CSS 中指定字体族的时候，系统就有可能在字体族中找出一种字体来显示。

![null][null 1]

参考链接：serif，sans-serif，monospace，cursive和fantasy\[1\]

## 多字体 fallback ##

多字体 fallback 机制，可以理解成是字体的一种兜底机制。它意思是：当指定的字体找不到时，就继续往后找。比如：

.div{ font-family: "PingFang SC", "Microsoft Yahei", sans-serif;}

上面这行CSS代码的意思是：让文字在 iOS & Mac 操作系统上使用苹果的“苹方”字体，在 Windows 系统上用微软雅黑字体，如果这两个字体都没有，就随便找一个无衬线体进行显示。

## font-weight：字体的加粗属性 ##

font-weight 字体加粗属性，是让前端和产品同学最迷茫的属性。当你把做好的页面拿给产品经理体验时，产品经理首先关注到的就是字体的加粗问题。

我们先来看看 `font-weight` 有哪些属性值。

在设置字体是否加粗时，属性值既可以直接填写 100 至 900 这样的数字，也可以填写`normal`、`bold`这样的单词。`normal`的值相当于 400，`bold`的值相当于 700。如下：

关键问题是，很多人会发现，在 Android 平台的浏览器中， font-weight 无论是设置300、400，还是500，文字的粗细都没有任何变化，只有到700的时候才会加粗一下，感觉浏览器好像不支持这些数值，那搞这么多档位有用吗？

**实际上，所有这些数值关键字浏览器都是支持的，之所以没有看到任何粗细的变化，要看你所使用的字体是否支持**。

就拿“微软雅黑”这个字体来举例，它只支持两种粗细，所以当你在代码里写成500的时候，也会被认为是400。但是 Mac 上的“苹方”字体，就支持至少六种粗细。

## 各大平台的字体加粗效果 ##

一张图，胜过千言万语。解释了这么多，我们来看看各大操作系统的默认字体，加粗效果是什么样的。

以下截图，都是我亲自测试的结果，如果你打算让别人看字体加粗效果，直接把下面的图丢给他即可。像我这样贴心的前端，恐怕不多见了。

**1、iOS 平台的默认字体加粗效果**：（苹方字体）

![null][null 2]

**2、Android 平台（华为 P30 Pro）的默认字体加粗效果**：（Droid Sans 字体）

![null][null 3]

**3、Mac 平台的默认字体加粗效果**：（苹方字体）

![null][null 4]

**4、Windows 平台的默认字体加粗效果**：（微软雅黑字体）

![null][null 5]

**总结**：（各大操作系统的默认字体加粗效果）

•Android 平台的 Droid Sans 字体，只有 `>=700`才会加粗；而且加粗效果相同。•Mac & iOS 平台的“苹方”字体：500 和600，加粗效果是不同的；`>=600`的加粗效果是相同的。•Windows 平台的“微软雅黑”字体：只有 `>=600` 才会加粗，而且加粗效果相同。

## 大部分字体不是免费的 ##

你需要知道的是：你所了解的大部分字体，都不是免费的。换句话说，如果你想用第三方的付费字体从事商业活动，要先交钱获得授权后，才可以正常使用。你在给公司做网页时，就是一种商业行为。

免费字体是有的（比如思源黑体、阿里巴巴普惠体等），但是数量太少，而且不够通用，我们做网页时基本用不到。

所以，**很多公司会专门购买一套商用字体库、甚至是自己研发出一套字体，避免未来潜在的麻烦和纠纷**。

给大家列举一个常见的场景。很多时候，前端同学拿到的视觉稿是 psd 稿。在 PS 软件里，当我们用光标选中字体的时候，本来想看看它用的是什么字体，结果出现了下面这一幕：

![null][null 6]

看到这个`FZLTZCHK`字体，别慌，马上去网上查一下，发现它的中文名是`方正兰亭`字体系列。基本可以肯定，这个字体也是要收费的。

此时，前端同学要马上告诉产品或者设计师，这个字体不能免费使用，小心吃官司。

大多数情况下，网页使用系统默认的字体就完全足够。如果真的要使用特殊字体，要么就自主开发字体，要么就花钱够买商业字体。比如我们 JD 公司就自主开发了一套商用字体`JDZH`，仅供 JD 公司使用。

## 最后一段 ##

字体虽小，见微知著。

2005年6月，苹果公司创始人乔布斯在斯坦福大学的毕业典礼上做过一次演讲，他说了这样一段话：

> 里德学院在那时提供了全美最好的美术字课程。在这个大学里面的每个海报，每个抽屉的标签上面全都是漂亮的美术字。辍学后，我决定去学学怎样写出漂亮的美术字。

> 当时的我从来没有想过过我所学的这些设计知识，会有什么实际的用处。但是十年之后，我把这些设计和创意融入到了 Mac 电脑之中，这也使这台 Mac 成为了第一台拥有漂亮字体的电脑。

> 而当 Windows 系统借鉴了Mac之后，大家都觉得，所有的电脑都应该是这个样子。

> 那时的我无法把这些内容连接起来，但是，**十年后再来回顾的时候，一切都变得豁然开朗**。

### References ###

`[1]` serif，sans-serif，monospace，cursive和fantasy: *http://www.ayqy.net/blog/serif%EF%BC%8Csans-serif%EF%BC%8Cmonospace%EF%BC%8Ccursive%E5%92%8Cfantasy/*

## ❤️ 看完三件事 ##

如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

1.  点赞，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓）。
2.  关注公众号「前端劝退师」，不定期分享原创知识。
3.  也看看其它文章

也可以来我的`GitHub`博客里拿所有文章的源文件：

**前端劝退指南**：https://github.com/roger-hiro/BlogFN

![format_png][]

[null]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy85NWlhaWFwajgzSE9qdkN0RUpGSzA1UWliWUNIYXRpY0EzU3ZXb1B0cjRpYWxKYmVlSXVkTjZ4ZUFQZXhYaWJobldjY2lhR0ZUNTdtWEN4dnlPM3ViQ2NSWEc3OFEvNjQwP3d4X2ZtdD1wbmc?x-oss-process=image/format,png
[null 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy85NWlhaWFwajgzSE9qdkN0RUpGSzA1UWliWUNIYXRpY0EzU3ZWbk9SdFRkQnJtckFpYWdtd2NzUTd2eWFHTVlvYUVSWlhVbVZKZnpYVVJXTmxOUEplOXljNnBBLzY0MD93eF9mbXQ9cG5n?x-oss-process=image/format,png
[null 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy85NWlhaWFwajgzSE9qdkN0RUpGSzA1UWliWUNIYXRpY0EzU3ZrZ1BOd2FKNExMc2R0ZXFEUlFoZnBRajN6eTlIZERubjN5bVNqeXRKOEwzMFRFZFh6N09KM2cvNjQwP3d4X2ZtdD1wbmc?x-oss-process=image/format,png
[null 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy85NWlhaWFwajgzSE9qdkN0RUpGSzA1UWliWUNIYXRpY0EzU3ZlaWNtallsaWFJb0dDajNNZzdqNG8xdE83Umd2bnl3ZExYMUZQUDMyTUdKOEtqSENTTHpjaWN6VUEvNjQwP3d4X2ZtdD1qcGVn?x-oss-process=image/format,png
[null 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy85NWlhaWFwajgzSE9qdkN0RUpGSzA1UWliWUNIYXRpY0EzU3ZnQ1ZjVkNLQm5BZFVoaDFjejlTa21kUFNNTU1MZjNiU3hudnVHc2JzTlpNVm40T1FTaWIxdkt3LzY0MD93eF9mbXQ9cG5n?x-oss-process=image/format,png
[null 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy85NWlhaWFwajgzSE9qdkN0RUpGSzA1UWliWUNIYXRpY0EzU3ZlWGpkOGlhWWV1SXN5eGVZSVBUaWNKeDRpYWJJWmF3VTM3MloxaWJHVkRPYTIxaWF6Zkd1Ym1VQWRWdy82NDA_d3hfZm10PXBuZw?x-oss-process=image/format,png
[null 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy85NWlhaWFwajgzSE9qdkN0RUpGSzA1UWliWUNIYXRpY0EzU3YxbVRIVXdrbkVJVkRLanBpY3dCdzFjSVUzQmtkWVpSQW9WU2d2MVlQZnNsUTUzbVFzdDRKcW13LzY0MD93eF9mbXQ9anBlZw?x-oss-process=image/format,png
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9pY25yTkJpY0Voa1ZXdjc5T0ZGZGxJa1VjR1NZM2NTNG44MUppYkxXaEh5SEdlTUY1YmhCcUx4dlFnNldNTmljZmwzOXBpYnNSa2xOcUFYWHZZVU8yQnNJdm13LzY0MD93eF9mbXQ9cG5n?x-oss-process=image/format,png