盡管你可能還沒有意識到,但實際上你已經(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)
一般來講,字體加粗越重,字體看上去就越黑且“越粗”。標示加粗字體的方法有很多。例如,名為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;}
寫這樣一個樣式表顯然很乏味,不僅如此,只有當所有人都安裝了這些字體時,樣式表才能起作用,但更有可能的情況是,大多數(shù)人都沒有安裝所有這些字體。更有意義的做法是為整個文檔指定一個字體系列,然后為不同元素指定不同的加粗。從理論上講,可以對font-weight屬性使用不同的值來做到這一點。以下是一個很簡單的font-weight:聲明:
b {font-weight: bold;}
很簡單,這個聲明指出b元素應(yīng)當使用一種粗體字體顯示,換句話說,要用一種比文檔正常字體更粗的字體來顯示。當然,我們經(jīng)常見到這種情況,因為b確實會讓文本加粗。
不過,實際情況是使用字體的一種加粗變形來顯示b元素。因此,如果使用Times顯示一個段落,而且其中一部分是粗體,那么實際上當前使用了同一字體的兩種變形:Times 和TimesBold。常規(guī)的文本使用Times顯示,加粗的文本使用TimesBold顯示。
加粗如何起作用
為了理解用戶代理如何確定一個給定字體變形的加粗度,我們暫不考慮加粗如何繼承,首先介紹關(guān)鍵字100-900,這樣最容易理解。定義這些數(shù)字關(guān)鍵字是為了映射字體設(shè)計中的一個很常見的特性,即為字體指定了9級加粗度。例如OpenType采用了一個數(shù)值梯度,其中包含9個值。如果一個字體內(nèi)置了這些加粗級別,那么這些數(shù)字就直接映射到預定義的級別,100對應(yīng)最細的字體變形,900對應(yīng)最粗的字體變形。
實際上,這些數(shù)字本身并沒有固有的加粗度。CSS規(guī)范只是指出,每個數(shù)對應(yīng)一個加粗度,它至少與前一個數(shù)指定的加粗度相同。因此,100、200、300和400可能都映射到同樣的較細變形,500和600可能對應(yīng)到同樣的較粗字體變形,而700、800和900 可能都生成同樣的很粗的字體變形。只要一個關(guān)鍵字對應(yīng)的變形不會比前一個關(guān)鍵字所對應(yīng)變形更細,就都是允許的。
一般地,這些數(shù)都被定義為與某個常用變形名等價(先不考慮font-weight的其他值)。 400定義為等價于normal, 700對應(yīng)于bold。其他數(shù)不對應(yīng)font-weight的任何其他值,不過它們可能對應(yīng)于常用變形名。如果有一個字體變形標為Normal、Regular、Roman 或Book,就會為之指定400,而標為Medium的變形會指定為500。不過,如果一個標為Medium的變形是唯一可用的變形,它不會指定為500而會是400。
如果給定的字體系列中定義的加粗度少于9種,用戶代理還必須多做一些工作。在這種情況下,它必須以一種預定的方式填補這些“空白”:
如果未指定值500的加粗度,其字體加粗與400的相應(yīng)加粗相同。
如果未指定300的加粗度,則為之指定下一個比400更細的變形。如果沒有可用的較細變形,為300指定的變形等同于400的相應(yīng)變形。在這種情況下,通常是Normal或Medium。這種方法同樣適用于200和100。
如果未指定600的加粗度,會為之指定下一個比400更粗的變形。如果沒有可用的較粗變形,為600指定的變形則等同于500的相應(yīng)變形。這種方法同樣適用于700、800 和 900.
為了更清楚地說明這種加粗機制,下面來看指定字體加粗的三個例子。在第一個例子中,假設(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ù)字值被指定為最細的字體加粗。不出所料,對于標有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。
當然,關(guān)鍵字normal和bold的指定很直接。至于數(shù)字,100~300被指定為Regular字體,因為沒有更細的字體了。400按預想的那樣被指定為Regular,但是500呢?它也被指定為Regular (或normal)字體,因為沒有可用的Medium字體,因此它與400被指定為同樣的字體。至于余下的數(shù)字,與往常一樣,700被指定為bold,由于沒有一種更粗的字體,800和900只能被指定到下一個較細的字體,即Bold字體。最后,600 要被指定到下一個更粗的字體,當然這就是Bold字體。
font-weight是可以繼承的,所以如果將一個段落設(shè)置為bold:
p.one {font-weight: bold;}
那么它的所有子元素都會繼承這個加粗度,如圖5-4所示。
這很平常,但是如果你使用最后兩個值(bolder和lighter),情況會變得很有意思,有必要對這兩個值詳細討論。一般來講,這些關(guān)鍵字的效果正如你期望的那樣:它們會讓文本比其父元素的字體加粗更粗或更細。首先,我們來考慮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è)置為最細,在此假設(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'*/
可以看到,加粗數(shù)100被指定為normal字體,但是font-weight值還是100。因此,p 元素中包含的所有span文本都會繼承這個值100,然后計算下一個最粗的字體,即數(shù)字加粗值為700的Bold字體。
下面增加另外兩個規(guī)則以及一些標記,進一步說明所有這些是如何工作的(結(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è)只有兩種可用的字體風格,那么文本要么顯示為Regular要么顯示為Bold,如圖5-7所示:
<p>
regular <span> regular <strong> bold <b> bold <strong> bold
</strong></b></strong></span>.
</p>
讓字體更細
可以預料,lighter的做法完全一樣,只不過它會導致用戶代理將加粗度下移而不是上移。對前面的例子稍做修改,可以很清楚地看到這一點:
/* 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,它會計算為下一個較細的字體,即regular字體,或數(shù)字值400 (與normal相同)。再向下一級是300,這等同于normal,因為不存在更細的字體。從300向下,用戶代理一次只能將加粗值下移一步,直到達到100 (本例中沒有減到100)。第二個段落顯示了哪些文本是bold,哪些是regular。