字體的加粗設置

  • 2018-09-20 04:57:12
  • 閱讀次數:
  • 作者:盈嵐科技小編
  • 來源:http://www.258852.net

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

font-weight

值:

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

初始值:

normal

應用于:

所有元素

繼承性:

計算值:

數字值(如100等等),或某個數字值加上某個相對數(bolder或 lighter)

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

現在假設你希望一個文檔使用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;}

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


b {font-weight: bold;}

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


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


加粗如何起作用


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


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


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


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


如果未指定值500的加粗度,其字體加粗與400的相應加粗相同。

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

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

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


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

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


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

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


font-weight是可以繼承的,所以如果將一個段落設置為bold:


p.one {font-weight: bold;}

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

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


讓字體更粗


如果將一個元素的加粗設置為bolder,用戶代理首先必須確定從父元素繼承的font-weight值。然后選擇一個數,它對應于比所繼承值更粗的一個字體加粗,而且在滿足這個條件的所有數中,要選擇最小的一個數。如果沒有可用的字體,用戶代理會把該元素的字體加粗設置為下一個更大的數字值,除非這個值已經是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,按數字來講,它從400跳至700。在第二個例子中,h1文本已經設置為bold。如果沒有更粗的字體,用戶代理就會把h1中b文本的加粗設置為800,因為700 (與bold等價的數)的下一個數就是800,由于800和700被指定為同一個字體,所以正常的h1文本和粗體h1文本之間看上去沒有任何差別,不過其加粗確實不同。

在最后一個例子中,段落的字體加粗設置為最細,在此假設存在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'*/

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


下面增加另外兩個規則以及一些標記,進一步說明所有這些是如何工作的(結果見圖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的計算值增加了,因為這里使用了關鍵字bolder。如果把段落中的文本替換為表示各元素font-weight的數字,可以得到如下的結果:


<p>

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

</p>

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


<p>

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

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

</p>

如果再有另一個b元素插入到最內層strong元素中,其加粗也是900,因為font- weight 值不可能比9 0 0 更高。假設只有兩種可用的字體風格,那么文本要么顯示為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文本設置為lighter,它會計算為下一個較細的字體,即regular字體,或數字值400 (與normal相同)。再向下一級是300,這等同于normal,因為不存在更細的字體。從300向下,用戶代理一次只能將加粗值下移一步,直到達到100 (本例中沒有減到100)。第二個段落顯示了哪些文本是bold,哪些是regular。


當前文章標題:字體的加粗設置

當前URL:http://www.258852.net/news/wzzz/font-weight-setting.html

上一篇:字體在網頁設計中的運用

下一篇:字體大小設置

網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
a级国产乱理论片在线观看_久久久久久黃色網站免費_日韩 欧美 一区 不卡_国产成人av综合网