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

font-weight

值：

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

初始值：

normal

應(yīng)用于：

所有元素

繼承性：

有

計(jì)算值：

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

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

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

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;}

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

b {font-weight: bold;}

很簡(jiǎn)單，這個(gè)聲明指出b元素應(yīng)當(dāng)使用一種粗體字體顯示，換句話說(shuō)，要用一種比文檔正常字體更粗的字體來(lái)顯示。當(dāng)然，我們經(jīng)常見(jiàn)到這種情況，因?yàn)閎確實(shí)會(huì)讓文本加粗。

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

加粗如何起作用

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

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

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

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

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

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

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

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

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

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

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

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

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

p.one {font-weight: bold;}

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

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

讓字體更粗

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

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

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

/* 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文本都會(huì)繼承這個(gè)值100，然后計(jì)算下一個(gè)最粗的字體，即數(shù)字加粗值為700的Bold字體。

下面增加另外兩個(gè)規(guī)則以及一些標(biāo)記，進(jìn)一步說(shuō)明所有這些是如何工作的（結(jié)果見(jiàn)圖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>.

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

<p>

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

</p>

前面兩個(gè)加粗提升很大，因?yàn)樗鼈儽硎緩?00躍至400，以及從400躍至bold (700)。從700向上再?zèng)]有更粗的字體了，所以用戶代理只是將font-weight值向上移一步，移到800。另外，如果你想在b元素中插入一個(gè)strong元素，會(huì)得到如下的結(jié)果：

<p>

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

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

</p>

如果再有另一個(gè)b元素插入到最內(nèi)層strong元素中，其加粗也是900，因?yàn)閒ont- 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的做法完全一樣，只不過(guò)它會(huì)導(dǎo)致用戶代理將加粗度下移而不是上移。對(duì)前面的例子稍做修改，可以很清楚地看到這一點(diǎn)：

/* 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>

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