记录一次关于css font-weight引发的风波

前言

在最近的一次开发中，设计同事说我设置的页面标题字体很粗，想让我调细一些，起初，我以为只是一个很简单的问题，但是调整的时候，发现事情并没有这么简单，于是，写下这篇文章记录踩过的坑。

问题案例

页面

<div className='box'><p className='p1'>The sky reflects the earth, and the sky makes the sound of rain</p><p className='p2'>The sky reflects the earth, and the sky makes the sound of rain</p><p className='p3'>The sky reflects the earth, and the sky makes the sound of rain</p>
</div>

<div className='box'><p className='p1'>映地为天色，飞空作雨声</p><p className='p2'>映地为天色，飞空作雨声</p><p className='p3'>映地为天色，飞空作雨声</p>
</div> 

样式

p {text-align: left;font-family: Robot, Arial, Helvetica, PingFangSC, Microsoft Yahei, sans serif;&.p1 {font-weight: 100;}&.p2 {font-weight: 400;}&.p3 {font-weight: 700;}
} 

这里，我分别指定了一组中英文的渐进字重文段，然后我们来看看效果

可以明显的看到，英文只展示出了两种字重的样式，而中文展示出了三种字重的情况，这里是因为什么呢，我们来一步一步的说。

font-weight

font-weight属性决定着文字的粗细程度，值可以为数字或者关键字，常用的大概有以下类