為什么要記錄一下？因為今天我要設置一個字符加粗，然后就用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>
三、原理
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有問題歡迎與我討論，共同進步。