fontweight属性值(fontweight属性值 微信小程序)

扫码添加渲大师小管家，免费领取渲染插件、素材、模型、教程合集大礼包！

点击右上方红色按钮关注“小郑搞码事”。每天都能学到知识。搞懂一个问题！

大家好！我是/小郑搞码事/的小郑

今天和大家聊一下用的次数比较多的

font-weight属性。

都用过吧？

用的比较多的值可能是下面这两个：

normal

bold

其实这两个值只不过是font-weight的冰山一角。

我们还可以设置成：

lighter

bolder

甚至还有更精细的取值如下所示：

100

200

300

400===normal

500

600

700===bold

800

900

这些大家都明白吧。这些值在使用的时候不能随便取的。比如。你一时兴起。要来一个font-weight:440。行吗？当然不行。只能是100到900整百数。

linghter/bolder到底是个什么状态?

看到上面的取值了吗？400相当于normal。而取值700相当于bold。加上头100。尾900。lighter和bolder是基于这4个临界点来解析渲染的。详细如下

继承值/bolder/lighter

100/400/100

200/400/100

300/400/100

400/700/100

500/700/100

600/900/400

700/900/400

800/900/700

900/900/700

有些人可能注意到一点。平时项目中无论设置的是300还是400。500文字的粗细都没有任何变化。只有到700的时候才会看到加粗。这是什么原因呢？

实际上。所有这些数值关键字浏览器都是支持的。之所以没有看到任何精细粗细的变化。是因为我们的系统里面缺乏对应粗细的字体。

也就是说。font-weight要想真正发挥潜力。问题不在于CSS的支持。而在于是否存在对应的字体。

那如果又没有对应的字体文件。我们又想有多档字重效果。该如何？

答案是：也许font-face可以帮助你。

（此处已添加圈子卡片。请到今日头条客户端查看）