webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update: 字体相关

Browse Source
This commit is contained in:
qianguyihao 2019-10-16 20:52:24 +08:00
parent 7cf351fddd
commit aa687a7a01
1 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,7 @@
这篇文章，我们来讲一讲关于字体的常识。这些常识所涉及到的问题，有很强的可操作性，都是在实际业务中真实遇到的，都是需要开发同学和产品经理、设计师不断重复沟通的。 这篇文章，我们来讲一讲关于字体的常识。这些常识所涉及到的问题，有很强的可操作性，都是在实际业务中真实遇到的，都是需要开发同学和产品经理、设计师不断重复沟通的。
真的只是“**系统默认，无从解释**”这么简单吗？是产品被忽悠？还是开发在敷衍？二者之间的博弈究竟谁能胜出？学会本文，你就能胜出。 字体真的只是“**系统默认，无从解释**”这么简单吗？是产品被忽悠？还是开发在敷衍？二者之间的博弈究竟谁能胜出？学会本文，你就能胜出。
## 字体分类 ## 字体分类
@ -44,7 +44,7 @@
## 字体族 ## 字体族
css 中的字体族可以理解成是某一类字体。常见的字体族可以分为五类： CSS 中的字体族可以理解成是某一类字体。常见的字体族可以分为五类：
- serif：衬线体。 - serif：衬线体。
- sans-serif：无衬线体。 - sans-serif：无衬线体。
@ -69,11 +69,11 @@ css 中的字体族可以理解成是某一类字体。常见的字体族可以
``` ```
上方 CSS 代码的意思是：让 div1 在 Mac & iOS 平台用苹方字体，在 Win 平台用微软雅黑字体，如果这两个字体都没有，就随便找一个等宽的字体进行渲染。 上方 CSS 代码的意思是：让指定标签元素中的文字，在 Mac & iOS 平台用苹方字体，在 Win 平台用微软雅黑字体，如果这两个字体都没有，就随便找一个等宽的字体进行渲染。
**注意**： **注意**：
（1）写css 代码时，字体族不需要带引号。 （1）写 CSS 代码时，字体族不需要带引号。
（2）有些 Mac 用户会安装 Office 等软件，安装这些软件后，系统会顺带安装微软雅黑字体。此时，写 css 代码时，如果写成 `"Microsoft Yahei", "PingFang SC"`这种顺序，可能导致有些 Mac 用户用微软雅黑来显示字体。这么好看的苹方字体，你忍心割舍吗？ （2）有些 Mac 用户会安装 Office 等软件，安装这些软件后，系统会顺带安装微软雅黑字体。此时，写 css 代码时，如果写成 `"Microsoft Yahei", "PingFang SC"`这种顺序，可能导致有些 Mac 用户用微软雅黑来显示字体。这么好看的苹方字体，你忍心割舍吗？
@ -89,7 +89,7 @@ font-weight 字体加粗属性，是让前端同学最迷茫的属性。当你
想要明白这些疑惑，我们先来看看 `font-weight` 有哪些属性值。 想要明白这些疑惑，我们先来看看 `font-weight` 有哪些属性值。
`font-weight`属性：在设置字体是否加粗时，属性值既可以直接填写 100 至 900 这样的数字，也可以填写`normal`、`bold`这样的单词。`normal`的值相当于 400，`bold`的值相当于 700。如下： **font-weight 属性**：在设置字体是否加粗时，属性值既可以直接填写 100 至 900 这样的数字，也可以填写`normal`、`bold`这样的单词。`normal`的值相当于 400，`bold`的值相当于 700。如下：
```css ```css
@ -105,11 +105,10 @@ font-weight: 900;
font-weight: normal; // 相当于 400 font-weight: normal; // 相当于 400
font-weight: bold; // 相当于 700 font-weight: bold; // 相当于 700
``` ```
关键问题来了。很多人会发现，在 Windows 浏览器中， font-weight无论是设置300、400、500还是600，文字的粗细都没有任何变化，只有到700的时候才会加粗一下，感觉浏览器好像不支持这些数值，那搞这么多档位不就是多余的吗？ 关键问题来了。很多人会发现，在 Windows 平台的浏览器中， font-weight 无论是设置300、400、500还是600，文字的粗细都没有任何变化，只有到600的时候才会加粗一下，感觉浏览器好像不支持这些数值，那搞这么多档位不就是多余的吗？
这个时候，大家就开始吐槽 Windows 电脑太挫、Windows 浏览器太挫；同时还会感叹 Mac 真香，支持字体的各种粗细。 这个时候，大家就开始吐槽 Windows 电脑太挫、Windows 浏览器太挫；同时还会感叹 Mac 真香，支持字体的各种粗细。
@ -117,7 +116,7 @@ font-weight: bold; // 相当于 700
就拿“微软雅黑”来举例，它只支持 400 和 700 这两种粗细，所以当你在代码里写成500的时候，也会被认为是400。但是 Mac 上的“苹方”字体，就支持从100到900之间的各种粗细。 就拿“微软雅黑”来举例，它只支持 400 和 700 这两种粗细，所以当你在代码里写成500的时候，也会被认为是400。但是 Mac 上的“苹方”字体，就支持从100到900之间的各种粗细。
再比如，前段时间，阿里开源的普惠字体，也是支持多种粗细的： 再比如，前段时间，阿里巴巴开源的普惠字体，也是支持多种粗细的：
![](http://img.smyhvae.com/20191013_1100.png) ![](http://img.smyhvae.com/20191013_1100.png)
@ -125,7 +124,7 @@ font-weight: bold; // 相当于 700
一张图，胜过千言万语。解释了这么多，我们来看看各大平台的字体加粗效果是什么样的。 一张图，胜过千言万语。解释了这么多，我们来看看各大平台的字体加粗效果是什么样的。
以下截图，都是我亲测的结果，如果你打算让别人看效果，直接把下面的图丢给他即可。我想，像我这样贴心的前端，不多见了。 以下截图，都是我亲测的结果，如果你打算让别人看效果，直接把下面的图丢给他即可。像我这样贴心的前端，不多见了。
**1、Mac 平台的默认字体加粗效果**：（苹方字体） **1、Mac 平台的默认字体加粗效果**：（苹方字体）
@ -147,7 +146,7 @@ font-weight: bold; // 相当于 700
- Mac & iOS 平台的“苹方”字体：500 和600，加粗效果是不同的；`>=600`的加粗效果是相同的。 - Mac & iOS 平台的“苹方”字体：500 和600，加粗效果是不同的；`>=600`的加粗效果是相同的。
- Windows 平台的“微软雅黑”字体：只有 `>=600` 才会加粗，而且加粗效果相同 - Windows 平台的“微软雅黑”字体：只有 `>=600` 才会加粗，而且加粗效果相同。
- Android 平台的 Droid Sans 字体，只有 `>=700`才会加粗；而且加粗效果相同。 - Android 平台的 Droid Sans 字体，只有 `>=700`才会加粗；而且加粗效果相同。
@ -160,7 +159,7 @@ font-weight: bold; // 相当于 700
这也就是为什么，很多公司会专门购买一套商用字体库、甚至是自己开发一套字体出来，避免未来潜在的纠纷和麻烦。 这也就是为什么，很多公司会专门购买一套商用字体库、甚至是自己开发一套字体出来，避免未来潜在的纠纷和麻烦。
给大家列举一个常见的场景。很多时候，前端同学拿到的视觉稿是 psd 稿，需要用 PS 软件打开源文件，才能看到里面的文字是什么字体。在PS软件里，当我们用光标选中字体的时候，出现了下面这种场景： 给大家列举一个常见的场景。很多时候，前端同学拿到的视觉稿是 psd 稿，需要用 PS 软件打开源文件，才能看到里面的文字是什么字体。在 PS 软件里，当我们用光标选中字体的时候，出现了下面这种场景：
![](http://img.smyhvae.com/20191010_1121.png) ![](http://img.smyhvae.com/20191010_1121.png)
@ -174,13 +173,13 @@ font-weight: bold; // 相当于 700
如果确实要使用特殊字体，只有这几种办法： 如果确实要使用特殊字体，只有这几种办法：
- 使用开源的免费字体（比如[思源黑体](https://baike.baidu.com/item/%E6%80%9D%E6%BA%90%E9%BB%91%E4%BD%93/14919098)、阿里巴巴普惠体等）。但这类字体，种类很少，而且不是很好看。网页开发中，基本没人用。 - 使用开源的免费字体（比如思源黑体、阿里巴巴普惠体等）。但这类字体，种类很少，而且不是很好看。网页开发中，基本没人用。
- 单独购买商用字体，获得授权。 - 单独购买商用字体，获得授权。
- 自己公司开发一套字体，给自己人用。 - 自己公司开发一套字体，给自己人用。
比如我们 JD 公司就自主开发了一套商用字体`JDZH`（只允许 JD 公司自己用，别家公司不允许用），支持三种粗细。如下： 比如我所在的 JD 公司就自主开发了一套商用字体`JDZH`（只允许 JD 公司自己用，别家公司不允许用），支持三种粗细。如下：
```css ```css
/** /**
@ -219,7 +218,9 @@ font-weight: bold; // 相当于 700
## 最后一段 ## 最后一段
一个再不起眼的知识点，也是有很多学问的，有个成语叫「见微知著」。光是“字体”这一点，就足够成为一门学科。
所谓「见微知著」，一个再不起眼的知识点，也是有很多学问的。光是“字体”这一点，就足够成为一门学科。
2005年，苹果公司创始人乔布斯（Steve Jobs）在斯坦福大学的毕业典礼演讲上，有过这样一段话： 2005年，苹果公司创始人乔布斯（Steve Jobs）在斯坦福大学的毕业典礼演讲上，有过这样一段话：
@ -227,12 +228,12 @@ font-weight: bold; // 相当于 700
> 但是到了十年之后，当我们在设计第一台 Macintosh 电脑时，这些所学都涌进了我的头脑。于是，我把这些设计融入到了 Mac 电脑之中，这也使这台 Mac 成为了第一台拥有漂亮字体的电脑。 > 但是到了十年之后，当我们在设计第一台 Macintosh 电脑时，这些所学都涌进了我的头脑。于是，我把这些设计融入到了 Mac 电脑之中，这也使这台 Mac 成为了第一台拥有漂亮字体的电脑。
> 可以说，如果我当时没有退学，就不会有机会去参加我感兴趣的美术字课程，Mac 也就不会拥有那些美妙的排版和字体。而当 Windows 系统借鉴了Mac之后，似乎所有的电脑都应该是这个样子的。 > 可以说，如果我当时没有退学，就不会有机会去参加我感兴趣的美术字课程，Mac 也就不会拥有那些美妙的排版和字体。而当 Windows 系统借鉴了Mac之后，似乎所有的电脑都应该是这个样子。
> 当然，当时的我没有办法把这些点点滴滴连接起来，但是，**当我十年后回顾这一切的时候，一切都变得豁然开朗**。 > 当时的我没有办法把这些点点滴滴连接起来，但是，**当我十年后回顾的时候，一切都变得豁然开朗**。
## 推荐链接 ## 推荐阅读
- 常见的免费字体：<http://zenozeng.github.io/Free-Chinese-Fonts/> - 常见的免费字体：<http://zenozeng.github.io/Free-Chinese-Fonts/>