Webcourse/03-CSS进阶/03-网页设计和开发中,关于字体的常识.md
qianguyihao 1230ca3925 rename
2019-11-11 16:19:54 +08:00

348 lines
15 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

> 本文的最新内容将在[GitHub](https://github.com/qianguyihao/Web/tree/master/03-CSS%E8%BF%9B%E9%98%B6)上实时更新。欢迎在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)
参考链接:[serifsans-serifmonospacecursive和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 SansAdobe 和 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 SerifGoogle 称 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)