字库设计与运用(二)

Recommanded by editor
上海/UI设计师/6年前/1741浏览
字库设计与运用(二)Recommanded by editor

了解 font-weight 属性,对设计字体很有帮助,比如要设计一套字库,首先要找准 Normal(400) 字重外形,在此基础再设计其他字重。


继上一篇 font-family 基础属性后,今天再学习了解一下 font-weight 属性。


1、Font-Weight 属性

'font-weight' 属性执行字体中字形的重量,这取决于黑度等级或笔划粗细。也就是说,在 CSS 中,通过 font-weight 属性用来设置字体的粗细值,取值为thin |normal | medium | bold,默认为 normal,thin 为极细体,normal 为正常粗细,medium 为中粗,bold 为粗体。如:


为了实现更细致的控制,CSS 也允许使用数字来设置字体的粗细。数字必须是100的整数倍,取值在 100~900 之间,值越大字体越粗。400 等同于 normal,700 等同于 bold。


这些有序排列中的每个值,表示至少与其起身拥有相同黑度的重量。其大致符合下列通用重量名称:

• 100 - Thin

• 200 - Extra Light (Ultra Light)

• 300 - Light

• 400 – Regular (Normal Book Roman)

• 500 - Medium

• 600 - Semi Bold (Demi Bold)

• 700 - Bold

• 800 - Extra Bold (Ultra Bold)

• 900 - Black (Heavy)


为什么说大致对应呢?在有些字库下是有差异的,比如在 Adobe Typekit 字库中对字重描述的划分列表中, Heavy 指的是 800 ,Black 指的是 900。

• 100 - Thin

• 200 - Extra Light 

• 300 - Light

• 400 – Normal、Book 

• 500 - Medium

• 600 - Demi Bold

• 700 - Bold

• 800 - Heavy

• 900 - Black 


通常一个特定的字体家族仅会包含少数的可用重量。很少存在满足有 9 个字重刚好跟 100~900 的 CSS 字重一一对应的情况,但是,大部分字库至少有两个字重,400(normal) 和 700(bold) 对应的字重是每种字体必备的譬如常见的 Arial、Helvetica、Georgia等等,只有 400(normal) 和 700(bold)两个字重。


2、字体匹配算法

若一个重量所指定的字形不存在,那则应当使用相近重量的字形。

根据官方字体匹配算法,通常,较重的重量会映射到更重的重量、较轻的重量会映射到更轻的重量:

• 如果需要的重量小于400,则首先降序检查小于所需重量的各重量,之后升序检查大于所需重量的各重量,直到找到匹配的重量。

• 如果需要的重量大于500,则首先升序检查大于所需重量的各重量,之后降序检查小于所需重量的各重量,直到找到匹配的重量。

• 如果所需的重量是400,则首先检查500,之后执行所需重量小于400的规则。

• 如果所需的重量是500,则首先检查400,之后执行所需重量大于500的规则。


3、官方例子和实际测试

下面我们通过官方例子和实际测试来好好理解这个匹配算法规则。W3C规范标准中给出这么一个例子:


拿 font-weight: 200 来说,字体中没有可以直接匹配的字重,那么200小于400,则根据第一条规则,先降序查找匹配,但是都没有可匹配的200、100,那么升序查找为400,结果可匹配。


拿 font-weight: 500 来说,字体中没有可以直接匹配的字重,那么500=500,则根据第四条规则,首先检查400,没有可匹配的字重,之后再根据第二条规则,升序检查,可匹配到600字重。


4、结尾

了解 font-weight 属性,对我们设计字体是很有帮助的,比如要设计一套字库,首先必须要找准 Normal(400) 字重外形,在此基础上根据需要设计其他字重,如 Light、Medium、Bold等,当然你也可以只设计 Normal、Bold 两个字重。


11
Report
|
31
Share
相关推荐
字库设计与运用(三)
Recommanded by editor
文章
教程
教程
教程
教程
作品收藏夹
教程
1302
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
MOVA 扫地机器人-活水版
Homepage recommendation
相关收藏夹
教程
教程
教程
教程
作品收藏夹
教程
1302
00学习资料
00学习资料
00学习资料
00学习资料
作品收藏夹
文章
文章
文章
文章
作品收藏夹
文章
文章
文章
文章
作品收藏夹
知識
知識
知識
知識
作品收藏夹
教程
教程
教程
教程
作品收藏夹
大家都在看
Log in