css font-weight原理

starof發表於2015-06-09
CSS

為什麼要記錄一下？因為今天我要設定一個字元加粗，然後就用font-weight:200,沒有任何效果。現在看來很可笑，400才相當於normal，200怎麼加粗，奇怪的是也沒有變細。所以得研究一下font-weight的工作原理，以下正文。

一、使用介紹

font-weight設定文字的粗細，文字粗細設定屬於一種比較複雜的字型樣式定義，之所以說它複雜，是因為字型本身粗細變化千變萬化，沒有統一標準，對於字型粗細的具體定義也各不相同。

屬性值：normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 繼承值

預設值：normal。

font-weight屬性值設定有3種方法：

第一種：關鍵字法：

關鍵字有2個，normal【預設值，定義標準的字元】和bold【定義粗體字元】。

第二種：相對粗細值法：

相對粗細也是由關鍵字定義，有2個，bolder【定義更粗的字元】和lighter【定義更細的字元】，但是它的粗細是相對於上級parent元素的繼承值而言的。bolder就是匹配字型集中可用的下一級較粗字型，反之"lighter"也一樣，匹配下一級較細字型。它們的參照系都是繼承值，因此粗細程度都是相對於繼承值而言的。

具體情況參考下圖：

第三種：從"100"到"900"的9個數字序列。

這些數字代表從最細(100)到最粗(900)的字型粗細程度。

數值400相當於normal,

數值700相當於bold。

二、舉例

程式碼：Times New Roman效果

<html>
<head>
<meta charset="utf-8"/>
<title>CSS Demo</title>
<style>
body,table,tr,td { font-family: "Times New Roman", Times;
font-size: 18pt; }
table { border-collapse: collapse; }
</style>
</head>
<body>
<table border="1px" cellpadding="5px">
<tr><th>關鍵字</th><th>效果</th></tr>
<tr style="font-weight: normal;"><td>normal</td><td>The quick brown fox jumps over a lazy dog.</td></tr>
<tr style="font-weight: bold;"><td>bold</td><td>The quick brown fox jumps over a lazy dog.</td></tr>
<tr style="font-weight: bolder;"><td>bolder</td><td>The quick brown fox jumps over a lazy dog.</td></tr>
<tr style="font-weight: lighter;"><td>lighter</td><td>The quick brown fox jumps over a lazy dog.</td></tr>
<tr style="font-weight: 100;"><td>100</td><td>The quick brown fox jumps over a lazy dog.</td></tr>
<tr style="font-weight: 200;"><td>200</td><td>The quick brown fox jumps over a lazy dog.</td></tr>
<tr style="font-weight: 300;"><td>300</td><td>The quick brown fox jumps over a lazy dog.</td></tr>
<tr style="font-weight: 400;"><td>400</td><td>The quick brown fox jumps over a lazy dog.</td></tr>
<tr style="font-weight: 500;"><td>500</td><td>The quick brown fox jumps over a lazy dog.</td></tr>
<tr style="font-weight: 600;"><td>600</td><td>The quick brown fox jumps over a lazy dog.</td></tr>
<tr style="font-weight: 700;"><td>700</td><td>The quick brown fox jumps over a lazy dog.</td></tr>
<tr style="font-weight: 800;"><td>800</td><td>The quick brown fox jumps over a lazy dog.</td></tr>
<tr style="font-weight: 900;"><td>900</td><td>The quick brown fox jumps over a lazy dog.</td></tr>
</table>
</body>
</html>
View Code

 

三、原理

1、相關名稱解釋

OpenType: 是一種可縮放字型（scalable font）電腦字型型別，採用PostScript格式，是美國微軟和Adobe公司聯合開發，用來替代TrueType字型的新字型。這類字型的檔案擴 展名由.otf,.ttf,.ttc，型別程式碼是OTTO，現行標準為OpenType1.6。

2、工作原理：使用者代理怎樣決定字型變形的粗細？

字型的粗細被分為9個級別，從100到900，這些數字關鍵字用於定義與字型的相關特徵的對映關係，即字型的粗細被分為九個等級。例如，OpenType就使用了九個值的數字級別。數字直接對映到各個級別，100對映到最輕的字型變形，900對映最重的字型變形。事實上，在這些數字中並不存在本質的字型粗細的約定。css只是強調一點：每個數字對應的字型粗細不得小於它前面的數字所對應的字型粗細。也就是說每個數字值對應的字型加粗必須至少與下一個最小數字一樣細，而且至少與上一個最大數字一樣粗。

