-
font-weight
鎖定
字體粗細設置屬於一種比較複雜的字體樣式定義，之所以説它複雜，是因為字體本身粗細千變萬化，沒有統一標準，對於字體粗細的具體定義也各不相同。
- 中文名
- 字體粗細
- 外文名
- font-weight
- 初始值
- normal
font-weight簡介
本節主要討論的就是在如此紛繁的字體粗細標準中，總結出一套可行的規律。
屬性值：normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 繼承值
初始值：normal
作用於：所有元素
是否繼承：是
百分比值：不適用
計算值：見文本
font-weight指定方法
font-weight的屬性值有3種指定方法：第1種是關鍵字法，關鍵字包括“normal”和“bold”兩個；第2種是相對粗細值法，相對粗細也是由關鍵字定義，但是它的粗細是相對於上級元素的繼承值而言的，包括“bolder”和“lighter”兩個；第3種為數字法，包括從“100”到“900”的9個數字序列（注意，只能是100、200之類的整百數）。這些數字序列代表從最細（100）到最粗（900）的字體粗細程度。每一個數字定義的粗細都要比上一個等級稍微粗一些。
font-weight示例
示例1演示了font-weight屬性所描述的關鍵字所對應的一般效果，這裏選擇Windows常用的Times New Roman字體作為演示效果，如圖1所示。
圖1
<html>
<head>
<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="1" cellpadding="5">
<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>
font-weight效果
font-weight 進入頁面
在以下介紹的內容中，將通過一些普遍的法則，來描述字體粗細程度的規律。
對於林林總總的字體而言，並沒有一個統一的規則標明粗細的程度。有的字體名稱本身就能描繪粗細程度，如圖2所示，在“Arial Bold”等類似字體的名稱中，本身就能表示自己的粗細。Arial Bold的字體顯示也確實要比Arial粗不少。
圖2
像這樣的字體名稱的主要作用就是在單個字體集中區別字體的粗細程度，例如在Arial字體集中區別粗細程度。
另外，有的字體看上去比較粗，但是它們的字體描述卻是“Regular、Roman、Book（常規）”、“Medium、Semi-（半）”或者“DemiBold、Bold、Black（黑體）”等字樣，這主要取決於該字體本身“normal”表示的粗細程度。
正因為沒有一個標準的字體名稱用法，所以當前CSS 2.1版本的粗細屬性值用“400”代表“normal”無論它究竟有多粗或者多細。與“normal”或者“400”相關聯的粗細名稱通常是“Book、Regular、Roman、Normal、Medium”，表示“普通、中等”的意思。
在字體集名稱和9級數值之間，有着一些對應關係，表3列舉了一些映射規則。
font-weight映射規則
條 件 | 處 理 方 式 |
如果字體集中已經使用了9級數值的範圍（例如OpenType一樣） | 字體的粗細應該直接與9級數值相匹配 |
如果一種字體同時擁有Medium，還有Book、Regular、Roman或者Normal的字體集名稱 | Medium通常分配為“500”，其他4個分配為“400” |
字體集中有標記為“bold”的名稱 | 相當於“700”數值 |
如果字體集中少於9級粗細級別 | 參照缺失填補方式，即表5.6所示 |
如果字體集中少於9級粗細度算法，那麼填補缺失的方法如表4所示。
表4 填補缺失的方法
缺 失 數 值 | 填 補 方 法 |
“500”缺失 | 和“400”相同 |
缺失“600、700、800、900”中任何一個值 | 和下一等級較粗的值相同。如果沒有，則和下一等級較細的值相同 |
缺失“300、200、100”中任何一個值 | 和下一等級較細的值相同。如果沒有，則和下一等級較粗的值相同 |
例如，如果一個字體中缺失“500”和“900”，那麼該字體的9級粗細值就應該相當於“100、200、300、400、400、600、700、800、800”。
表5所示的是一種字體的常規對應方式，假設有一種字體叫做“Myownfont1”，它共有Regular、Medium、Bold、Heavy等4個關鍵字表示粗細等級，則對應匹配方式如下。
表5 字體常規對應方式
可用字體名 | 分 配 | 填 補 空 缺 |
Myownfont1 Regular | 400 | 100、200、300 |
Myownfont1 Medium | 500 | - |
Myownfont1 Bold | 700 | 600 |
Myownfont1 Heavy | 800 | 900 |
假設有一種字體叫做“Myownfont2”，共有6個等級，此時對應匹配方式如表6所示。
表6 Myownfont2的對應匹配方式
可用字體名 | 分 配 | 填 補 空 缺 |
Myownfont2 Book | 400 | 100、200、300 |
Myownfont2 Medium | 500 | - |
Myownfont2 Bold | 700 | 600 |
Myownfont2 Heavy | 800 | - |
Myownfont2 Black | 900 | - |
Myownfont2 ExtraBlack | 不分配 | - |
由表6可以看出，瀏覽器不會為ExtraBlack的關鍵字分配9級數值對應匹配。
有了以上匹配方式，對於“bolder”和“lighter”的匹配也不難理解。“bolder”就是匹配字體集中可用的下一級較粗字體，反之“lighter”也是一樣，匹配下一級較細字體。它們的參照系都是繼承值，因此粗細程度都是相對於繼承值而言的。
注 意如果繼承值已經是“900”，那麼無論添加多少“bold”關鍵字也不會再加粗字體。 |
對於字體的粗細程度的定義就基本限於以上介紹的內容。對於實際應用而言，一般設計者不會在一篇文章中定義超過3級的粗細程度，且設計的時候粗細程度應該有所跳躍，否則反而不能突出加粗的內容。
