add: 关于字体的常识

02-CSS基础/13-CSS3属性：Flex布局图文详解.md

@@ -32,7 +32,7 @@ flex 唯一的缺点就在于，它不支持低版本的 IE 浏览器。
 
 ![](http://img.smyhvae.com/20191005_1200.png)
 
-上图中可以看到， flex 布局不支持 IE9 及以下的版本。如果你的页面不需要处理 IE浏览器的兼容性问题，则可以放心大胆地使用 flex 布局。
+上图中可以看到， flex 布局不支持 IE9 及以下的版本；IE10及以上也只是部分支持。如果你的页面不需要处理 IE浏览器的兼容性问题，则可以放心大胆地使用 flex 布局。
 
 但是，比如网易新闻、淘宝这样的大型网站，面对的是海量用户，即便使用低版本浏览器的用户比例很少，但绝对基数仍然是很庞大的。因此，这些网站为了兼容低版本的 IE 浏览器，暂时还不敢尝试使用 flex 布局。
 

03-CSS进阶/01-HTML基础回顾.md

@@ -102,6 +102,7 @@ div 是最常见的元素，大多数场景下，都可以用div（实在不行
         <p>某某公司出品</p>
     </footer>
 ```
+
 ### 查看网页大纲的工具
 
 我们可以通过 <http://h5o.github.io/> 这个工具查看一个网页的大纲。

03-CSS进阶/02-CSS中的非布局样式.md

@@ -1,137 +0,0 @@
-
-## 前言
-
-CSS中，有很多**非布局样式**，这些样式（属性）和与布局无关，包括：
-
-- 字体、字重、颜色、大小、行高
-- 背景、边框
-- 滚动、换行
-- 装饰性属性（粗体、斜体、下划线）等。
-
-这篇文章，我们来对上面的部分样式做一个回顾。
-
-## 字体
-
-### 字体分类
-
-常见的字体可以分为两类：**衬线体、无衬线体**。
-
-![](http://img.smyhvae.com/20191004_1101.png)
-
-**1、serif（衬线体）**：在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。比如：宋体、楷体。
-
-**2、sans-serif（无衬线体）**：笔划粗细基本一致，只剩下主干，造型简明有力，起源也很晚。适用于标题、广告等，识别性高。
-
-常见的无衬线体有：
-
-- 黑体
-- 微软雅黑（Microsoft Yahei）：Windows平台默认的中文字体
-- Arial：Windows平台默认的英文字体
-- 苹方（PingFang SC）：Mac & iOS 平台的中文字体
-- San Francisco：Mac & iOS 平台的英文字体
-- [思源黑体](https://baike.baidu.com/item/%E6%80%9D%E6%BA%90%E9%BB%91%E4%BD%93/14919098)。是 Adobe 和 Google 在2014年7月联合推出的一款开源字体。
-
-补充：
-
-（1）海报设计、PPT不要用宋体。
-
-（2）乔布斯
-
-参考链接：[如何优雅的选择字体(font-family)](https://segmentfault.com/a/1190000006110417)
-
-### 字体族
-
-css 中的字体族可以理解成是某一类字体。常见的字体族可以分为五类：
-
-- serif:衬线体。
-- sans-serif：无衬线体。
-- monospace：等宽字体。每一个字母所占的宽度是相同的。写代码的字体尽量用等宽字体。
-- cursive：手写字体。比如徐静蕾手写体。
-- fantasy：梦幻字体。比如一些艺术字。
-
-这五类字体族不代表某一个具体的字体，而是当你在 css 中指定字体族的时候，就有可能在字体族中找出一种字体来显示。
-
-![](http://img.smyhvae.com/20191004_1130.png)
-
-参考链接：[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机制：当指定的字体找不到（或者某些文字不支持这个字体）时，那就接着往后找。比如：
-
-```css
-.div1{
-    font-family: "PingFang SC", "Microsoft Yahei", monospace;
-}
-
-```
-上方代码的意思是：让 div1 在 Mac & iOS 平台用 苹方字体，在 Win 平台用微软雅黑字体，如果这两个字体都没有，就随便找一个等宽的字体进行渲染。
-
-注意：
-
-（1）写css 代码时，字体族不需要带引号。
-
-（2）有些 Mac 用户会安装 Office 等软件，安装这些软件后，系统会顺带安装微软雅黑字体。此时，写 css 代码时，如果写成 `"Microsoft Yahei", "PingFang SC"`这种顺序，可能导致有些 Mac 用户用微软雅黑来显示字体。
-
-### 常见的字体&文本属性
-
-```css
-	font-style: italic;	/* italic表示斜体，normal表示不倾斜*/
-	font-weight: bold;  /* 字体加粗，100至900 */
-    text-decoration: underline; /* 下划线 */
-    cursor: pointer;  /*鼠标悬停时，光标显示为手形*/
-
-```
-
-`font-weight`属性：在设置字体是否加粗时，属性值既可以填写`normal`、`bold`这样的加粗字体，也可以直接填写 100至900 这样的数字。`normal`的值相当于400，`bold`的值相当于700。
-
-### 其他
-
-- 网络字体
-
-- [iconfont](https://www.iconfont.cn/)
-
-## 边框
-
-如何用边框画一个三角形？详见《02-CSS基础/06-CSS盒模型详解》中的最后一段。
-
-## 文字换行
-
-- ovferflow-wrap：通用的属性。用来说明当一个不能被分开的字符串（单词）太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词**中断换行**。
-
-- word-break：指定了怎样在单词内断行。这里涉及到CJK（中文/日文/韩文）的文字换行。
-
-- white-space：空白处是否换行。
-
-上面这三个 css 属性进行组合，可以设置各种不同的属性。
-
-当然，如果想让一段很长的文本不换行，可以直接设置`white-space: nowrap` 这一个属性即可。
-
-## CSS Hack
-
-- CSS Hack 的方式：不合法但可以生效的写法。
-
-- 可以用来解决一些浏览器的兼容性问题。
-
-- 缺点：难理解、难维护、易失效（比如浏览器升级后，hack可能会失效）。
-
-- 替代方案：特性检测。
-
-- 替代方案：针对性加 class
-
-
-## CSS 效果
-
-我们可以利用 CSS 实现各种效果，常见的效果属性有：
-
-- box-shadow：盒子的阴影
-
-- text-shadow：文本的阴影
-
-- border-radius
-
-- background
-
-- clip-path
-
-

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

@@ -0,0 +1,214 @@
+
+## 前言
+
+我周围的码农当中，有很多是技术大神。然而在做页面开发时，却常常被字体这种简单的东西所困扰。
+
+这篇文章，我们来讲一讲关于字体的常识。这些常识所涉及到的问题，有很强的可操作性，都是在实际业务中真实遇到的，都是需要你和产品经理、设计师不断重复沟通的。
+
+## 字体分类
+
+常见的字体可以分为两类：**衬线体、无衬线体**。
+
+![](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)
+
+参考链接：[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 机制：当指定的字体找不到（或者某些文字不支持这个字体）时，那就接着往后找。比如：
+
+```css
+.div1{
+    font-family: "PingFang SC", "Microsoft Yahei", monospace;
+}
+
+```
+
+上方 CSS 代码的意思是：让 div1 在 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;   // 相当于 900
+
+```
+
+
+关键问题来了。很多人会发现，在 Windows 浏览器中， font-weight无论是设置300、400、500还是600，文字的粗细都没有任何变化，只有到700的时候才会加粗一下，感觉浏览器好像不支持这些数值，那搞这么多档位不就是多余的吗？
+
+这个时候，大家就开始吐槽 Windows 电脑太挫、Windows 浏览器太挫；同时还会感叹 Mac 真香，支持字体的各种粗细。
+
+**实际上，所有这些数值关键字浏览器都是支持的，之所以没有看到任何粗细的变化，是因为你所使用的字体不支持**。
+
+就拿“微软雅黑”来举例，它只支持 400 和 700 这两种粗细，所以当你在代码里写成500的时候，也会被认为是400。但是 Mac 上的“苹方”字体，就支持从100到900之间的各种粗细。
+
+再比如，前段时间，阿里开源的普惠字体，也是支持多种粗细的：
+
+![](http://img.smyhvae.com/20191013_1100.png)
+
+## 大部分字体不是免费的
+
+有一点你需要知道：你所见到的大部分字体，都不是免费的。换句话说，如果你想用第三方字体从事商业活动，要先交钱，获得授权后才可以使用。你在给公司做网页的时候，就是在从事商业活动。
+
+免费字体当然有，比如[思源黑体](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 查一下，发现这个字体的全称是`方正兰亭`字体系列。恩，基本可以肯定， 这个字体也是要收费的。
+
+这个时候，前端同学要马上告诉产品或者设计师，不要用这个字体，因为它是商用字体，是要收费的，小心吃官司。那我们该用什么字体呢？接着往下看。
+
+### 网页一般用什么字体
+
+大多数情况下，网页使用系统默认的字体就足够了。如果要使用特殊字体，顶多只是让**阿拉伯数字**使用特殊字体。中文和英文，使用默认字体，完全足够。
+
+如果确实要使用特殊字体，只有这几种办法：
+
+- 使用开源的免费字体（比如[思源黑体](https://baike.baidu.com/item/%E6%80%9D%E6%BA%90%E9%BB%91%E4%BD%93/14919098)、阿里巴巴普惠体等）。但这类字体，种类很少，而且不是很好看。网页开发中，基本没人用。
+
+- 单独购买商用字体，获得授权。
+
+- 自己公司开发一套字体，给自己人用。
+
+比如我们 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`，我们一般也只使用在阿拉伯数字中；中文和英文，建议使用系统默认字体就行。
+
+
+## 最后一段
+
+一个再小的知识点，也是有很多学问的。光是“字体”这一点，就足够成为一门学科。
+
+2005年，苹果公司创始人乔布斯（Steve Jobs）在斯坦福大学的毕业典礼演讲上，有过这样一段话：
+
+> 当时的我从来没有期盼过我所学的这些东西，能够在我的生活中有什么实际的用处。
+
+> 但是到了十年之后，当我们在设计第一台 Macintosh 电脑时，这些所学都涌进了我的头脑。于是，我把这些设计融入到了 Mac 电脑之中，这也使这台 Mac 成为了第一台拥有漂亮字体的电脑。
+
+> 可以说，如果我当时没有退学，就不会有机会去参加我感兴趣的美术字课程，Mac 也就不会拥有那些美妙的排版和字体。而当 Windows 系统借鉴了Mac之后，似乎所有的电脑都应该是这个样子的。
+
+> 当然，当时的我没有办法把这些点点滴滴连接起来，但是，当我十年后回顾这一切的时候，一切都变得豁然开朗。
+
+
+## 参考链接
+
+- [iconfont](https://www.iconfont.cn/)
+
+- [乔布斯斯坦福大学演讲-翻译](https://zhuanlan.zhihu.com/p/24242767)
+
+- [乔布斯斯坦福大学演讲-翻译](https://www.douban.com/note/149058647/)
+
+- [得到 | 从甲骨文至得到今楷，造字的人都是神](https://mp.weixin.qq.com/s/ZnMxrhoH9piLf9EaSIwiGA)
+
+
+

03-CSS进阶/03-CSS中的非布局样式.md

@@ -0,0 +1,56 @@
+
+## 前言
+
+CSS中，有很多**非布局样式**，这些样式（属性）和与布局无关，包括：
+
+- 字体、字重、颜色、大小、行高
+- 背景、边框
+- 滚动、换行
+- 装饰性属性（粗体、斜体、下划线）等。
+
+这篇文章，我们来对上面的部分样式做一个回顾。
+
+## 边框
+
+如何用边框画一个三角形？详见《02-CSS基础/06-CSS盒模型详解》中的最后一段。
+
+## 文字换行
+
+- ovferflow-wrap：通用的属性。用来说明当一个不能被分开的字符串（单词）太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词**中断换行**。
+
+- word-break：指定了怎样在单词内断行。这里涉及到CJK（中文/日文/韩文）的文字换行。
+
+- white-space：空白处是否换行。
+
+上面这三个 css 属性进行组合，可以设置各种不同的属性。
+
+当然，如果想让一段很长的文本不换行，可以直接设置`white-space: nowrap` 这一个属性即可。
+
+## CSS Hack
+
+- CSS Hack 的方式：不合法但可以生效的写法。
+
+- 可以用来解决一些浏览器的兼容性问题。
+
+- 缺点：难理解、难维护、易失效（比如浏览器升级后，hack可能会失效）。
+
+- 替代方案：特性检测。
+
+- 替代方案：针对性加 class
+
+
+## CSS 效果
+
+我们可以利用 CSS 实现各种效果，常见的效果属性有：
+
+- box-shadow：盒子的阴影
+
+- text-shadow：文本的阴影
+
+- border-radius
+
+- background
+
+- clip-path
+
+

18-推荐链接/03-GitHub项目推荐.md

@@ -8,8 +8,14 @@
 
 - 收集优质的中文前端博客：<https://github.com/FrankFang/best-chinese-front-end-blogs>
 
-### 2019-9-25
+### 2019-09-25
 
 - CSS Inspiration，在这里找到写 CSS 的灵感：<https://github.com/chokcoco/CSS-Inspiration>
 
 
+### 2019-10-10
+
+- 前端博客：<https://github.com/laizimo/zimo-article>
+
+讲得比较详细。比如说这篇：[CSS布局说——可能是最全的](https://github.com/laizimo/zimo-article/issues/36)
+