add: 常用免费字体
This commit is contained in:
qianguyihao
parent
6b3c0bfaee
commit
dfe6ce722a
@ -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/)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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 中指定字体族的时候，系统就有可能在字体族中找出一种字体来显示。
|
||||
|
||||
|
||||
|
||||
@ -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个层级。
|
||||
|
||||
|
||||
|
||||
思源黑体是最有名的免费商用字体。字体下载：<https://github.com/adobe-fonts/source-han-sans/tree/release/>
|
||||
|
||||
|
||||
|
||||
上图中，点击红框部分，即可下载该字体的压缩包。
|
||||
|
||||
### 2. 思源宋体
|
||||
|
||||
思源宋体：同样也是Adobe 联合 Google经过长达一年半的研发， 在 2019年 4 月 3 日发布了思源宋体（ Source Han Serif，Google 称 Noto Serif CJK）。
|
||||
|
||||
思源宋体包含了简繁日韩四种汉字写法，拥有7种粗细字重，共设计了458745个汉字。也就是说每一种字重包括65535个字形。
|
||||
|
||||
|
||||
|
||||
### 3. 站酷系列字体
|
||||
|
||||
截止目前有4种字体，都是免费授权全社会使用，允许商用。
|
||||
|
||||
|
||||
|
||||
### 4. 方正系列
|
||||
|
||||
方正对外提供四款免费字体，楷体、黑体、仿宋、书宋，可以商业发布，只要不进行转换、改编、传播。
|
||||
|
||||
注：方正虽然有四款优秀的免费可商用的字体，但有一点麻烦的是，需要书面授权，感兴趣的同学可以在他们的官网上查看一下授权使用范围。
|
||||
|
||||
|
||||
|
||||
### 5. 文泉驿系列字体
|
||||
|
||||
说到中文字体开源的鼻祖，学者房骞骞在 2004 年发起的公益项目应该算一个。文泉驿系列字体是开源字体，允许商业使用。
|
||||
|
||||
|
||||
|
||||
### 6. 郑庆科黄油体
|
||||
|
||||
这是一款个人设计师郑庆科推出的黄油体。
|
||||
|
||||
|
||||
|
||||
### 7. Font Space
|
||||
|
||||
Font Space有很全的字体，都是用户自己上传的，截至2017年3月有21款免费可商用的字体（包含2款文泉驿中文）。
|
||||
|
||||
|
||||
|
||||
### 8. 濑户字体
|
||||
|
||||
濑户制作的免费字体，字体包含中文繁体常用字及多国语言。
|
||||
|
||||
|
||||
|
||||
### 9. Arual
|
||||
|
||||
这是一款设计师都爱用的英文字体，简单实用。
|
||||
|
||||
|
||||
|
||||
### 免费字体打包下载
|
||||
|
||||
链接:https://pan.baidu.com/s/1MvFpCT_0wED7ovwJe_LO5w
|
||||
|
||||
密码:md0d
|
||||
|
||||
## 怎么知道哪些字体是侵权的？
|
||||
|
||||
可以在“360查字体”网站上检查自己电脑上哪些字体是免费可商用的，哪些是商用需要授权的。
|
||||
|
||||
- 360查字体：<https://fonts.safe.360.cn>
|
||||
|
||||
|
||||
|
||||
## 最后一段
|
||||
|
||||
|
||||
所谓「见微知著」，一个再不起眼的知识点，也是有很多学问的。光是“字体”这一点，就足够成为一门学科。
|
||||
|
||||
|
||||
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`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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;
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
|
||||
## 题目：页面布局
|
||||
|
||||
问题：假设高度默认100px ，请写出三栏布局，其中左栏、右栏各为300px，中间自适应。
|
||||
问题：假设容器的高度默认100px，请写出**三栏布局**，其中左栏、右栏的宽度各为300px，中间的宽度自适应。
|
||||
|
||||
|
||||
|
||||
|
||||
@ -264,6 +264,15 @@ css部分：（重点是 background 属性的写法）
|
||||
|
||||
使用hover为div添加边框时，页面布局发生错位的解决办法：https://blog.csdn.net/u014033756/article/details/51049574
|
||||
|
||||
### 2019-11-01
|
||||
|
||||
价格中的羊角符号，有半角和全角之分：
|
||||
|
||||
- ¥半角
|
||||
|
||||
- ￥全角
|
||||
|
||||
可以看出，半角的宽度更小，推荐使用。
|
||||
|
||||
|
||||
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
|
||||
### 其他
|
||||
|
||||
- 珍爱网（福利超好，但招人少）
|
||||
- 珍爱网（福利好，但招人少）
|
||||
|
||||
- shein（跨境时尚电商）
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user