font-weight属性

一、font-weight是什么

Font-weight属性控制字体的粗细程度。它是由数字或者关键字表示的，数字从100 到900，关键字有normal、bold、bolder、lighter四种。字体粗细程度由数字表示时，100表示 extra light，200 表示 lighter，300表示 light，400表示 normal/regular（默认的字体粗细度），500表示 medium，600表示 semi-bold，700表示 bold，800表示 extra-bold，900表示 black。在使用数字表示的时候，有一点需要注意，HTML规范中提供的数字只有100、200、300、400、500、600、700、800、900等九个等级的数字，其他的数字浏览器不保证按规范解析。

二、font-weight使用场景

Font-weight可以应用于文字和其他元素（如heading、button等）。其主要使用场景为：

1. 改变文本中的字体粗细度。

2. 作为设计响应式网页的切换机制。

3. 改变元素的默认字体粗细度。

三、font-weight在文字中的应用

通常情况下，字号较大、颜色较鲜明的文字，加粗对于视觉效果的提升非常显著。因此，font-weight属性在文字中的应用非常广泛。以下是一个简单的例子：

    
        
这是一段粗体的蓝色文字
    

该段文字效果为：这是一段粗体的蓝色文字

通过设置font-weight: bold，可以使文字变成粗体；通过设置font-weight: normal，则可以把文字设回默认的正常字体，效果如下：

    
        
这是一段正常字体的蓝色文字
    

该段文字效果为：这是一段正常字体的蓝色文字

四、font-weight在其他元素中的应用

Font-weight除了可以应用在文字中，还可以应用于heading、button、list等其他元素中。以下是一个例子：

    
        这是一个加粗的按钮
    

该按钮的文字效果为：这是一个加粗的按钮

五、font-weight在响应式网页设计中的应用

在响应式网页设计中，通常会通过设置不同的font-weight响应不同的屏幕尺寸大小，以达到更好的视觉效果。以下是一个简单的例子：

    
        @media only screen and (max-width: 600px) {
            h1 {
                font-weight: lighter;
            }
        }
    

该代码段表示，当屏幕尺寸小于等于600px时，h1元素的字体粗细度变成lighter。这样就可以更好地适应手机端屏幕大小，使页面看起来更舒适。

六、参考资料

1. w3school https://www.w3school.com.cn/tags/att_font-weight.asp

2. MDN https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-weight