盡管你可能還沒有意識到，但實際上你已經(jīng)對字體加粗很熟悉了，粗體文本就是字體加粗的一個很常見的例子。利用font-weight屬性，CSS允許對字體加粗有更多控制，至少在理論上是這樣。

font-weight

值：

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

初始值：

normal

應(yīng)用于：

所有元素

繼承性：

有

計算值：

數(shù)字值（如100等等），或某個數(shù)字值加上某個相對數(shù)（bolder或 lighter）

一般來講，字體加粗越重，字體看上去就越黑且“越粗”。標(biāo)示加粗字體的方法有很多。例如，名為Zurich的字體系列有很多變形，如Zurich Bold、Zurich Black、Zurich UltraBlack、Zurich Light和Zurich Regular。這些變形都使用相同的基本字體，但是每個變形都有不同的加粗。

現(xiàn)在假設(shè)你希望一個文檔使用Zurich，但是你想使用所有這些不同的加粗級別。可以直接通過font-family屬性來指定，不過最好不要這樣做。另外，如果必須寫下面這樣的樣式表也沒意思：

h1 {font-family:'Zurich UltraBlack ', sans-serif;}

h2 {font-family:'Zurich Black', sans-serif;}

h3 {font-family:'Zurich Bold', sans-serif;}

h4, p {font-family: Zurich', sans-serif;}

small {font-family:'Zurich Light', sans-serif;}

寫這樣一個樣式表顯然很乏味，不僅如此，只有當(dāng)所有人都安裝了這些字體時，樣式表才能起作用，但更有可能的情況是，大多數(shù)人都沒有安裝所有這些字體。更有意義的做法是為整個文檔指定一個字體系列，然后為不同元素指定不同的加粗。從理論上講，可以對font-weight屬性使用不同的值來做到這一點。以下是一個很簡單的font-weight:聲明：

b {font-weight: bold;}

很簡單，這個聲明指出b元素應(yīng)當(dāng)使用一種粗體字體顯示，換句話說，要用一種比文檔正常字體更粗的字體來顯示。當(dāng)然，我們經(jīng)常見到這種情況，因為b確實會讓文本加粗。

不過，實際情況是使用字體的一種加粗變形來顯示b元素。因此，如果使用Times顯示一個段落，而且其中一部分是粗體，那么實際上當(dāng)前使用了同一字體的兩種變形：Times 和TimesBold。常規(guī)的文本使用Times顯示，加粗的文本使用TimesBold顯示。

加粗如何起作用

為了理解用戶代理如何確定一個給定字體變形的加粗度，我們暫不考慮加粗如何繼承，首先介紹關(guān)鍵字100-900，這樣最容易理解。定義這些數(shù)字關(guān)鍵字是為了映射字體設(shè)計中的一個很常見的特性，即為字體指定了9級加粗度。例如OpenType采用了一個數(shù)值梯度，其中包含9個值。如果一個字體內(nèi)置了這些加粗級別，那么這些數(shù)字就直接映射到預(yù)定義的級別，100對應(yīng)最細(xì)的字體變形，900對應(yīng)最粗的字體變形。

實際上，這些數(shù)字本身并沒有固有的加粗度。CSS規(guī)范只是指出，每個數(shù)對應(yīng)一個加粗度，它至少與前一個數(shù)指定的加粗度相同。因此，100、200、300和400可能都映射到同樣的較細(xì)變形，500和600可能對應(yīng)到同樣的較粗字體變形，而700、800和900 可能都生成同樣的很粗的字體變形。只要一個關(guān)鍵字對應(yīng)的變形不會比前一個關(guān)鍵字所對應(yīng)變形更細(xì)，就都是允許的。

一般地，這些數(shù)都被定義為與某個常用變形名等價（先不考慮font-weight的其他值）。 400定義為等價于normal, 700對應(yīng)于bold。其他數(shù)不對應(yīng)font-weight的任何其他值，不過它們可能對應(yīng)于常用變形名。如果有一個字體變形標(biāo)為Normal、Regular、Roman 或Book，就會為之指定400，而標(biāo)為Medium的變形會指定為500。不過，如果一個標(biāo)為Medium的變形是唯一可用的變形，它不會指定為500而會是400。

如果給定的字體系列中定義的加粗度少于9種，用戶代理還必須多做一些工作。在這種情況下，它必須以一種預(yù)定的方式填補(bǔ)這些“空白”：

如果未指定值500的加粗度，其字體加粗與400的相應(yīng)加粗相同。

如果未指定300的加粗度，則為之指定下一個比400更細(xì)的變形。如果沒有可用的較細(xì)變形，為300指定的變形等同于400的相應(yīng)變形。在這種情況下，通常是Normal或Medium。這種方法同樣適用于200和100。

如果未指定600的加粗度，會為之指定下一個比400更粗的變形。如果沒有可用的較粗變形，為600指定的變形則等同于500的相應(yīng)變形。這種方法同樣適用于700、800 和 900.

為了更清楚地說明這種加粗機(jī)制，下面來看指定字體加粗的三個例子。在第一個例子中，假設(shè)字體系列Karrank%是一種OpenType字體，所以它已經(jīng)定義了9個加粗度。在這種情況下，數(shù)字已經(jīng)對應(yīng)到各個加粗級別，關(guān)鍵字normal和bold分別對應(yīng)數(shù)字400和700。

第二個例子中，我們考慮了字體系列Zurich，這個字體系列在本節(jié)最開始討論過。假設(shè)已經(jīng)為其變形指定了不同的font-weight數(shù)字值，見表5-1所示。

前三個數(shù)字值被指定為最細(xì)的字體加粗。不出所料，對于標(biāo)有Regular的變形，相應(yīng)的關(guān)鍵字為normal，數(shù)字值為400。因為在此有一個Medium字體，它指定為數(shù)字值500。這里沒有為600指定任何變形，因此它映射到Bold字體，700也指定為這個字體變形，相應(yīng)的關(guān)鍵字是bold。最后，800和900分別指定為Black和UltraBlack變形。注意，只有已經(jīng)指定了有最大兩級加粗的字體時，800和900才會分別指定為Black和 UltraBlack變形。否則，用戶代理可能會將其忽略，而將800和900指定為Bold字體，或者可能會把它們都指定為某種Black變形。

最后，來考慮Times的一種縮減版本。表5-2中只有兩種加粗變形：TimesRegular和 TimesBold。

當(dāng)然，關(guān)鍵字normal和bold的指定很直接。至于數(shù)字，100~300被指定為Regular字體，因為沒有更細(xì)的字體了。400按預(yù)想的那樣被指定為Regular，但是500呢？它也被指定為Regular （或normal）字體，因為沒有可用的Medium字體，因此它與400被指定為同樣的字體。至于余下的數(shù)字，與往常一樣，700被指定為bold，由于沒有一種更粗的字體，800和900只能被指定到下一個較細(xì)的字體，即Bold字體。最后，600 要被指定到下一個更粗的字體，當(dāng)然這就是Bold字體。

font-weight是可以繼承的，所以如果將一個段落設(shè)置為bold:

p.one {font-weight: bold;}

那么它的所有子元素都會繼承這個加粗度，如圖5-4所示。

這很平常，但是如果你使用最后兩個值（bolder和lighter），情況會變得很有意思，有必要對這兩個值詳細(xì)討論。一般來講，這些關(guān)鍵字的效果正如你期望的那樣：它們會讓文本比其父元素的字體加粗更粗或更細(xì)。首先，我們來考慮bolder。

讓字體更粗

如果將一個元素的加粗設(shè)置為bolder，用戶代理首先必須確定從父元素繼承的font-weight值。然后選擇一個數(shù)，它對應(yīng)于比所繼承值更粗的一個字體加粗，而且在滿足這個條件的所有數(shù)中，要選擇最小的一個數(shù)。如果沒有可用的字體，用戶代理會把該元素的字體加粗設(shè)置為下一個更大的數(shù)字值，除非這個值已經(jīng)是900，如果確實如此，加粗則保持為900。因此，可能會遇到以下情況，如圖5-5所示：

p {font-weight: normal;}

p em {font-weight: bolder;}/* results in bold text, evaluates.to '700'*/

h1 {font-weight: bold;}

h1 b {font-weight: bolder;}/* if no bolder face exists, evaluates to _800'*/

div {font-weight: 100;}/* assume 'Light' face exists; see explanation */

div strong {font-weight: bolder;}/* results in normal text, weight '400'*/

在第一個例子中，用戶代理將加粗從normal上移為bold，按數(shù)字來講，它從400跳至700。在第二個例子中，h1文本已經(jīng)設(shè)置為bold。如果沒有更粗的字體，用戶代理就會把h1中b文本的加粗設(shè)置為800，因為700 （與bold等價的數(shù)）的下一個數(shù)就是800，由于800和700被指定為同一個字體，所以正常的h1文本和粗體h1文本之間看上去沒有任何差別，不過其加粗確實不同。

在最后一個例子中，段落的字體加粗設(shè)置為最細(xì)，在此假設(shè)存在Light變形。另外，這個字體系列中的其他字體是Regular和Bold。段落中的任何em文本都會計算為normal，因為這是該字體系列中下一個最粗的字體，不過，如果字體中只有Regular和Bold會怎么樣呢？在這種情況下，聲明將計算如下：

/* assume only two faces for this example:'Regular' and 'Bold'*/

p (font-weight: 100;}/* looks the same as 'normal' text */

p span {fonc-weight: bolder;}/* maps to '700'*/

可以看到，加粗?jǐn)?shù)100被指定為normal字體，但是font-weight值還是100。因此，p 元素中包含的所有span文本都會繼承這個值100，然后計算下一個最粗的字體，即數(shù)字加粗值為700的Bold字體。