這樣就出現了上面的問題：100,200,300和400或許都對應同樣粗細的字型變形，而500和600可能對應到一個更粗的字型變形，700,800和900則對應另一種更粗的字型變形。

3、關鍵詞和數值對應關係

400和normal等價，700和bold等價，其他數字不對應任何font-weight屬性的關鍵字，但可對應普通的字型變形名。

如果某種字型變形標記為"Normal","Regular","Roman"或"Book"，那麼它被分配給400，而且任何被標記為"Medium"的字型變形就對應於500，然而，如果標記為“Medium”的字型變形是唯一可用的字型，那麼它就不能同500相對應。

MDN和W3C上給出的對應關係如下：

100Thin (Hairline)，200Extra Light (Ultra Light)，300Light，400Normal，500Medium，600Semi Bold (Demi Bold)，700Bold，800Extra Bold (Ultra Bold)，900Black (Heavy)

4、字型系列少於9時填補缺失的方法

如果某個給定的字型系列少於九個字型粗細基本，則使用者代理需要做更多工作。這種情況，使用一種預先定義的方式來填充缺失的空隙。

填補缺失的方法：

可參考font-weight。

500缺失：和400相同。

600|700|800|900任一值缺失：和下一級較粗的值相同。如果沒有，則和下一級較細的值相同。

例如：如果一個字型中缺失“500”和“900”，那麼該字型的9級粗細值就應該相當於“100、200、300、400、400、600、700、800、800”。

300|200|100中任一值缺失：和下一級較細的值相同。如果沒有，則和下一級較粗的值相同。

一張圖片，灰色代表沒有該值所以用相鄰的值。

字型的weight值為400,700和900

字型的weight值為300和600

一般設計者不會在一篇文章中定義超過3級的粗細程度，且設計的時候粗細程度應該有所跳躍，否則反而不能突出加粗的內容。

5、字型擴充套件知識

名詞：

通用字型：擁有相似外觀的字型系統組合（如"serif"或者"monospace"）,共有5種通用字型——serif,sans-serif,cursive,fantasy,monospace。

特定字型：具體的字型（比如"Times"或"Courier"）。

通用字型名和字型對照：

Generic font 名稱可以顯示的字型
serif Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
sans-serif MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
cursive Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery
fantasy Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz
monospace Courier, MS Courier New, Prestige, Everson Mono

詳細介紹5種通用字型系列：

  • serif字型：這些字型成比例，而且有上下短線。如果字型中的所有字元根據其不同大小有不同的寬度，則成該字元是成比例的。例如，小寫 i 和小寫 m 的寬度就不同。上下短線是每個字元筆劃末端的裝飾，比如小寫 l 頂部和底部的短線，或大寫 A 兩條腿底部的短線。
  • sans-serif字型：這些字型是成比例的，而且沒有上下短線。
  • cursive字型：
  • fantasy字型：這些字型試圖模仿人的手寫體。通常，它們主要由曲線和 Serif 字型中沒有的筆劃裝飾組成。例如，大寫 A 再其左腿底部可能有一個小彎，或者完全由花體部分和小的彎曲部分組成。
  • monospace字型：字型並不是成比例的。它們通常用於模擬打字機打出的文字、老式點陣印表機的輸出，甚至更老式的視訊顯示終端。採用這些字型，每個字元的寬度都必須完全相同，所以小寫的 i 和小寫的 m 有相同的寬度。

使用：

  • 如果希望頁面使用一種sans-serif字型，但並不關心是哪一種字型，可宣告body {font-family: sans-serif;}瀏覽器就從sans-serif系列字型中選一種應用到body上。
  • 推薦給font-family提供一個通用字型系列作為後路。

四、資源連結

百度百科font-weight

http://baike.baidu.com/item/font-weight

w3c font-weight

http://dev.w3.org/csswg/css-fonts-3/#font-weight-prop

 

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/4562514.html有問題歡迎與我討論，共同進步。

相關文章