diff --git a/03-CSS进阶/02-网页设计和开发中，关于字体的常识.md b/03-CSS进阶/02-网页设计和开发中，关于字体的常识.md index b4c8f74..c130bd0 100644 --- a/03-CSS进阶/02-网页设计和开发中，关于字体的常识.md +++ b/03-CSS进阶/02-网页设计和开发中，关于字体的常识.md @@ -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 字体加粗属性，是让前端同学最迷茫的属性。当你 ![](http://img.smyhvae.com/20191016_1205_ios.png) -可以看出，“苹方”字体的500 和600，加粗效果是不同的。 - **4、Android 平台（华为 P30 Pro）的默认字体加粗效果**：（Droid Sans 字体） ![](http://img.smyhvae.com/20191016_1205_huawei_p30_pro.jpeg) -可以看出，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 字体加粗属性，是让前端同学最迷茫的属性。当你 > 当然，当时的我没有办法把这些点点滴滴连接起来，但是，**当我十年后回顾这一切的时候，一切都变得豁然开朗**。 -## 参考链接 +## 推荐链接 - 常见的免费字体：