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/)
 | 
			
		||||
 | 
			
		||||
### 多字体 fallback
 | 
			
		||||
## 多字体 fallback 机制
 | 
			
		||||
 | 
			
		||||
多字体 fallback 机制:当指定的字体找不到(或者某些文字不支持这个字体)时,那就接着往后找。比如:
 | 
			
		||||
 | 
			
		||||
@ -121,7 +123,9 @@ font-weight 字体加粗属性,是让前端同学最迷茫的属性。当你
 | 
			
		||||
 | 
			
		||||
## 各大平台的默认字体加粗效果
 | 
			
		||||
 | 
			
		||||
一张图,胜过千言万语。解释了这么多,我们来看看各大平台的字体加粗效果是什么样的。以下截图,都是我亲测的结果,如果你打算让别人看效果,直接把下面的图丢给他即可。我想,像我这样贴心的前端,不多见了。
 | 
			
		||||
一张图,胜过千言万语。解释了这么多,我们来看看各大平台的字体加粗效果是什么样的。
 | 
			
		||||
 | 
			
		||||
以下截图,都是我亲测的结果,如果你打算让别人看效果,直接把下面的图丢给他即可。我想,像我这样贴心的前端,不多见了。
 | 
			
		||||
 | 
			
		||||
**1、Mac 平台的默认字体加粗效果**:(苹方字体)
 | 
			
		||||
 | 
			
		||||
@ -135,21 +139,18 @@ font-weight 字体加粗属性,是让前端同学最迷茫的属性。当你
 | 
			
		||||
 | 
			
		||||

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

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