为什么要记录一下？因为今天我要设置一个字符加粗，然后就用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>

三、原理

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、、600、700、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有问题欢迎与我讨论，共同进步。

css font-weight原理的更多相关文章

【转载】CSS font关键字属性值的简单研究
文章转载自张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...
7：CSS Sprites的原理（图片整合技术）
7:CSS Sprites的原理(图片整合技术) 一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-position”来实现背景图片的定 ...
CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图
CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...
CSS Sprites技术原理和使用
在分析各个网站的CSS时,我们经常可以看到一些网站有很多的元素共享了一张背景图片,而这张背景图片包含了所有这些元素需要的背景,这种技术就叫做CSS Sprites. 淘宝的css sprites ...
css的核心原理分为优先级原则与继承原则两大部分
css原理:1.优先原则=>后解析的内容会覆盖之前解析的内容(所谓解析就是读取的css样式)2.继承原则=>嵌套里面的标签拥有外部标签的某些样式,子元素可以继承父元素的属性 1>优先 ...
CSS 制作三角形原理剖析
使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...
CSS Font知识整理总结
1.什么是字体字体是文字的外在形式,就是文字的风格,是文字的外衣.比如行书.楷书.草书,都是一种字体.同样一个字每个人写起来都会有差异,可以说每个人都有一套潜在的字体库.对于web页面来说,字体就是 ...
css绘制三角形原理
1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...
CSS font 复合属性的顺序
CSS 参考手册实例在一个声明中设置所有字体属性: p.ex1 { font:italic arial,sans-serif; } p.ex2 { font:italic bold 12px/20 ...
CSS font字体知识学习
字体系列 [1]5种通用字体系列:拥有相似外观的字体系列 serif字体:字体成比例,且有上下短线(衬线字体),包括Times\Georgia\New century Schoolbook sans- ...

随机推荐

轻量级富文本编辑器wangEditor源码结构介绍
1. 引言 wangEditor——一款轻量级html富文本编辑器(开源软件) 网站:http://www.wangeditor.com/ demo演示:http://www.wangeditor.c ...
asp.net面试题汇总
1.静态成员和非静态成员的区别? 答: 静态变量使用 static 修饰符进行声明,在类被实例化时创建,通过类进行访问不带有 static 修饰符声明的变量称做非静态变量,在对象被实例化时创建,通过对 ...
为 MDS 修改 SharePoint 2013组件
了解如何修改 SharePoint 项目中的组件以在 SharePoint 2013 中利用最少下载策略(MDS). 本文内容为何修改 SharePoint 组件? 母版页 ASP.NET 页面 ...
部署基于国际版Azure的SharePoint三层架构服务器场
前言微软Azure国际版已经很普及了,这里没有用国内版(世纪互联),用的是国际版,当然是由于公司性质的缘故.这里一步步图文的方式,分享给大家创建Azure国际版的SharePoint三层架构的过程, ...
SharePoint 2013 配置基于表单的身份认证
前言这里简单介绍一下为SharePoint 2013 配置基于表单的身份认证,简单的说,就是用Net提供的工具创建数据库,然后配置SharePoint 管理中心.STS服务.Web应用程序的三处w ...
小谈KVC中KeyPath的集合运算符
由于知识点比较简单,这里不再陈述一大堆的原理,直入主题. KVC中的集合运算符有以下三类: 1.简单集合运算符:@avg.@sum.@max.@min.@count (只能用在集合对象中,对象属性必须 ...
浅谈Java五大设计原则之观察者模式
定义一下观察者模式: 观察者模式又叫发布-订阅模式,定义的两个对象之间是一种一对多的强依赖关系,当一个对象的状态发生改变,所有依赖它的对象将得到通知并自动更新(摘自Hand First). ...
Android打开相机和打开相册
打开相机 /** * 选择相机 */ private void showCamera() { // 跳转到系统照相机 Intent cameraIntent = new Intent(MediaSto ...
我的android学习经历
我为什么选择android? 我基本上前一年的时间都是在学习java的语法和线程之类的,没有注意java的分类,所以到现在慢慢接触到深处的时候我了解到,java的优势主要在web,而我不是特别喜欢网页 ...
MicroStation VBA基础
实习笔记1 2016年8月1日 14:12 Option Explicit 缺省情况下,如果使用一个没有声明的变量,它将继承“Variant”类型.在模块.窗体和类的通用声明区使用“OptionExp ...

css font-weight原理