update: 字体的常识
This commit is contained in:
		
							parent
							
								
									4feb0aba3d
								
							
						
					
					
						commit
						aa7b7a2dc9
					
				@ -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)
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user