add: 常用免费字体

00-前端工具/01-VS Code的使用.md

@@ -586,9 +586,6 @@ css颜色高亮显示。
 
 - 作用：多台设备之间，同步 VS Code 配置。
 
-## 参考链接
-
-- [https://segmentfault.com/a/1190000012811886](https://segmentfault.com/a/1190000012811886)
 
 ## 最后一段
 
@@ -598,4 +595,14 @@ css颜色高亮显示。
 
 ## 参考链接
 
-「Vscode」打造类sublime的高颜值编辑器：https://idoubi.cc/2019/07/08/vscode-sublime-theme/
+- [VSCode前端必备插件，有可能你装了却不知道如何使用？](https://juejin.im/post/5db66672f265da4d0e009aad)
+
+- [能让你开发效率翻倍的 VSCode 插件配置（上）](https://juejin.im/post/5a08d1d6f265da430f31950e)
+
+- [https://segmentfault.com/a/1190000012811886](https://segmentfault.com/a/1190000012811886)
+
+- [「Vscode」打造类sublime的高颜值编辑器](https://idoubi.cc/2019/07/08/vscode-sublime-theme/)
+
+
+
+

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

@@ -1,4 +1,8 @@
 
+
+> 本文的最新内容将在[GitHub](https://github.com/qianguyihao/Web/blob/master/03-CSS%E8%BF%9B%E9%98%B6/02-%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E5%92%8C%E5%BC%80%E5%8F%91%E4%B8%AD%EF%BC%8C%E5%85%B3%E4%BA%8E%E5%AD%97%E4%BD%93%E7%9A%84%E5%B8%B8%E8%AF%86.md)上实时更新。欢迎在GitHub上关注我，一起入门和进阶前端。
+
+
 ## 前言
 
 我周围的码农当中，有很多是技术大神，却常常被字体这种简单的东西所困扰。
@@ -52,7 +56,7 @@ CSS 中的字体族可以理解成是某一类字体。常见的字体族可以
 - cursive：手写字体。比如徐静蕾手写体。
 - fantasy：梦幻字体。比如一些艺术字。
 
-这五类字体族不代表某一个具体的字体，而是当你在 css 中指定字体族的时候，系统就有可能在字体族中找出一种字体来显示。
+这五类字体族不代表某一个具体的字体，而是当你在 CSS 中指定字体族的时候，系统就有可能在字体族中找出一种字体来显示。
 
 ![](http://img.smyhvae.com/20191004_1130.png)
 
@@ -75,7 +79,7 @@ CSS 中的字体族可以理解成是某一类字体。常见的字体族可以
 
 （1）写 CSS 代码时，字体族不需要带引号。
 
-（2）有些 Mac 用户会安装 Office 等软件，安装这些软件后，系统会顺带安装微软雅黑字体。此时，写 css 代码时，如果写成 `"Microsoft Yahei", "PingFang SC"`这种顺序，可能导致有些 Mac 用户用微软雅黑来显示字体。这么好看的苹方字体，你忍心割舍吗？
+（2）有些 Mac 用户会安装 Office 等软件，安装这些软件后，系统会顺带安装微软雅黑字体。此时，写 CSS 代码时，如果写成 `"Microsoft Yahei", "PingFang SC"`这种顺序，可能导致有些 Mac 用户用微软雅黑来显示字体。这么好看的苹方字体，你忍心割舍吗？
 
 ## font-weight：字体的加粗属性
 
@@ -155,6 +159,10 @@ font-weight: bold;   // 相当于 700
 
 有一点你需要知道：你所见到的大部分字体，都不是免费的。换句话说，如果你想用第三方字体从事商业活动，要先交钱，获得授权后才可以使用。你在给公司做网页的时候，就是一种商业行为。
 
+「微软雅黑」是免费字体吗？并不是。你可以将微软雅黑字体用在 office 软件中，但是一旦脱离了 office 软件或者脱离了 Windows 系统（比如说，你把做好的PPT打印出来拿去做商业宣传），你就不能使用该字体。
+
+同理，苹果专属的「苹方字体」也只能在苹果系统的生态内使用。
+
 免费字体当然有，比如[思源黑体](https://baike.baidu.com/item/%E6%80%9D%E6%BA%90%E9%BB%91%E4%BD%93/14919098)（Adobe 和 Google 在2014年7月联合推出的一款开源字体）、阿里巴巴普惠体等。但这些免费字体，我们平时基本用不到。
 
 这也就是为什么，很多公司会专门购买一套商用字体库、甚至是自己开发一套字体出来，避免未来潜在的纠纷和麻烦。
@@ -213,15 +221,94 @@ font-weight: bold;   // 相当于 700
 
 - 步骤2：在业务代码中，针对目标样式，直接使用 `font-family: 'JDZH-Regular';`这样的代码，即可生效。
 
-
 这个`JDZH`，我们一般也只使用在阿拉伯数字中；中文和英文，建议使用系统默认字体就行。
 
+## 免费可商用字体有哪些
+
+字体版权一直是很多设计师的雷区，一不小心就容易触犯。因此，这一段，我们就来弄清楚一个问题：**免费可商用字体**到底有哪些？
+
+### 1. 思源黑体（推荐）
+
+思源黑体（Source Han Sans）：Adobe 和 Google 在 2014 年 7 月联合推出的针对中日韩的开源字体，在字重（字体粗细程度）上分7个层级。
+
+![](http://img.smyhvae.com/20191103_1201.jpeg)
+
+思源黑体是最有名的免费商用字体。字体下载：<https://github.com/adobe-fonts/source-han-sans/tree/release/>
+
+![](http://img.smyhvae.com/20191103_1516.png)
+
+上图中，点击红框部分，即可下载该字体的压缩包。
+
+### 2. 思源宋体
+
+思源宋体：同样也是Adobe 联合 Google经过长达一年半的研发， 在 2019年 4 月 3 日发布了思源宋体（ Source Han Serif，Google 称 Noto Serif CJK）。
+
+思源宋体包含了简繁日韩四种汉字写法，拥有7种粗细字重，共设计了458745个汉字。也就是说每一种字重包括65535个字形。
+
+![](http://img.smyhvae.com/20191103_1202.jpeg)
+
+### 3. 站酷系列字体
+
+截止目前有4种字体，都是免费授权全社会使用，允许商用。
+
+![](http://img.smyhvae.com/20191103_1203.jpeg)
+
+### 4. 方正系列
+
+方正对外提供四款免费字体，楷体、黑体、仿宋、书宋，可以商业发布，只要不进行转换、改编、传播。
+
+注：方正虽然有四款优秀的免费可商用的字体，但有一点麻烦的是，需要书面授权，感兴趣的同学可以在他们的官网上查看一下授权使用范围。
+
+![](http://img.smyhvae.com/20191103_1204.jpeg)
+
+### 5. 文泉驿系列字体
+
+说到中文字体开源的鼻祖，学者房骞骞在 2004 年发起的公益项目应该算一个。文泉驿系列字体是开源字体，允许商业使用。
+
+![](http://img.smyhvae.com/20191103_1205.jpeg)
+
+### 6. 郑庆科黄油体
+
+这是一款个人设计师郑庆科推出的黄油体。
+
+![](http://img.smyhvae.com/20191103_1206.jpeg)
+
+### 7. Font Space
+
+Font Space有很全的字体，都是用户自己上传的，截至2017年3月有21款免费可商用的字体（包含2款文泉驿中文）。
+
+![](http://img.smyhvae.com/20191103_1207.jpeg)
+
+### 8. 濑户字体
+
+濑户制作的免费字体，字体包含中文繁体常用字及多国语言。
+
+![](http://img.smyhvae.com/20191103_1208.jpeg)
+
+### 9. Arual
+
+这是一款设计师都爱用的英文字体，简单实用。
+
+![](http://img.smyhvae.com/20191103_1209.jpeg)
+
+### 免费字体打包下载
+
+链接:https://pan.baidu.com/s/1MvFpCT_0wED7ovwJe_LO5w
+
+密码:md0d
+
+## 怎么知道哪些字体是侵权的？
+
+可以在“360查字体”网站上检查自己电脑上哪些字体是免费可商用的，哪些是商用需要授权的。
+
+- 360查字体：<https://fonts.safe.360.cn>
+
+![](http://img.smyhvae.com/20191103_1500.png)
+
 ## 最后一段
 
-
 所谓「见微知著」，一个再不起眼的知识点，也是有很多学问的。光是“字体”这一点，就足够成为一门学科。
 
-
 2005年，苹果公司创始人乔布斯（Steve Jobs）在斯坦福大学的毕业典礼演讲上，有过这样一段话：
 
 > 当时的我从来没有期盼过我所学的这些东西，能够在我的生活中有什么实际的用处。
@@ -232,7 +319,6 @@ font-weight: bold;   // 相当于 700
 
 > 当时的我没有办法把这些点点滴滴连接起来，但是，**当我十年后回顾的时候，一切都变得豁然开朗**。
 
-
 ## 推荐阅读
 
 - 常见的免费字体：<http://zenozeng.github.io/Free-Chinese-Fonts/>
@@ -249,4 +335,13 @@ font-weight: bold;   // 相当于 700
 
 - [《独立宣言》使用了什么字体？](https://mp.weixin.qq.com/s/i1qgUaSHrQlvqT-u3qJySw)
 
+- [你的版权常识指南](https://mp.weixin.qq.com/s/4uEBoajTygSADslzem3yZA)
+
+## 我的公众号
+
+想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
+
+扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
+
+![](http://img.smyhvae.com/20190101.png)
 

03-CSS进阶/CSS开发积累.md

@@ -2,10 +2,24 @@
 
 ### 让文字只显示一行，超出显示省略号
 
-```css
+```
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
 
 ```
 
+
+
+
+### 让文字最多只显示两行，超出后显示省略号
+
+```
+	overflow:hidden;
+	text-overflow:ellipsis;
+	display:-webkit-box;
+	-webkit-box-orient:vertical;
+	-webkit-line-clamp:2;
+```
+
+

14-前端面试/01-页面布局.md

@@ -41,7 +41,7 @@
 
 ## 题目：页面布局
 
-问题：假设高度默认100px ，请写出三栏布局，其中左栏、右栏各为300px，中间自适应。
+问题：假设容器的高度默认100px，请写出**三栏布局**，其中左栏、右栏的宽度各为300px，中间的宽度自适应。
 
 ![](http://img.smyhvae.com/20180305_1520.png)
 

17-前端综合/2019年-前端日记.md

@@ -264,6 +264,15 @@ css部分：（重点是 background 属性的写法）
 
 使用hover为div添加边框时，页面布局发生错位的解决办法：https://blog.csdn.net/u014033756/article/details/51049574
 
+### 2019-11-01
+
+价格中的羊角符号，有半角和全角之分：
+
+- ¥半角
+
+- ￥全角
+
+可以看出，半角的宽度更小，推荐使用。
 
 
 

18-推荐链接/03-深圳有哪些IT互联网大厂（2019年版）.md

@@ -63,7 +63,7 @@
 
 ### 其他
 
-- 珍爱网（福利超好，但招人少）
+- 珍爱网（福利好，但招人少）
 
 - shein（跨境时尚电商）