From dfe6ce722a502fa98bdd2f0426b0c9fb5eed7afe Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Sun, 3 Nov 2019 14:20:08 +0800 Subject: [PATCH] =?UTF-8?q?add:=20=E5=B8=B8=E7=94=A8=E5=85=8D=E8=B4=B9?= =?UTF-8?q?=E5=AD=97=E4=BD=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 00-前端工具/01-VS Code的使用.md | 15 ++- .../02-网页设计和开发中，关于字体的常识.md | 107 +++++++++++++++++- 03-CSS进阶/CSS开发积累.md | 16 ++- 14-前端面试/01-页面布局.md | 2 +- 17-前端综合/2019年-前端日记.md | 9 ++ .../03-深圳有哪些IT互联网大厂（2019年版）.md | 2 +- 6 files changed, 138 insertions(+), 13 deletions(-) diff --git a/00-前端工具/01-VS Code的使用.md b/00-前端工具/01-VS Code的使用.md index a6c9d10..37f9e40 100644 --- a/00-前端工具/01-VS Code的使用.md +++ b/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/) + + + + diff --git a/03-CSS进阶/02-网页设计和开发中，关于字体的常识.md b/03-CSS进阶/02-网页设计和开发中，关于字体的常识.md index 003402d..6cac252 100644 --- a/03-CSS进阶/02-网页设计和开发中，关于字体的常识.md +++ b/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) + +思源黑体是最有名的免费商用字体。字体下载： + +![](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查字体： + +![](http://img.smyhvae.com/20191103_1500.png) + ## 最后一段 - 所谓「见微知著」，一个再不起眼的知识点，也是有很多学问的。光是“字体”这一点，就足够成为一门学科。 - 2005年，苹果公司创始人乔布斯（Steve Jobs）在斯坦福大学的毕业典礼演讲上，有过这样一段话： > 当时的我从来没有期盼过我所学的这些东西，能够在我的生活中有什么实际的用处。 @@ -232,7 +319,6 @@ font-weight: bold; // 相当于 700 > 当时的我没有办法把这些点点滴滴连接起来，但是，**当我十年后回顾的时候，一切都变得豁然开朗**。 - ## 推荐阅读 - 常见的免费字体： @@ -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) diff --git a/03-CSS进阶/CSS开发积累.md b/03-CSS进阶/CSS开发积累.md index 3c7d67b..1da47f3 100644 --- a/03-CSS进阶/CSS开发积累.md +++ b/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; +``` + + diff --git a/14-前端面试/01-页面布局.md b/14-前端面试/01-页面布局.md index 5e50871..c7c1661 100644 --- a/14-前端面试/01-页面布局.md +++ b/14-前端面试/01-页面布局.md @@ -41,7 +41,7 @@ ## 题目：页面布局 -问题：假设高度默认100px ，请写出三栏布局，其中左栏、右栏各为300px，中间自适应。 +问题：假设容器的高度默认100px，请写出**三栏布局**，其中左栏、右栏的宽度各为300px，中间的宽度自适应。 ![](http://img.smyhvae.com/20180305_1520.png) diff --git a/17-前端综合/2019年-前端日记.md b/17-前端综合/2019年-前端日记.md index de8900e..ce49571 100644 --- a/17-前端综合/2019年-前端日记.md +++ b/17-前端综合/2019年-前端日记.md @@ -264,6 +264,15 @@ css部分：（重点是 background 属性的写法） 使用hover为div添加边框时，页面布局发生错位的解决办法：https://blog.csdn.net/u014033756/article/details/51049574 +### 2019-11-01 + +价格中的羊角符号，有半角和全角之分： + +- ¥半角 + +- ￥全角 + +可以看出，半角的宽度更小，推荐使用。 diff --git a/18-推荐链接/03-深圳有哪些IT互联网大厂（2019年版）.md b/18-推荐链接/03-深圳有哪些IT互联网大厂（2019年版）.md index b21bff5..b6e20ab 100644 --- a/18-推荐链接/03-深圳有哪些IT互联网大厂（2019年版）.md +++ b/18-推荐链接/03-深圳有哪些IT互联网大厂（2019年版）.md @@ -63,7 +63,7 @@ ### 其他 -- 珍爱网（福利超好，但招人少） +- 珍爱网（福利好，但招人少） - shein（跨境时尚电商）