下面增加另外兩個規(guī)則以及一些標(biāo)記，進(jìn)一步說明所有這些是如何工作的（結(jié)果見圖5-6所示）：

/* assume only two faces for this example:'Regular' and 'Bold'*/

p {font-weight: 100;}/* looks .the same as 'normal' text */

p span {font-weight: 400;}/* so does this */

strong {font-weight: bolder;}/* even bolder Chan its parent */

strong b {font-weight: bolder;}/*bolder still */

<p>

This paragraph contains elements of increasing weight: there is a <span>span element that contains a <strong>strongly emphasized element and a <b>boldface element</b></strong></span>.

在最后兩個嵌套元素中，font-weight的計算值增加了，因為這里使用了關(guān)鍵字bolder。如果把段落中的文本替換為表示各元素font-weight的數(shù)字，可以得到如下的結(jié)果：

<p>

100 <span> 400 <strong> 700 <b> 800 </b></strong></span>

</p>

前面兩個加粗提升很大，因為它們表示從100躍至400，以及從400躍至bold (700)。從700向上再沒有更粗的字體了，所以用戶代理只是將font-weight值向上移一步，移到800。另外，如果你想在b元素中插入一個strong元素，會得到如下的結(jié)果：

<p>

100 <span> 400 <atrong> 700 <b> 800 <strong> 900

 </strong></b></strong></span>

