diff --git a/03-CSS进阶/02-网页设计和开发中,关于字体的常识.md b/03-CSS进阶/02-网页设计和开发中,关于字体的常识.md index 879b949..339485b 100644 --- a/03-CSS进阶/02-网页设计和开发中,关于字体的常识.md +++ b/03-CSS进阶/02-网页设计和开发中,关于字体的常识.md @@ -15,7 +15,7 @@ 常见的衬线体有: -- 宋体、楷体。 +- 宋体、楷体 - Times New Roman @@ -26,7 +26,7 @@ - 黑体 - Windows平台默认的中文字体:微软雅黑(Microsoft Yahei) - Windows平台默认的英文字体:Arial -- Mac & iOS 平台默认的的中文字体:苹方(PingFang SC) +- Mac & iOS 平台默认的中文字体:苹方(PingFang SC) - Mac & iOS 平台默认的英文字体:San Francisco - Android 平台默认字体:Droid Sans @@ -69,7 +69,7 @@ css 中的字体族可以理解成是某一类字体。常见的字体族可以 上方 CSS 代码的意思是:让 div1 在 Mac & iOS 平台用苹方字体,在 Win 平台用微软雅黑字体,如果这两个字体都没有,就随便找一个等宽的字体进行渲染。 -注意: +**注意**: (1)写css 代码时,字体族不需要带引号。 @@ -77,17 +77,17 @@ css 中的字体族可以理解成是某一类字体。常见的字体族可以 ## font-weight:字体的加粗属性 -font-weight 字体加粗属性,是让前端同学最迷茫的属性。当你把做好的网页拿给产品经理验收时,网页一打开,产品经理首先关注到的就是字体加粗问题,你信不信?下面这些话都是产品经理的口头禅,想必早已让你产生了幻听: +font-weight 字体加粗属性,是让前端同学最迷茫的属性。当你把做好的网页拿给产品经理验收时,网页一打开,产品经理首先关注到的就是字体的加粗问题,你信不信?下面这些话都是产品经理的口头禅,想必早已让你产生了幻听: -- “这个字体有没有加粗?” +- “这个字体怎么没有加粗?” - “这个字体是不是太粗了点?” - “为什么 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 @@ -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月联合推出的一款开源字体)、阿里巴巴普惠体等。但这些免费字体,我们平时基本用不到。 @@ -175,7 +175,7 @@ font-weight 字体加粗属性,是让前端同学最迷茫的属性。当你 ``` -为了使用这个`JDZH`字体, JD公司在实际开发中,是这样做的: +为了使用这个`JDZH`字体, JD公司在实际开发网页时,是这样做的: - 步骤1:在公共的 CSS 文件中引入上方的字体库代码。这样的话,当页面加载时,用户的终端就会去下载这个字体库。 @@ -187,7 +187,7 @@ font-weight 字体加粗属性,是让前端同学最迷茫的属性。当你 ## 最后一段 -一个再小的知识点,也是有很多学问的。光是“字体”这一点,就足够成为一门学科。 +一个再不起眼的知识点,也是有很多学问的。光是“字体”这一点,就足够成为一门学科。 2005年,苹果公司创始人乔布斯(Steve Jobs)在斯坦福大学的毕业典礼演讲上,有过这样一段话: @@ -197,17 +197,21 @@ font-weight 字体加粗属性,是让前端同学最迷茫的属性。当你 > 可以说,如果我当时没有退学,就不会有机会去参加我感兴趣的美术字课程,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/daKUNnF_Ste-O1l0sR89sQ) + - [得到 | 从甲骨文至得到今楷,造字的人都是神](https://mp.weixin.qq.com/s/ZnMxrhoH9piLf9EaSIwiGA)