如何用CSS設(shè)置字體粗細

在CSS中，我們可以使用font-weight屬性來設(shè)置字體的粗細，這個屬性接受多種類型的值，包括關(guān)鍵詞、數(shù)字、以及通過font-weight()函數(shù)定義的自定義粗細度。

字體粗細的關(guān)鍵詞

normal：這是默認值，表示使用瀏覽器默認的字體粗細。

bold：這個值會使字體顯示為粗體。

bolder：這個值會使字體比其父元素的字體更粗。

lighter：這個值會使字體比其父元素的字體更細。

數(shù)字值

100：***細

200：較細

300：中等

400：較粗

500：粗

600：較粗

700：***粗

這些數(shù)字值對應(yīng)了不同的字體粗細度，可以根據(jù)需要選擇合適的數(shù)值。

自定義字體粗細

除了關(guān)鍵詞和數(shù)字，我們還可以使用font-weight()函數(shù)來定義自定義的字體粗細度。

p {
  font-weight: font-weight(bold, 700);
}

在這個例子中，我們定義了一個自定義的字體粗細度，它結(jié)合了bold關(guān)鍵詞和700數(shù)值，使字體既具有粗體的外觀，又具有一定的透明度。

字體粗細的繼承

字體粗細度是可以繼承的，如果一個元素的字體粗細度沒有顯式設(shè)置，那么它將使用其父元素的字體粗細度。

div {
  font-weight: bold;
}
p {
  font-weight: inherit;
}

在這個例子中，段落p將繼承其父元素div的字體粗細度，顯示為粗體。

字體粗細的應(yīng)用

我們可以通過設(shè)置不同元素的字體粗細度來創(chuàng)建視覺上的層次感和重點。

h1 {
  font-weight: bold;
}
h2 {
  font-weight: 600;
}

在這個例子中，我們?yōu)闃祟}設(shè)置了不同的字體粗細度，使h1顯示為粗體，而h2顯示為較粗體，從而突出了標題的層次感和重要性。