一、font-weight是什么

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

二、font-weight使用場(chǎng)景

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

1. 改變文本中的字體粗細(xì)度。

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

3. 改變?cè)氐哪J(rèn)字體粗細(xì)度。

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

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

    
        
這是一段粗體的藍(lán)色文字
    

該段文字效果為：這是一段粗體的藍(lán)色文字

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

    
        
這是一段正常字體的藍(lán)色文字
    

該段文字效果為：這是一段正常字體的藍(lán)色文字

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

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

    
        這是一個(gè)加粗的按鈕
    

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

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

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

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

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

六、參考資料

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