为什么要记录一下？因为今天我要设置一个字符加粗，然后就用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原理的更多相关文章

  1. 【转载】CSS font关键字属性值的简单研究

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...

  2. 7：CSS Sprites的原理（图片整合技术）

    7:CSS Sprites的原理(图片整合技术) 一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-position”来实现背景图片的定 ...

  3. CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图

    CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图   一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...

  4. CSS Sprites技术原理和使用

      在分析各个网站的CSS时,我们经常可以看到一些网站有很多的元素共享了一张背景图片,而这张背景图片包含了所有这些元素需要的背景,这种技术就叫做CSS Sprites. 淘宝的css sprites ...

  5. css的核心原理分为优先级原则与继承原则两大部分

    css原理:1.优先原则=>后解析的内容会覆盖之前解析的内容(所谓解析就是读取的css样式)2.继承原则=>嵌套里面的标签拥有外部标签的某些样式,子元素可以继承父元素的属性 1>优先 ...

  6. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  7. CSS Font知识整理总结

    1.什么是字体 字体是文字的外在形式,就是文字的风格,是文字的外衣.比如行书.楷书.草书,都是一种字体.同样一个字每个人写起来都会有差异,可以说每个人都有一套潜在的字体库.对于web页面来说,字体就是 ...

  8. css绘制三角形原理

    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...

  9. CSS font 复合属性的顺序

    CSS 参考手册 实例 在一个声明中设置所有字体属性: p.ex1 { font:italic arial,sans-serif; } p.ex2 { font:italic bold 12px/20 ...

  10. CSS font字体知识学习

    字体系列 [1]5种通用字体系列:拥有相似外观的字体系列 serif字体:字体成比例,且有上下短线(衬线字体),包括Times\Georgia\New century Schoolbook sans- ...

随机推荐

  1. Git安装图解

    msysgit是Windows版的Git,提供了命令行操作 下载地址:http://msysgit.github.io/

  2. jQuery Layer 弹层组件

    layer是一款近年来口碑非常不错的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她 ...

  3. Smint – 用于单页网站制作的 jQuery 导航菜单插件

    Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...

  4. JS的window.location应用实例

    window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面. Window Locationwindow.location 对象在编写时可不使用 window ...

  5. requirejs：让人迷惑的路径解析

    接触过requirejs的童鞋可能都知道,无论是通过define来定义模块,还是通过require来加载模块,模块依赖声明都是很重要的一步.而其中涉及到的模块路径解析,对于新手来说,有的时候会让人觉得 ...

  6. 选中repeater表格中的一行使其变色

    //table表中点击行,选中的那一行颜色会变成浅蓝色(颜色可以自己设定) //其中sellerTable 为table的id, $("#sellerTable tbody tr" ...

  7. Atitit.阿里云c盘 系统盘爆满解决方案

    Atitit.阿里云c盘 系统盘爆满解决方案 Use disk parse tool to scan then C:\widnow/soursce /install.wim   迁移  3g 显示在 ...

  8. 制作具有SSH、MySQL功能的Chroot

    由于工作需求,需要在Linux上建立SSH.MySQL两个用户. 使这两个账户连接到跳板机后仅能执行有限的命令(SSH用户只能执行SSH命令,MySQL用户只能执行MySQL命令). MySQL账户C ...

  9. 错误解决：SharePoint Designer 2010编辑后，出现数据源控件未能执行插入命令，data source control failed to execute the insert command

    打了SharePoint 2010 最新的SP 2的补丁,但是使用SharePoint Designer 2010 定义任何一个列表的“插入视图”时,总是出现标题那样的错误: 数据源控件未能执行插入命 ...

  10. java field, property,variable及getField和getDeclaredField的区别

    java 里面的field ,property, attribute,variable的区别 field: 就是定义的用于保存数据的字段 property: property是用于描述类中的特征,所以 ...