update: 字体相关
This commit is contained in:
qianguyihao
parent
7cf351fddd
commit
aa687a7a01
@ -5,7 +5,7 @@
|
||||
|
||||
这篇文章，我们来讲一讲关于字体的常识。这些常识所涉及到的问题，有很强的可操作性，都是在实际业务中真实遇到的，都是需要开发同学和产品经理、设计师不断重复沟通的。
|
||||
|
||||
真的只是“**系统默认，无从解释**”这么简单吗？是产品被忽悠？还是开发在敷衍？二者之间的博弈究竟谁能胜出？学会本文，你就能胜出。
|
||||
字体真的只是“**系统默认，无从解释**”这么简单吗？是产品被忽悠？还是开发在敷衍？二者之间的博弈究竟谁能胜出？学会本文，你就能胜出。
|
||||
|
||||
## 字体分类
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
|
||||
## 字体族
|
||||
|
||||
css 中的字体族可以理解成是某一类字体。常见的字体族可以分为五类：
|
||||
CSS 中的字体族可以理解成是某一类字体。常见的字体族可以分为五类：
|
||||
|
||||
- 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 用户用微软雅黑来显示字体。这么好看的苹方字体，你忍心割舍吗？
|
||||
|
||||
@ -89,7 +89,7 @@ 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
|
||||
@ -105,11 +105,10 @@ font-weight: 900;
|
||||
|
||||
font-weight: normal; // 相当于 400
|
||||
font-weight: bold; // 相当于 700
|
||||
|
||||
```
|
||||
|
||||
|
||||
关键问题来了。很多人会发现，在 Windows 浏览器中， font-weight无论是设置300、400、500还是600，文字的粗细都没有任何变化，只有到700的时候才会加粗一下，感觉浏览器好像不支持这些数值，那搞这么多档位不就是多余的吗？
|
||||
关键问题来了。很多人会发现，在 Windows 平台的浏览器中， font-weight 无论是设置300、400、500还是600，文字的粗细都没有任何变化，只有到600的时候才会加粗一下，感觉浏览器好像不支持这些数值，那搞这么多档位不就是多余的吗？
|
||||
|
||||
这个时候，大家就开始吐槽 Windows 电脑太挫、Windows 浏览器太挫；同时还会感叹 Mac 真香，支持字体的各种粗细。
|
||||
|
||||
@ -117,7 +116,7 @@ font-weight: bold; // 相当于 700
|
||||
|
||||
就拿“微软雅黑”来举例，它只支持 400 和 700 这两种粗细，所以当你在代码里写成500的时候，也会被认为是400。但是 Mac 上的“苹方”字体，就支持从100到900之间的各种粗细。
|
||||
|
||||
再比如，前段时间，阿里开源的普惠字体，也是支持多种粗细的：
|
||||
再比如，前段时间，阿里巴巴开源的普惠字体，也是支持多种粗细的：
|
||||
|
||||
|
||||
|
||||
@ -125,7 +124,7 @@ font-weight: bold; // 相当于 700
|
||||
|
||||
一张图，胜过千言万语。解释了这么多，我们来看看各大平台的字体加粗效果是什么样的。
|
||||
|
||||
以下截图，都是我亲测的结果，如果你打算让别人看效果，直接把下面的图丢给他即可。我想，像我这样贴心的前端，不多见了。
|
||||
以下截图，都是我亲测的结果，如果你打算让别人看效果，直接把下面的图丢给他即可。像我这样贴心的前端，不多见了。
|
||||
|
||||
**1、Mac 平台的默认字体加粗效果**：（苹方字体）
|
||||
|
||||
@ -147,7 +146,7 @@ font-weight: bold; // 相当于 700
|
||||
|
||||
- Mac & iOS 平台的“苹方”字体：500 和600，加粗效果是不同的；`>=600`的加粗效果是相同的。
|
||||
|
||||
- Windows 平台的“微软雅黑”字体：只有 `>=600` 才会加粗，而且加粗效果相同
|
||||
- Windows 平台的“微软雅黑”字体：只有 `>=600` 才会加粗，而且加粗效果相同。
|
||||
|
||||
- Android 平台的 Droid Sans 字体，只有 `>=700`才会加粗；而且加粗效果相同。
|
||||
|
||||
@ -160,7 +159,7 @@ font-weight: bold; // 相当于 700
|
||||
|
||||
这也就是为什么，很多公司会专门购买一套商用字体库、甚至是自己开发一套字体出来，避免未来潜在的纠纷和麻烦。
|
||||
|
||||
给大家列举一个常见的场景。很多时候，前端同学拿到的视觉稿是 psd 稿，需要用 PS 软件打开源文件，才能看到里面的文字是什么字体。在PS软件里，当我们用光标选中字体的时候，出现了下面这种场景：
|
||||
给大家列举一个常见的场景。很多时候，前端同学拿到的视觉稿是 psd 稿，需要用 PS 软件打开源文件，才能看到里面的文字是什么字体。在 PS 软件里，当我们用光标选中字体的时候，出现了下面这种场景：
|
||||
|
||||
|
||||
|
||||
@ -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
|
||||
/**
|
||||
@ -219,7 +218,9 @@ font-weight: bold; // 相当于 700
|
||||
|
||||
## 最后一段
|
||||
|
||||
一个再不起眼的知识点，也是有很多学问的，有个成语叫「见微知著」。光是“字体”这一点，就足够成为一门学科。
|
||||
|
||||
所谓「见微知著」，一个再不起眼的知识点，也是有很多学问的。光是“字体”这一点，就足够成为一门学科。
|
||||
|
||||
|
||||
2005年，苹果公司创始人乔布斯（Steve Jobs）在斯坦福大学的毕业典礼演讲上，有过这样一段话：
|
||||
|
||||
@ -227,12 +228,12 @@ font-weight: bold; // 相当于 700
|
||||
|
||||
> 但是到了十年之后，当我们在设计第一台 Macintosh 电脑时，这些所学都涌进了我的头脑。于是，我把这些设计融入到了 Mac 电脑之中，这也使这台 Mac 成为了第一台拥有漂亮字体的电脑。
|
||||
|
||||
> 可以说，如果我当时没有退学，就不会有机会去参加我感兴趣的美术字课程，Mac 也就不会拥有那些美妙的排版和字体。而当 Windows 系统借鉴了Mac之后，似乎所有的电脑都应该是这个样子的。
|
||||
> 可以说，如果我当时没有退学，就不会有机会去参加我感兴趣的美术字课程，Mac 也就不会拥有那些美妙的排版和字体。而当 Windows 系统借鉴了Mac之后，似乎所有的电脑都应该是这个样子。
|
||||
|
||||
> 当然，当时的我没有办法把这些点点滴滴连接起来，但是，**当我十年后回顾这一切的时候，一切都变得豁然开朗**。
|
||||
> 当时的我没有办法把这些点点滴滴连接起来，但是，**当我十年后回顾的时候，一切都变得豁然开朗**。
|
||||
|
||||
|
||||
## 推荐链接
|
||||
## 推荐阅读
|
||||
|
||||
- 常见的免费字体：<http://zenozeng.github.io/Free-Chinese-Fonts/>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user