AI专业者开发社区 1 号成员
  •  0 回帖  •  7 浏览  •  4 个月前
   

css font-weight原理

为什么要记录一下？因为今天我要设置一个字符加粗，然后就用 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有问题欢迎与我讨论，共同进步。