CSS中如何使用font-weight屬性？這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！

創(chuàng)新互聯(lián)擁有十年成都網(wǎng)站建設(shè)工作經(jīng)驗(yàn),為各大企業(yè)提供成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)服務(wù)，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、App定制開(kāi)發(fā)、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、程序開(kāi)發(fā)、網(wǎng)站優(yōu)化（SEO優(yōu)化）、微網(wǎng)站、域名注冊(cè)等，憑借多年來(lái)在互聯(lián)網(wǎng)的打拼，我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了很多網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷經(jīng)驗(yàn)，集策劃、開(kāi)發(fā)、設(shè)計(jì)、營(yíng)銷、管理等網(wǎng)站化運(yùn)作于一體，具備承接各種規(guī)模類型的網(wǎng)站建設(shè)項(xiàng)目的能力。

我們下來(lái)準(zhǔn)備一個(gè)HTML代碼

代碼如下

加粗ABCabc123
加粗ABCabc123

然后我們?cè)贑SS中應(yīng)用font-weight屬性

font-weight屬性的使用方法

我們先來(lái)看最基本的屬性值normal和bold

p.sample1 {font-weight:normal; }
p.sample2 {font-weight:bold; }

normal是默認(rèn)值，初始值被設(shè)定為這個(gè)。設(shè)置bold值字體會(huì)變粗

在瀏覽器中顯示效果如下

下面我們來(lái)看看用數(shù)字指定文字的粗細(xì)

我們先來(lái)將上述HTML代碼更改一下

加粗ABCabc123
加粗ABCabc123
加粗ABCabc123

CSS代碼如下

p.sample1 {font-weight:200; }
p.sample2 {font-weight:400; }
p.sample3 {font-weight:800; }

在數(shù)值中指定的種類有100 / 200 / 300 / 400 / 500 / 600 / 600 / 600 / 800 / 900的9個(gè)階段，實(shí)際上在瀏覽器中只設(shè)定了兩種，在頁(yè)面上只顯示了最下面的800。（在值700以上的情況下和bold一樣的顯示）

最后，我們來(lái)看一下bolder和lighter

我們來(lái)看具體的例子

HTML代碼與上述相同

CSS代碼如下

body {font-weight:bold; }
p.sample1 {font-weight:inherit; }
p.sample2 {font-weight:bolder; }
p.sample3 {font-weight:lighter; }

在瀏覽器上顯示效果如下

第一行文字繼承了父元素，所以顯示加粗

第二行文字設(shè)置為bolder表示比父元素粗，所以與第一行元素一樣。

第三行被設(shè)置為比父元素的bold更細(xì)，變成了普通的粗細(xì)。

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)CSS中如何使用font-weight屬性大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。