Webcourse/03-CSS进阶/03-网页设计和开发中，关于字体的常识.md

> 本文的最新内容将在[GitHub](https://github.com/qianguyihao/Web/blob/master/03-CSS%E8%BF%9B%E9%98%B6/02-%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E5%92%8C%E5%BC%80%E5%8F%91%E4%B8%AD%EF%BC%8C%E5%85%B3%E4%BA%8E%E5%AD%97%E4%BD%93%E7%9A%84%E5%B8%B8%E8%AF%86.md)上实时更新。欢迎在GitHub上关注我，一起入门和进阶前端。


## 前言

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

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

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

## 字体分类

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

![](http://img.smyhvae.com/20191004_1101.png)

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

常见的衬线体有：

- 宋体、楷体

- Times New Roman

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

常见的无衬线体有：

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

参考链接：[如何优雅的选择字体(font-family)](https://segmentfault.com/a/1190000006110417)

**补充**：

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

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

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

## 字体族

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

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

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

![](http://img.smyhvae.com/20191004_1130.png)

参考链接：[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/)

## 多字体 fallback 机制

多字体 fallback 机制：当指定的字体找不到（或者某些文字不支持这个字体）时，那就接着往后找。比如：

```css
.div1{
    font-family: "PingFang SC", "Microsoft Yahei", monospace;
}

```

上方 CSS 代码的意思是：让指定标签元素中的文字，在 Mac & iOS 平台用苹方字体，在 Win 平台用微软雅黑字体，如果这两个字体都没有，就随便找一个等宽的字体进行渲染。

**注意**：

（1）写 CSS 代码时，字体族不需要带引号。

（2）有些 Mac 用户会安装 Office 等软件，安装这些软件后，系统会顺带安装微软雅黑字体。此时，写 CSS 代码时，如果写成 `"Microsoft Yahei", "PingFang SC"`这种顺序，可能导致有些 Mac 用户用微软雅黑来显示字体。这么好看的苹方字体，你忍心割舍吗？

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

font-weight 字体加粗属性，是让前端同学最迷茫的属性。当你把做好的网页拿给产品经理验收时，网页一打开，产品经理首先关注到的就是字体的加粗问题，你信不信？下面这些话都是产品经理的口头禅，想必早已让你产生了幻听：

- “这个字体怎么没有加粗？”

- “这个字体是不是太粗了点？”

- “为什么 iPhone 和 Android 手机上的文字粗细不一致？”

想要明白这些疑惑，我们先来看看 `font-weight` 有哪些属性值。

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


```css
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

font-weight: normal; // 相当于 400
font-weight: bold;   // 相当于 700
```


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

这个时候，大家就开始吐槽 Windows 电脑太挫、Windows 浏览器太挫；同时还会感叹 Mac 真香，支持字体的各种粗细。

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

就拿“微软雅黑”来举例，它只支持 400 和 700 这两种粗细，所以当你在代码里写成500的时候，也会被认为是400。但是 Mac 上的“苹方”字体，就支持从100到900之间的各种粗细。

再比如，前段时间，阿里巴巴开源的普惠字体，也是支持多种粗细的：

![](http://img.smyhvae.com/20191013_1100.png)

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

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

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

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

![](http://img.smyhvae.com/20191016_1205_mac.png)

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

![](http://img.smyhvae.com/20191016_1205_windows2.png)

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

![](http://img.smyhvae.com/20191016_1205_ios.png)

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

![](http://img.smyhvae.com/20191016_1205_huawei_p30_pro.jpeg)

**总结**：（各大平台的默认字体加粗效果）

- Mac & iOS 平台的“苹方”字体：500 和600，加粗效果是不同的；`>=600`的加粗效果是相同的。

- Windows 平台的“微软雅黑”字体：只有 `>=600` 才会加粗，而且加粗效果相同。

- Android 平台的 Droid Sans 字体，只有 `>=700`才会加粗；而且加粗效果相同。


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

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

「微软雅黑」是免费字体吗？并不是。你可以将微软雅黑字体用在 office 软件中，但是一旦脱离了 office 软件或者脱离了 Windows 系统（比如说，你把做好的PPT打印出来拿去做商业宣传），你就不能使用该字体。

同理，苹果专属的「苹方字体」也只能在苹果系统的生态内使用。

免费字体当然有，比如[思源黑体](https://baike.baidu.com/item/%E6%80%9D%E6%BA%90%E9%BB%91%E4%BD%93/14919098)（Adobe 和 Google 在2014年7月联合推出的一款开源字体）、阿里巴巴普惠体等。但这些免费字体，我们平时基本用不到。

这也就是为什么，很多公司会专门购买一套商用字体库、甚至是自己开发一套字体出来，避免未来潜在的纠纷和麻烦。

给大家列举一个常见的场景。很多时候，前端同学拿到的视觉稿是 psd 稿，需要用 PS 软件打开源文件，才能看到里面的文字是什么字体。在 PS 软件里，当我们用光标选中字体的时候，出现了下面这种场景：

![](http://img.smyhvae.com/20191010_1121.png)

看到上面的`FZLTZCHK`，不要慌，马上去 Google 查一下，发现这个字体的全称是`方正兰亭`字体系列。恩，基本可以肯定， 这个字体也是要收费的。

这个时候，前端同学要马上告诉产品或者设计师，不要用这个字体，因为它是商用字体，是要收费的，小心吃官司。那我们该用什么字体呢？接着往下看。

## 网页一般用什么字体

大多数情况下，网页使用系统默认的字体就足够了。如果要使用特殊字体，顶多只是让**阿拉伯数字**使用特殊字体。中文和英文，使用默认字体，完全足够。

如果确实要使用特殊字体，只有这几种办法：

- 使用开源的免费字体（比如思源黑体、阿里巴巴普惠体等）。但这类字体，种类很少，而且不是很好看。网页开发中，基本没人用。

- 单独购买商用字体，获得授权。

- 自己公司开发一套字体，给自己人用。

比如我所在的 JD 公司就自主开发了一套商用字体`JDZH`（只允许 JD 公司自己用，别家公司不允许用），支持三种粗细。如下：

```css
/**
 * JD正黑体，提供三种字重，请严格按设计稿选择字体
 */
 @font-face {
    font-family: 'JDZH-Light';
    src: url('xxx.com/data/ppms/others/JDZH_Light.ttf') format('truetype');
}

@font-face {
    font-family: 'JDZH-Regular';
    src: url('xxx.com/data/ppms/others/JDZH_Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'JDZH-Bold';
    src: url('xxx.com/data/ppms/others/JDZH_Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'JDZhengHT-EN-Bold';
    src: url('xxx.com/data/ppms/others/JDZhengHei_01_Bold.ttf') format('truetype');
}

```

为了使用这个`JDZH`字体， JD公司在实际开发网页时，是这样做的：

- 步骤1：在公共的 CSS 文件中引入上方的字体库代码。这样的话，当页面加载时，用户的终端就会去下载这个字体库。

- 步骤2：在业务代码中，针对目标样式，直接使用 `font-family: 'JDZH-Regular';`这样的代码，即可生效。

这个`JDZH`，我们一般也只使用在阿拉伯数字中；中文和英文，建议使用系统默认字体就行。

## 免费可商用字体有哪些

字体版权一直是很多设计师的雷区，一不小心就容易触犯。因此，这一段，我们就来弄清楚一个问题：**免费可商用字体**到底有哪些？

### 1. 思源黑体（推荐）

思源黑体（Source Han Sans）：Adobe 和 Google 在 2014 年 7 月联合推出的针对中日韩的开源字体，在字重（字体粗细程度）上分7个层级。

![](http://img.smyhvae.com/20191103_1201.jpeg)

思源黑体是最有名的免费商用字体。字体下载：<https://github.com/adobe-fonts/source-han-sans/tree/release/>

![](http://img.smyhvae.com/20191103_1516.png)

上图中，点击红框部分，即可下载该字体的压缩包。

### 2. 思源宋体

思源宋体：同样也是Adobe 联合 Google经过长达一年半的研发， 在 2019年 4 月 3 日发布了思源宋体（ Source Han Serif，Google 称 Noto Serif CJK）。

思源宋体包含了简繁日韩四种汉字写法，拥有7种粗细字重，共设计了458745个汉字。也就是说每一种字重包括65535个字形。

![](http://img.smyhvae.com/20191103_1202.jpeg)

### 3. 站酷系列字体

截止目前有4种字体，都是免费授权全社会使用，允许商用。

![](http://img.smyhvae.com/20191103_1203.jpeg)

### 4. 方正系列

方正对外提供四款免费字体，楷体、黑体、仿宋、书宋，可以商业发布，只要不进行转换、改编、传播。

注：方正虽然有四款优秀的免费可商用的字体，但有一点麻烦的是，需要书面授权，感兴趣的同学可以在他们的官网上查看一下授权使用范围。

![](http://img.smyhvae.com/20191103_1204.jpeg)

### 5. 文泉驿系列字体

说到中文字体开源的鼻祖，学者房骞骞在 2004 年发起的公益项目应该算一个。文泉驿系列字体是开源字体，允许商业使用。

![](http://img.smyhvae.com/20191103_1205.jpeg)

### 6. 郑庆科黄油体

这是一款个人设计师郑庆科推出的黄油体。

![](http://img.smyhvae.com/20191103_1206.jpeg)

### 7. Font Space

Font Space有很全的字体，都是用户自己上传的，截至2017年3月有21款免费可商用的字体（包含2款文泉驿中文）。

![](http://img.smyhvae.com/20191103_1207.jpeg)

### 8. 濑户字体

濑户制作的免费字体，字体包含中文繁体常用字及多国语言。

![](http://img.smyhvae.com/20191103_1208.jpeg)

### 9. Arual

这是一款设计师都爱用的英文字体，简单实用。

![](http://img.smyhvae.com/20191103_1209.jpeg)

### 免费字体打包下载

链接:https://pan.baidu.com/s/1MvFpCT_0wED7ovwJe_LO5w

密码:md0d

## 怎么知道哪些字体是侵权的？

可以在“360查字体”网站上检查自己电脑上哪些字体是免费可商用的，哪些是商用需要授权的。

- 360查字体：<https://fonts.safe.360.cn>

![](http://img.smyhvae.com/20191103_1500.png)

## 最后一段

所谓「见微知著」，一个再不起眼的知识点，也是有很多学问的。光是“字体”这一点，就足够成为一门学科。

2005年，苹果公司创始人乔布斯（Steve Jobs）在斯坦福大学的毕业典礼演讲上，有过这样一段话：

> 当时的我从来没有期盼过我所学的这些东西，能够在我的生活中有什么实际的用处。

> 但是到了十年之后，当我们在设计第一台 Macintosh 电脑时，这些所学都涌进了我的头脑。于是，我把这些设计融入到了 Mac 电脑之中，这也使这台 Mac 成为了第一台拥有漂亮字体的电脑。

> 可以说，如果我当时没有退学，就不会有机会去参加我感兴趣的美术字课程，Mac 也就不会拥有那些美妙的排版和字体。而当 Windows 系统借鉴了Mac之后，似乎所有的电脑都应该是这个样子。

> 当时的我没有办法把这些点点滴滴连接起来，但是，**当我十年后回顾的时候，一切都变得豁然开朗**。

## 推荐阅读

- 常见的免费字体：<http://zenozeng.github.io/Free-Chinese-Fonts/>

- [iconfont](https://www.iconfont.cn/)

- [乔布斯斯坦福大学演讲-翻译](https://zhuanlan.zhihu.com/p/24242767)

- [乔布斯斯坦福大学演讲-翻译](https://www.douban.com/note/149058647/)

- [阿里巴巴官方发布免费商用字体：阿里巴巴普惠体](https://mp.weixin.qq.com/s/daKUNnF_Ste-O1l0sR89sQ)

- [得到 | 从甲骨文至得到今楷，造字的人都是神](https://mp.weixin.qq.com/s/ZnMxrhoH9piLf9EaSIwiGA)

- [《独立宣言》使用了什么字体？](https://mp.weixin.qq.com/s/i1qgUaSHrQlvqT-u3qJySw)

- [你的版权常识指南](https://mp.weixin.qq.com/s/4uEBoajTygSADslzem3yZA)

## 我的公众号

想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。

扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：

![](http://img.smyhvae.com/20190101.png)