update: 各大平台的默认字体加粗效果
This commit is contained in:
qianguyihao
parent
e50e10efe0
commit
7cf351fddd
@ -1,9 +1,11 @@
|
||||
|
||||
## 前言
|
||||
|
||||
我周围的码农当中，有很多是技术大神。然而在做页面开发时，却常常被字体这种简单的东西所困扰。
|
||||
我周围的码农当中，有很多是技术大神，却常常被字体这种简单的东西所困扰。
|
||||
|
||||
这篇文章，我们来讲一讲关于字体的常识。这些常识所涉及到的问题，有很强的可操作性，都是在实际业务中真实遇到的，都是需要你和产品经理、设计师不断重复沟通的。
|
||||
这篇文章，我们来讲一讲关于字体的常识。这些常识所涉及到的问题，有很强的可操作性，都是在实际业务中真实遇到的，都是需要开发同学和产品经理、设计师不断重复沟通的。
|
||||
|
||||
真的只是“**系统默认，无从解释**”这么简单吗？是产品被忽悠？还是开发在敷衍？二者之间的博弈究竟谁能胜出？学会本文，你就能胜出。
|
||||
|
||||
## 字体分类
|
||||
|
||||
@ -56,7 +58,7 @@ css 中的字体族可以理解成是某一类字体。常见的字体族可以
|
||||
|
||||
参考链接：[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 机制
|
||||
|
||||
多字体 fallback 机制：当指定的字体找不到（或者某些文字不支持这个字体）时，那就接着往后找。比如：
|
||||
|
||||
@ -91,18 +93,18 @@ font-weight 字体加粗属性，是让前端同学最迷茫的属性。当你
|
||||
|
||||
|
||||
```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: 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
|
||||
font-weight: normal; // 相当于 400
|
||||
font-weight: bold; // 相当于 700
|
||||
|
||||
```
|
||||
|
||||
@ -121,7 +123,9 @@ font-weight 字体加粗属性，是让前端同学最迷茫的属性。当你
|
||||
|
||||
## 各大平台的默认字体加粗效果
|
||||
|
||||
一张图，胜过千言万语。解释了这么多，我们来看看各大平台的字体加粗效果是什么样的。以下截图，都是我亲测的结果，如果你打算让别人看效果，直接把下面的图丢给他即可。我想，像我这样贴心的前端，不多见了。
|
||||
一张图，胜过千言万语。解释了这么多，我们来看看各大平台的字体加粗效果是什么样的。
|
||||
|
||||
以下截图，都是我亲测的结果，如果你打算让别人看效果，直接把下面的图丢给他即可。我想，像我这样贴心的前端，不多见了。
|
||||
|
||||
**1、Mac 平台的默认字体加粗效果**：（苹方字体）
|
||||
|
||||
@ -135,21 +139,18 @@ font-weight 字体加粗属性，是让前端同学最迷茫的属性。当你
|
||||
|
||||
|
||||
|
||||
可以看出，“苹方”字体的500 和600，加粗效果是不同的。
|
||||
|
||||
**4、Android 平台（华为 P30 Pro）的默认字体加粗效果**：（Droid Sans 字体）
|
||||
|
||||
|
||||
|
||||
可以看出，Android 平台的 Droid Sans 字体，只有 `>=700`，才会加粗。
|
||||
|
||||
**总结**：（各大平台的默认字体加粗效果）
|
||||
|
||||
- Mac & iOS 平台的“苹方”字体：500 和600，加粗效果是不同的；`>=600`的加粗效果是相同的。
|
||||
|
||||
- Windows 平台的“微软雅黑”字体：只有 `>=600` 才会加粗；而且只有一种加粗效果。
|
||||
- Windows 平台的“微软雅黑”字体：只有 `>=600` 才会加粗，而且加粗效果相同
|
||||
|
||||
- Android 平台的 Droid Sans 字体，只有 `>=700`才会加粗；而且加粗效果相同。
|
||||
|
||||
- Android 平台的 Droid Sans 字体，只有 `>=700`才会加粗；而且只有一种加粗效果。
|
||||
|
||||
## 大部分字体不是免费的
|
||||
|
||||
@ -216,7 +217,6 @@ font-weight 字体加粗属性，是让前端同学最迷茫的属性。当你
|
||||
|
||||
这个`JDZH`，我们一般也只使用在阿拉伯数字中；中文和英文，建议使用系统默认字体就行。
|
||||
|
||||
|
||||
## 最后一段
|
||||
|
||||
一个再不起眼的知识点，也是有很多学问的，有个成语叫「见微知著」。光是“字体”这一点，就足够成为一门学科。
|
||||
@ -232,7 +232,7 @@ font-weight 字体加粗属性，是让前端同学最迷茫的属性。当你
|
||||
> 当然，当时的我没有办法把这些点点滴滴连接起来，但是，**当我十年后回顾这一切的时候，一切都变得豁然开朗**。
|
||||
|
||||
|
||||
## 参考链接
|
||||
## 推荐链接
|
||||
|
||||
- 常见的免费字体：<http://zenozeng.github.io/Free-Chinese-Fonts/>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user