你可能不知道的font

对于字体的认识一直有一个误区：
我们可能一直认为font-family是某一种字体，实际上，它指的是一个字体的系列。
比如说Times，它实际上是多种变形的一个组合。包括，TimesRegular，TimesBold，TimesItalic，TimesOblique，TimesBoldItalic，TimesBoldOblique等。

除了各种特定的字体系列外，CSS还定义了5种通用的字体系列

• Serif字体
  Serif是有衬线字体，意思是在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。css权威指南上的解释是说，字体成比例，上下有短线。
  如果字体中的所有字符根据其不同大小有不同的宽度，则称该字体是成比例的。
  Serif的字体容易辨认，因此易读性高。对于中文字体而言，最适合作为正文的有衬线字体是宋体。对于英文而言，常用的是Times New Roman

• Sans-serif字体
  Sans-serif是无衬线字体。与衬线字体相反，这种字体通常是机械的和统一线条的，它们往往拥有相同的曲率，笔直的线条，锐利的转角。无衬线字体会比较醒目，但是在行文阅读的情况下并不是很容易辨认。
  中文里，黑体，幼圆，雅黑就属于无衬线字体。
  英文里，Arial，Tahoma就是常用的无衬线字体。

一张图区分衬线字体和无衬线字体

• Monospace字体
  Monospace字体是不成比例的。它通常用于模拟打字机打出的文本。老式的点阵机的输出，甚至是更老式的视频显示终端。采用这些字体，每个字符宽度相等，所以小写的i和小写的m有一样的宽度。他们可能有衬线也可能没有衬线。
  判别这种字体的唯一标准就是等宽。
  Monospace字体的例子包括Courier，Courier New，Andale Mono

Monospace字体

• Cursive字体
  这些字体试图模仿人的手写体。通常有曲线和sedf字体中没有的笔划装饰组成。比如，Comic Sans，Author等

Cursive字体

• Fantasy字体
  这些字体无法用任何特征来定义，只有一点是确定的，那就是我们无法很容易地将其归到任何一种其他字体。比如，Western，Woodblock，Klingon

Fantasy字体

理论上来说，用户安装的任何字体都应该属于以上某个系列，但是也有可能有例外，不过这种例外并不多。

** 在这里不得不提的是浏览器的默认字体**
浏览器都会有默认的一个字体系列，在代码没有设置字体类型的时候，就会以默认的字体系列展示。众所周知，在中文版window下，IE，Chrome，Firefox的默认中文字体都是中易宋体。因此当字体系列名称为serif，sans-serif，monospace均使用中易宋体字体库。

MAC OS X下浏览器的默认中文字体是华文黑体。

要注意的是，在设置font-family的时候要以字体系列名称(generic-family)比如，serif，这样的结尾，因为在generic-family后面设置的字体名称是不会生效的。

比如：

font-family:arial,sans-serif,Simsun;
font-family:Simsun,sans-serif;

以上两个font-family来看，如果浏览器的默认字体是微软雅黑。第一个会以微软雅黑来展示，第二个会以宋体来展示。
原因就是因为第一个设置在sans-serif后面的宋体是失效的。

关于字体的属性

• 指定字体类型
  如果你希望文档使用一种无衬线字体，但是你并不关心，到底是用了哪一种字体
  那么你的代码可以这样写

    body{font-family:sans-serif;}
  

这样的话，用户代理会自己选择一个无衬线字体，并将其运用到body元素上。

• 指定字体名
  如果你有指定的字体，那么可以直接指定字体。

    body{font-family:microsoft yahei;}
  

这样就会将微软雅黑应用于body元素，如果用户代理找不到微软雅黑这个字体，它只能使用用户代理默认的字体来显示，除此之外，什么都不做。

当然，我们也可以结合使用字体系列和字体名

    body{font-family:microsoft yahei,sans-serif;}

这样在找不到微软雅黑字体的情况下，则会使用另一种无衬线字体。

处于这样的考虑，就很建议在写font-family的时候提供一个通用字体系列，这样，就提供了一个在找不到预设字体时候的备选方案。书写的方法是，确定这些字体的优先顺序，然后用逗号分隔。
比如：

    body{font-family:Times,TimesNR,'New Century Schoolbook',Georgia,'New York',serif;}

• 引号的使用
  上面的例子中，你可能已经注意到了单引号。
  当一个字体名中有一个或者多个空格的时候或者字体名包含符号的时候，使用引号。
  在css2.1中有规范说，包含符号的字体名并不一定要使用引号，但这是一个推荐的做法，类似于“最佳实践”。

• 加粗
  大家都知道字体的加粗用的是font-weight
  fongt-weight可以取值100-900，这些关键字映射的是字体设计时为字体指定的9级粗度。
  要注意的是，如果在字体设计的时候有指定粗度等级，那么在样式表里写font-weight的值能产生粗细效果。但是如果，字体设计的时候没有指定粗度等级，那么100,200,300,400都将映射到同样的较细变形。700,800,900都将映射到同样的较粗变形。这样问题在实际运用中经常会遇到。
  400对应于normal，700对应于bold。其他数值不对应于任何变形名。

• 字体大小
  百分数值和em的作用一样100%相当于1em，都是相对于父元素的大小来计算。
  字体大小在继承的时候只继承具体计算值而不是百分数。
  用百分比来控制字体的缺陷是，因为用户代理在计算出字体大小之后会进行取整操作或者保留一些小数的操作，在百分比计算过多的情况下，字体缩放可能不可控。

• 风格和变形
  ---风格font-style---
  italic（斜体）文本和Oblique（倾斜）文本的区别
  斜体是一种单独的字体风格，对每个字母的结构有了一些小改动。倾斜是基于竖直文本的一个倾斜版本，并没有改动字体结构。
  在没有italic字体但是有Oblique字体的情况下，会采用后者。但是如果有italic字体但是没有Oblique字体的情况下，用户代理只会用竖直文本计算出一个倾斜版本来生成Oblique字体。
  ---变形font-variant---
  small-caps要求使用小型大写字母文本。
  这个与text-transform:uppercase类似。之所以要用一个字体属性来声明small-caps，原因是有些字体在设计的时候有特定的small-caps字体。如果不存在这种字体，用户代理会自己缩放大写字母来创建一个small-caps字体。

• 拉伸和调整字体
  font-stretch，允许将字体拉伸
  font-size-adjust，允许在首选在字体不可用时，对替换字体进行缩放。
  这两个属性已经在css2.1被去除，因为这两个属性，虽然在规范中存在多年，但是没有一个浏览器实现了它们。

• 字体匹配
  css允许匹配字体系列，加粗，变形，所有这些都是通过字体匹配完成的。
  用户代理匹配字体的步骤大致如下：
  1、用户代理构建字体属性数据库，一般的这将是用户机器上安装的所有字体，以及用户代理的内置字体等。如果用户代理遇到两种相等的字体，忽略其中一个。
  2、用户代理取得应用了字体属性的元素，构建字体属性列表，基于这个列表，用户代理先进行第一次筛选，如果完全匹配，则使用这个字体。匹配顺序：根据font-style匹配，匹配italic和Oblique字体；根据font-variant匹配，匹配small-caps字体；根据font-weight匹配；根据font-size匹配

如果经过以上两步没有匹配到字体，那么就会去寻找候选字体。

如果没有候选字体，用户代理将会为给定的通用字体选择一个默认字体。

• font-face规则
  关于font-face的介绍：Iconfont玩法