设计师一定遇见过开发不按照标注图来写前端的情况

大多数的开发小哥哥是认真负责的，

当然也不排除一些不那么认真的

他们会这么和你说：

”不加粗行不行？

你这个没法加粗！”

你一听既然是无法实现的功能那就算了吧

很多时候设计师都妥协了

特别是新手小白很容易妥协

我最近就遇见了

有个开发拿到我的设计图，指着下图我的H5标注说：

“你这个字体是多少像素的粗啊？”

“以前我拿到的设计图这里有标注出每个字体加粗了多少像素”

假如你碰我和我一样的事情怎么办？

所以今天我就是来分享给你们哒(`・ω・´)

设计师所出的设计图描述字重的地方往往是这样的：

但是字体的粗细是有很多的！例如苹方就有如下6种：

如上图描述字重的地方用的是Regular，知道这对应的font-weight值是多少吗？

字体粗细：‘font-weight’属性
名称： font-weight
取值： normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初始： normal

看不懂上面一段没关系，看下面的(`・ω・´)

‘font-weight’属性执行字体中字形的重量，这取决于黑度等级或笔划粗细。
其值的意义如下：
100至900
这些有序排列中的每个值，表示至少与其起身拥有相同黑度的重量。

其大致符合下列通用重量名称：

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)

normal、regular与'400'相同。
bold与'700'相同。
bolder指定外观的重量大于继承的值。
lighter 指定外观的重量小于继承的值。

最后就会这样啦！

若以如果开发小哥哥说不知道你这个字是多粗

你就知道把我这篇文章扔给他！

也祝大家别遇见这样的问题(`・ω・´)～