font-weight屬性

一、font-weight是什么

Font-weight屬性控制字體的粗細程度。它是由數(shù)字或者關(guān)鍵字表示的，數(shù)字從100 到900，關(guān)鍵字有normal、bold、bolder、lighter四種。字體粗細程度由數(shù)字表示時，100表示 extra light，200 表示 lighter，300表示 light，400表示 normal/regular（默認的字體粗細度），500表示 medium，600表示 semi-bold，700表示 bold，800表示 extra-bold，900表示 black。在使用數(shù)字表示的時候，有一點需要注意，HTML規(guī)范中提供的數(shù)字只有100、200、300、400、500、600、700、800、900等九個等級的數(shù)字，其他的數(shù)字瀏覽器不保證按規(guī)范解析。

二、font-weight使用場景

Font-weight可以應(yīng)用于文字和其他元素（如heading、button等）。其主要使用場景為：

1. 改變文本中的字體粗細度。

2. 作為設(shè)計響應(yīng)式網(wǎng)頁的切換機制。

3. 改變元素的默認字體粗細度。

三、font-weight在文字中的應(yīng)用

通常情況下，字號較大、顏色較鮮明的文字，加粗對于視覺效果的提升非常顯著。因此，font-weight屬性在文字中的應(yīng)用非常廣泛。以下是一個簡單的例子：

    
        
這是一段粗體的藍色文字
    

該段文字效果為：這是一段粗體的藍色文字

通過設(shè)置font-weight: bold，可以使文字變成粗體；通過設(shè)置font-weight: normal，則可以把文字設(shè)回默認的正常字體，效果如下：

    
        
這是一段正常字體的藍色文字
    

該段文字效果為：這是一段正常字體的藍色文字

四、font-weight在其他元素中的應(yīng)用

Font-weight除了可以應(yīng)用在文字中，還可以應(yīng)用于heading、button、list等其他元素中。以下是一個例子：

    
        這是一個加粗的按鈕
    

該按鈕的文字效果為：這是一個加粗的按鈕

五、font-weight在響應(yīng)式網(wǎng)頁設(shè)計中的應(yīng)用

在響應(yīng)式網(wǎng)頁設(shè)計中，通常會通過設(shè)置不同的font-weight響應(yīng)不同的屏幕尺寸大小，以達到更好的視覺效果。以下是一個簡單的例子：

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

該代碼段表示，當(dāng)屏幕尺寸小于等于600px時，h1元素的字體粗細度變成lighter。這樣就可以更好地適應(yīng)手機端屏幕大小，使頁面看起來更舒適。

六、參考資料

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