webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update: 字体的常识

Browse Source
This commit is contained in:
qianguyihao 2019-10-13 14:26:43 +08:00
parent 4feb0aba3d
commit aa7b7a2dc9
1 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,7 +15,7 @@
常见的衬线体有： 常见的衬线体有：
- 宋体、楷体。 - 宋体、楷体
- Times New Roman - Times New Roman
@ -26,7 +26,7 @@
- 黑体 - 黑体
- Windows平台默认的中文字体：微软雅黑（Microsoft Yahei） - Windows平台默认的中文字体：微软雅黑（Microsoft Yahei）
- Windows平台默认的英文字体：Arial - Windows平台默认的英文字体：Arial
- Mac & iOS 平台默认的的中文字体：苹方（PingFang SC） - Mac & iOS 平台默认的中文字体：苹方（PingFang SC）
- Mac & iOS 平台默认的英文字体：San Francisco - Mac & iOS 平台默认的英文字体：San Francisco
- Android 平台默认字体：Droid Sans - Android 平台默认字体：Droid Sans
@ -69,7 +69,7 @@ css 中的字体族可以理解成是某一类字体。常见的字体族可以
上方 CSS 代码的意思是：让 div1 在 Mac & iOS 平台用苹方字体，在 Win 平台用微软雅黑字体，如果这两个字体都没有，就随便找一个等宽的字体进行渲染。 上方 CSS 代码的意思是：让 div1 在 Mac & iOS 平台用苹方字体，在 Win 平台用微软雅黑字体，如果这两个字体都没有，就随便找一个等宽的字体进行渲染。
注意： **注意**：
（1）写css 代码时，字体族不需要带引号。 （1）写css 代码时，字体族不需要带引号。
@ -77,17 +77,17 @@ css 中的字体族可以理解成是某一类字体。常见的字体族可以
## font-weight：字体的加粗属性 ## font-weight：字体的加粗属性
font-weight 字体加粗属性，是让前端同学最迷茫的属性。当你把做好的网页拿给产品经理验收时，网页一打开，产品经理首先关注到的就是字体加粗问题，你信不信？下面这些话都是产品经理的口头禅，想必早已让你产生了幻听： font-weight 字体加粗属性，是让前端同学最迷茫的属性。当你把做好的网页拿给产品经理验收时，网页一打开，产品经理首先关注到的就是字体的加粗问题，你信不信？下面这些话都是产品经理的口头禅，想必早已让你产生了幻听：
- “这个字体有没有加粗？” - “这个字体怎么没有加粗？”
- “这个字体是不是太粗了点？” - “这个字体是不是太粗了点？”
- “为什么 iPhone 和 Android 手机上的文字粗细不一致？” - “为什么 iPhone 和 Android 手机上的文字粗细不一致？”
我们先来看看 `font-weight` 有哪些属性值。 想要明白这些疑惑，我们先来看看 `font-weight` 有哪些属性值。
`font-weight`属性：在设置字体是否加粗时，属性值既可以直接填写 100至900 这样的数字，也可以填写`normal`、`bold`这样的单词。`normal`的值相当于400，`bold`的值相当于700。如下： `font-weight`属性：在设置字体是否加粗时，属性值既可以直接填写 100 至 900 这样的数字，也可以填写`normal`、`bold`这样的单词。`normal`的值相当于 400，`bold`的值相当于 700。如下：
```css ```css
@ -121,7 +121,7 @@ font-weight 字体加粗属性，是让前端同学最迷茫的属性。当你
## 大部分字体不是免费的 ## 大部分字体不是免费的
有一点你需要知道：你所见到的大部分字体，都不是免费的。换句话说，如果你想用第三方字体从事商业活动，要先交钱，获得授权后才可以使用。你在给公司做网页的时候，就是在从事商业活动。 有一点你需要知道：你所见到的大部分字体，都不是免费的。换句话说，如果你想用第三方字体从事商业活动，要先交钱，获得授权后才可以使用。你在给公司做网页的时候，就是一种商业行为。
免费字体当然有，比如[思源黑体](https://baike.baidu.com/item/%E6%80%9D%E6%BA%90%E9%BB%91%E4%BD%93/14919098)（Adobe 和 Google 在2014年7月联合推出的一款开源字体）、阿里巴巴普惠体等。但这些免费字体，我们平时基本用不到。 免费字体当然有，比如[思源黑体](https://baike.baidu.com/item/%E6%80%9D%E6%BA%90%E9%BB%91%E4%BD%93/14919098)（Adobe 和 Google 在2014年7月联合推出的一款开源字体）、阿里巴巴普惠体等。但这些免费字体，我们平时基本用不到。
@ -175,7 +175,7 @@ font-weight 字体加粗属性，是让前端同学最迷茫的属性。当你
``` ```
为了使用这个`JDZH`字体， JD公司在实际开发中，是这样做的： 为了使用这个`JDZH`字体， JD公司在实际开发网页时，是这样做的：
- 步骤1：在公共的 CSS 文件中引入上方的字体库代码。这样的话，当页面加载时，用户的终端就会去下载这个字体库。 - 步骤1：在公共的 CSS 文件中引入上方的字体库代码。这样的话，当页面加载时，用户的终端就会去下载这个字体库。
@ -187,7 +187,7 @@ font-weight 字体加粗属性，是让前端同学最迷茫的属性。当你
## 最后一段 ## 最后一段
一个再小的知识点，也是有很多学问的。光是“字体”这一点，就足够成为一门学科。 一个再不起眼的知识点，也是有很多学问的。光是“字体”这一点，就足够成为一门学科。
2005年，苹果公司创始人乔布斯（Steve Jobs）在斯坦福大学的毕业典礼演讲上，有过这样一段话： 2005年，苹果公司创始人乔布斯（Steve Jobs）在斯坦福大学的毕业典礼演讲上，有过这样一段话：
@ -197,17 +197,21 @@ font-weight 字体加粗属性，是让前端同学最迷茫的属性。当你
> 可以说，如果我当时没有退学，就不会有机会去参加我感兴趣的美术字课程，Mac 也就不会拥有那些美妙的排版和字体。而当 Windows 系统借鉴了Mac之后，似乎所有的电脑都应该是这个样子的。 > 可以说，如果我当时没有退学，就不会有机会去参加我感兴趣的美术字课程，Mac 也就不会拥有那些美妙的排版和字体。而当 Windows 系统借鉴了Mac之后，似乎所有的电脑都应该是这个样子的。
> 当然，当时的我没有办法把这些点点滴滴连接起来，但是，当我十年后回顾这一切的时候，一切都变得豁然开朗。 > 当然，当时的我没有办法把这些点点滴滴连接起来，但是，**当我十年后回顾这一切的时候，一切都变得豁然开朗**。
## 参考链接 ## 参考链接
- 常见的免费字体：<http://zenozeng.github.io/Free-Chinese-Fonts/>
- [iconfont](https://www.iconfont.cn/) - [iconfont](https://www.iconfont.cn/)
- [乔布斯斯坦福大学演讲-翻译](https://zhuanlan.zhihu.com/p/24242767) - [乔布斯斯坦福大学演讲-翻译](https://zhuanlan.zhihu.com/p/24242767)
- [乔布斯斯坦福大学演讲-翻译](https://www.douban.com/note/149058647/) - [乔布斯斯坦福大学演讲-翻译](https://www.douban.com/note/149058647/)
- [阿里巴巴官方发布免费商用字体：阿里巴巴普惠体](https://mp.weixin.qq.com/s/daKUNnF_Ste-O1l0sR89sQ)
- [得到 | 从甲骨文至得到今楷，造字的人都是神](https://mp.weixin.qq.com/s/ZnMxrhoH9piLf9EaSIwiGA) - [得到 | 从甲骨文至得到今楷，造字的人都是神](https://mp.weixin.qq.com/s/ZnMxrhoH9piLf9EaSIwiGA)