css font-weight原理

落日映苍穹つ 2022-01-26 03:31 301阅读 0赞

为什么要记录一下？因为今天我要设置一个字符加粗，然后就用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"也一样，匹配下一级较细字体。它们的参照系都是继承值，因此粗细程度都是相对于继承值而言的。

具体情况参考下图：

![091355227232903.png][]

第三种：从"100"到"900"的9个数字序列。

这些数字代表从最细(100)到最粗(900)的字体粗细程度。

数值400相当于normal,

数值700相当于bold。

# 二、举例 #

代码：Times New Roman效果

![ExpandedBlockStart.gif][]

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

![091113416132159.png][]

# 三、原理 #

## 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上给出的对应关系如下：

`100`Thin (Hairline)，`200`Extra Light (Ultra Light)，`300`Light，`400`Normal，`500`Medium，`600`Semi Bold (Demi Bold)，`700`Bold，`800`Extra Bold (Ultra Bold)，`900`Black (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中任一值缺失：和下一级较细的值相同。如果没有，则和下一级较粗的值相同。

一张图片，灰色代表没有该值所以用相邻的值。

![091432295191802.png][]

字体的weight值为400,700和900

![091434561445296.png][]

字体的weight值为300和600

一般设计者不会在一篇文章中定义超过3级的粗细程度，且设计的时候粗细程度应该有所跳跃，否则反而不能突出加粗的内容。

## 5、字体扩展知识 ##

**名词：**

通用字体：拥有相似外观的字体系统组合（如"serif"或者"monospace"）,共有5种通用字体——serif,sans-serif,cursive,fantasy,monospace。

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

**通用字体名和字体对照：**

<table style="border-collapse:collapse;border-spacing:0px;border:1px solid #C0C0C0;"> 
 <tbody> 
  <tr> 
   <th style="border:1px solid #C0C0C0;border-collapse:collapse;">Generic font 名称</th> 
   <th style="border:1px solid #C0C0C0;border-collapse:collapse;">可以显示的字体</th> 
  </tr> 
  <tr> 
   <th style="border:1px solid #C0C0C0;border-collapse:collapse;">serif</th> 
   <td style="border:1px solid #C0C0C0;border-collapse:collapse;">Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit</td> 
  </tr> 
  <tr> 
   <th style="border:1px solid #C0C0C0;border-collapse:collapse;">sans-serif</th> 
   <td style="border:1px solid #C0C0C0;border-collapse:collapse;">MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica</td> 
  </tr> 
  <tr> 
   <th style="border:1px solid #C0C0C0;border-collapse:collapse;">cursive</th> 
   <td style="border:1px solid #C0C0C0;border-collapse:collapse;">Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery</td> 
  </tr> 
  <tr> 
   <th style="border:1px solid #C0C0C0;border-collapse:collapse;">fantasy</th> 
   <td style="border:1px solid #C0C0C0;border-collapse:collapse;">Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz</td> 
  </tr> 
  <tr> 
   <th style="border:1px solid #C0C0C0;border-collapse:collapse;">monospace</th> 
   <td style="border:1px solid #C0C0C0;border-collapse:collapse;">Courier, MS Courier New, Prestige, Everson Mono</td> 
  </tr> 
 </tbody> 
</table>

**详细介绍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][http_baike.baidu.com_item_font-weight]

w3c font-weight

[http://dev.w3.org/csswg/css-fonts-3/\#font-weight-prop][http_dev.w3.org_csswg_css-fonts-3_font-weight-prop]

本文作者[starof][],因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：[http://www.cnblogs.com/starof/p/4562514.html][http_www.cnblogs.com_starof_p_4562514.html]有问题欢迎与我讨论，共同进步。

[091355227232903.png]: /images/20220126/123fa9b855624b1ca39dd6387fe657f7.png
[ExpandedBlockStart.gif]: /images/20220126/2583d092ae9e4c93b41e48c489d2031d.png
[copycode.gif]: /images/20220126/7be32c7092aa4f79ac874135523eaba9.png
[091113416132159.png]: /images/20220126/113fa9acee83449fbce4dfa0d38d0473.png
[OpenType]: http://zh.wikipedia.org/wiki/OpenType
[font-weight]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-weight
[091432295191802.png]: /images/20220126/9ed07135732e41e1999adccc564ddc92.png
[091434561445296.png]: /images/20220126/f5327eec729a45ca8876fc6ade7222e8.png
[http_baike.baidu.com_item_font-weight]: http://baike.baidu.com/item/font-weight
[http_dev.w3.org_csswg_css-fonts-3_font-weight-prop]: http://dev.w3.org/csswg/css-fonts-3/#font-weight-prop
[starof]: http://www.cnblogs.com/starof/
[http_www.cnblogs.com_starof_p_4562514.html]: http://www.cnblogs.com/starof/p/4562514.html