字體的加粗設(shè)置

  • 2018-09-20 04:57:12
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來(lái)源:http://supportcoffeeroasters.com

盡管你可能還沒(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。


當(dāng)前文章標(biāo)題:字體的加粗設(shè)置

當(dāng)前URL:http://supportcoffeeroasters.com/news/wzzz/font-weight-setting.html

上一篇:字體在網(wǎng)頁(yè)設(shè)計(jì)中的運(yùn)用

下一篇:字體大小設(shè)置

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷咨詢專線:181-8386-5875(點(diǎn)擊可一鍵撥號(hào))