cssfont-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 ><td>normal</td><td>The quick brown fox jumps over a lazy dog.</td></tr>
<tr ><td>bold</td><td>The quick brown fox jumps over a lazy dog.</td></tr>
<tr ><td>bolder</td><td>The quick brown fox jumps over a lazy dog.</td></tr>
<tr ><td>lighter</td><td>The quick brown fox jumps over a lazy dog.</td></tr>
<tr ><td>100</td><td>The quick brown fox jumps over a lazy dog.</td></tr>
<tr ><td>200</td><td>The quick brown fox jumps over a lazy dog.</td></tr>
<tr ><td>300</td><td>The quick brown fox jumps over a lazy dog.</td></tr>
<tr ><td>400</td><td>The quick brown fox jumps over a lazy dog.</td></tr>
<tr ><td>500</td><td>The quick brown fox jumps over a lazy dog.</td></tr>
<tr ><td>600</td><td>The quick brown fox jumps over a lazy dog.</td></tr>
<tr ><td>700</td><td>The quick brown fox jumps over a lazy dog.</td></tr>
<tr ><td>800</td><td>The quick brown fox jumps over a lazy dog.</td></tr>
<tr ><td>900</td><td>The quick brown fox jumps over a lazy dog.</td></tr>
</table>
</body>
</html>
View Code
三、原理
1、相关名称解释
: 是⼀种可缩放字体（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时填补缺失的⽅法
如果某个给定的字体系列少于九个字体粗细基本，则⽤户代理需要做更多⼯作。这种情况，使⽤⼀种预先定义的⽅式来填充缺失的空隙。
填补缺失的⽅法：
可参考。
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
fontweight取值w3c font-weight

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。