</p>

如果再有另一個b元素插入到最內(nèi)層strong元素中，其加粗也是900，因為font- weight 值不可能比9 0 0 更高。假設(shè)只有兩種可用的字體風(fēng)格，那么文本要么顯示為Regular要么顯示為Bold，如圖5-7所示：

<p>

regular <span> regular <strong> bold <b> bold <strong> bold 

</strong></b></strong></span>.

</p>

讓字體更細(xì)

可以預(yù)料，lighter的做法完全一樣，只不過它會導(dǎo)致用戶代理將加粗度下移而不是上移。對前面的例子稍做修改，可以很清楚地看到這一點：

/* assume only two faces for this example:'Regular' and 'Bold'*/

p {font-weight: 900;}/* as bold as possible, which will look 'bold1 */

p span {font-weight: 700;}/* this will also be bold */

Strong {font-weight: lighter;}/* lighter than its parent */

b {font-weight: lighter;}/* lighter still */

<p>

900 <span> 700 <strong> 400 <b> 300 <strong> 200 

</strong></b></strong></ span>

<!--...or, to put it another way...-->

<p> bold <span> bold <strong> regular <b> regular

<strong> regular </strong></b></strong></span>

</p>

盡管直觀上看這完全不對勁，不過暫且不考慮這個問題。從圖5-8可以看到主段落文本的加粗為900。如果將strong文本設(shè)置為lighter，它會計算為下一個較細(xì)的字體，即regular字體，或數(shù)字值400 （與normal相同）。再向下一級是300，這等同于normal，因為不存在更細(xì)的字體。從300向下，用戶代理一次只能將加粗值下移一步，直到達(dá)到100 （本例中沒有減到100）。第二個段落顯示了哪些文本是bold，哪些是regular。