font-weight:簡介,指定方法,示例,效果,映射規則,

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

基本介紹

中文名：字型粗細
外文名：font-weight

簡介,指定方法,示例,效果,映射規則,

簡介

本節主要討論的就是在如此紛繁的字型粗細標準中，總結出一套可行的規律。

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

初始值：normal

作用於：所有元素

是否繼承：是

百分比值：不適用

計算值：見文本

指定方法

font-weight的屬性值有3種指定方法：第1種是關鍵字法，關鍵字包括“normal”和“bold”兩個；第2種是相對粗細值法，相對粗細也是由關鍵字定義，但是它的粗細是相對於上級元素的繼承值而言的，包括“bolder”和“lighter”兩個；第3種為數字法，包括從“100”到“900”的9個數字序列（注意，只能是100、200之類的整百數）。這些數字序列代表從最細（100）到最粗（900）的字型粗細程度。每一個數字定義的粗細都要比上一個等級稍微粗一些。

示例

示例1演示了font-weight屬性所描述的關鍵字所對應的一般效果，這裡選擇Windows常用的Times New Roman字型作為演示效果，如圖1所示。

示例1

<html>

<head>

<style>

body,table,tr,td { font-family: "Times New Roman", Times;

font-size: 18pt; }

table { border-collapse: collapse; }

</style>

</head>

<body>

<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>

效果

字型的粗和細這種描述方法本身就是一種相對描述，所謂粗和細也必須要有一個參照體。例如，在上面介紹的3類屬性值之間需要有一個相互對照匹配的過程，這是一個很難界定的過程。關鍵字“normal”相當於“400”，“bold”相當於“700”。除了“normal”和“bold”以外的其他關鍵字常常會令瀏覽器產生誤解，無法直接和數值相匹配，此時字型的粗細程度通常取決於字型本身的設定。

在以下介紹的內容中，將通過一些普遍的法則，來描述字型粗細程度的規律。

對於林林總總的字型而言，目前並沒有一個統一的規則標明粗細的程度。有的字型名稱本身就能描繪粗細程度，如圖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列舉了一些映射規則。

映射規則

條件	處理方式
如果字型集中已經使用了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級的粗細程度，且設計的時候粗細程度應該有所跳躍，否則反而不能突出加粗的內容。

font-weight

基本介紹

簡介

指定方法

示例

效果

映射規則

相關詞條

熱門詞條