update: 各大平台的默认字体加粗效果
This commit is contained in:
		
							parent
							
								
									e50e10efe0
								
							
						
					
					
						commit
						7cf351fddd
					
				@ -1,9 +1,11 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
## 前言
 | 
					## 前言
 | 
				
			||||||
 | 
					
 | 
				
			||||||
我周围的码农当中,有很多是技术大神。然而在做页面开发时,却常常被字体这种简单的东西所困扰。
 | 
					我周围的码农当中,有很多是技术大神,却常常被字体这种简单的东西所困扰。
 | 
				
			||||||
 | 
					
 | 
				
			||||||
这篇文章,我们来讲一讲关于字体的常识。这些常识所涉及到的问题,有很强的可操作性,都是在实际业务中真实遇到的,都是需要你和产品经理、设计师不断重复沟通的。
 | 
					这篇文章,我们来讲一讲关于字体的常识。这些常识所涉及到的问题,有很强的可操作性,都是在实际业务中真实遇到的,都是需要开发同学和产品经理、设计师不断重复沟通的。
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					真的只是“**系统默认,无从解释**”这么简单吗?是产品被忽悠?还是开发在敷衍?二者之间的博弈究竟谁能胜出?学会本文,你就能胜出。
 | 
				
			||||||
 | 
					
 | 
				
			||||||
## 字体分类
 | 
					## 字体分类
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -56,7 +58,7 @@ css 中的字体族可以理解成是某一类字体。常见的字体族可以
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
参考链接:[serif,sans-serif,monospace,cursive和fantasy](http://www.ayqy.net/blog/serif%EF%BC%8Csans-serif%EF%BC%8Cmonospace%EF%BC%8Ccursive%E5%92%8Cfantasy/)
 | 
					参考链接:[serif,sans-serif,monospace,cursive和fantasy](http://www.ayqy.net/blog/serif%EF%BC%8Csans-serif%EF%BC%8Cmonospace%EF%BC%8Ccursive%E5%92%8Cfantasy/)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
### 多字体 fallback
 | 
					## 多字体 fallback 机制
 | 
				
			||||||
 | 
					
 | 
				
			||||||
多字体 fallback 机制:当指定的字体找不到(或者某些文字不支持这个字体)时,那就接着往后找。比如:
 | 
					多字体 fallback 机制:当指定的字体找不到(或者某些文字不支持这个字体)时,那就接着往后找。比如:
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -121,7 +123,9 @@ font-weight 字体加粗属性,是让前端同学最迷茫的属性。当你
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
## 各大平台的默认字体加粗效果
 | 
					## 各大平台的默认字体加粗效果
 | 
				
			||||||
 | 
					
 | 
				
			||||||
一张图,胜过千言万语。解释了这么多,我们来看看各大平台的字体加粗效果是什么样的。以下截图,都是我亲测的结果,如果你打算让别人看效果,直接把下面的图丢给他即可。我想,像我这样贴心的前端,不多见了。
 | 
					一张图,胜过千言万语。解释了这么多,我们来看看各大平台的字体加粗效果是什么样的。
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					以下截图,都是我亲测的结果,如果你打算让别人看效果,直接把下面的图丢给他即可。我想,像我这样贴心的前端,不多见了。
 | 
				
			||||||
 | 
					
 | 
				
			||||||
**1、Mac 平台的默认字体加粗效果**:(苹方字体)
 | 
					**1、Mac 平台的默认字体加粗效果**:(苹方字体)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -135,21 +139,18 @@ font-weight 字体加粗属性,是让前端同学最迷茫的属性。当你
 | 
				
			|||||||
 | 
					
 | 
				
			||||||

 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
可以看出,“苹方”字体的500 和600,加粗效果是不同的。
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
**4、Android 平台(华为 P30 Pro)的默认字体加粗效果**:(Droid Sans 字体)
 | 
					**4、Android 平台(华为 P30 Pro)的默认字体加粗效果**:(Droid Sans 字体)
 | 
				
			||||||
 | 
					
 | 
				
			||||||

 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
可以看出,Android 平台的 Droid Sans 字体,只有 `>=700`,才会加粗。
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
**总结**:(各大平台的默认字体加粗效果)
 | 
					**总结**:(各大平台的默认字体加粗效果)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
- Mac & iOS 平台的“苹方”字体:500 和600,加粗效果是不同的;`>=600`的加粗效果是相同的。
 | 
					- Mac & iOS 平台的“苹方”字体:500 和600,加粗效果是不同的;`>=600`的加粗效果是相同的。
 | 
				
			||||||
 | 
					
 | 
				
			||||||
- Windows 平台的“微软雅黑”字体:只有 `>=600` 才会加粗;而且只有一种加粗效果。
 | 
					- Windows 平台的“微软雅黑”字体:只有 `>=600` 才会加粗,而且加粗效果相同
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					- Android 平台的 Droid Sans 字体,只有 `>=700`才会加粗;而且加粗效果相同。
 | 
				
			||||||
 | 
					
 | 
				
			||||||
- Android 平台的 Droid Sans 字体,只有 `>=700`才会加粗;而且只有一种加粗效果。
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
## 大部分字体不是免费的
 | 
					## 大部分字体不是免费的
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -216,7 +217,6 @@ font-weight 字体加粗属性,是让前端同学最迷茫的属性。当你
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
这个`JDZH`,我们一般也只使用在阿拉伯数字中;中文和英文,建议使用系统默认字体就行。
 | 
					这个`JDZH`,我们一般也只使用在阿拉伯数字中;中文和英文,建议使用系统默认字体就行。
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					 | 
				
			||||||
## 最后一段
 | 
					## 最后一段
 | 
				
			||||||
 | 
					
 | 
				
			||||||
一个再不起眼的知识点,也是有很多学问的,有个成语叫「见微知著」。光是“字体”这一点,就足够成为一门学科。
 | 
					一个再不起眼的知识点,也是有很多学问的,有个成语叫「见微知著」。光是“字体”这一点,就足够成为一门学科。
 | 
				
			||||||
@ -232,7 +232,7 @@ font-weight 字体加粗属性,是让前端同学最迷茫的属性。当你
 | 
				
			|||||||
> 当然,当时的我没有办法把这些点点滴滴连接起来,但是,**当我十年后回顾这一切的时候,一切都变得豁然开朗**。
 | 
					> 当然,当时的我没有办法把这些点点滴滴连接起来,但是,**当我十年后回顾这一切的时候,一切都变得豁然开朗**。
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
## 参考链接
 | 
					## 推荐链接
 | 
				
			||||||
 | 
					
 | 
				
			||||||
- 常见的免费字体:<http://zenozeng.github.io/Free-Chinese-Fonts/>
 | 
					- 常见的免费字体:<http://zenozeng.github.io/Free-Chinese-Fonts/>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user