update: 字体的常识

This commit is contained in:
qianguyihao 2019-10-13 14:26:43 +08:00
parent 4feb0aba3d
commit aa7b7a2dc9

View File

@ -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之后似乎所有的电脑都应该是这个样子的。
> 当然,当时的我没有办法把这些点点滴滴连接起来,但是,当我十年后回顾这一切的时候,一切都变得豁然开朗。
> 当然,当时的我没有办法把这些点点滴滴连接起来,但是,**当我十年后回顾这一切的时候,一切都变得豁然开朗**
## 参考链接
- 常见的免费字体:<http://zenozeng.github.io/Free-Chinese-Fonts/>
- [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)