{{CSS}}字体font属性详解
1.字体系列font-family
CSS定义了５种通用字体系列：
1.Serif字体
2.Sans-serif字体
3.Monospace字体
4.Cursive字体
5.Fantasy字体
当然还有各种特定字体系列，如Times,Verdana,Helvetica,Arial
最佳实践：
1.在所有的font-family规则中都提供一个通用字体系列，这样就提供了一条后路，在用户代理无法提供与规则匹配的特定字体时，可以选择一个候选字体。
2.当一个字体名中有一个或多个空格（如New Century Schoolbook），或者字体名中包含#，%或$之类的符号时，必须要在font-family声明中加引号，在这种情况下整个字体名应用用引号括起，这样用户代理才能搞清楚字体名到底是什么。
还有一种必须加引号的的是与所接受关键字匹配的字体名。如有一种名为"cursive"的字体，就必须加引号。显然，字体名中如果只包含一个词，而且这个词与font-family的任何关键字都不冲突，就不需要加引号，通用字体系列名（serif,monospace等）在指示具体的通用系列时就不能加引号。如果将一个通用名引号引起，用户代理就会认为你需要一个与此同名的特定字体，如'serif'，而不是一个通用字体系列。
2.字体加粗font-weight
font-weight:normal|bold|bolder|lighter|100|200|300|...|900|inherit
初始值：normal
应用于：所有元素
继承性：有
计算值：数字值或某个数字值加上某个相对数
3.字体大小font-size
font-size:xx-small|x-small|small|medium|large|x-large|xx-large|smaller|larger|<length>|<percentage>|inherit
初始值：medium
应用于：所有元素
继承性：有
百分数：根据父元素的字体大小来计算
计算值：绝对长度
4.字体风格（font-style）和字体变形（font-variant）
１）有风格的字体font-style:normal|italic|oblique
font-style很简单，就３种值，唯一有点复杂的就是italic文本和oblique文本之间的差别。基本上说，斜体（italic）是一种单独的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。对serif字体尤其如此，除了文本字符“有些斜”以外，serifs可以修改为一种斜体字体。与此不同，倾斜（oblique）文本则是正常竖直广西的一个倾斜版，标为Italic,Cursive,Kursiv的文本总是映射到italic关键字，而oblique总是对应到标为Oblique,Slanted,Incline的字体。
２）字体变形font-variant:small-caps|normal|inherit
5.font属性
font:[[<font-style>|<font-variant>|<font-weight>]?<font-size>[/<line-height>]?<font-family>]|captio|icon|menu|...|inherit
初始值：根据单个属性
应用于：所有元素
继承性：有
百分数：对于<font-size>要相对于父元素来计算；对于<line-height>则相对于元素的<font-size>来计算
计算值：见单个属性（font-style等）
注：
１）font的前三个值允许采用任意的顺序。
２）font的后两个值font-size,font-family不仅要以此顺序（font-size在前，font-family在后）作为声明中的最后两个，而且font声明中必须有这两个值。如果少了其中某个属性，那个整个规则就都是无效的，很可能被用户代理完全忽略。如
h1 {font:noraml normal italic 30px sans-serif;} /* OK */
h1 {font:30px sans-serif;} /* OK */
h1 {font:sans-serif;} /* Invalid 缺少font-size */
h1 {font:lighter 14px;} /* Invalid 缺少font-family */
３）为font设置line-height，尽管line-height是一个文本属性而不是字体属性。增加这个line-height值完全是可选的，就像font前３个属性。但若包含了一个line-height，要记住font-size总是在line-height之前，绝对不能在line-height后面，而且这两个属性要有/分隔。
４）最后再强调一下（好罗嗦啊）：font中font-size和font-family值是必须的，而且顺序不可变。不过其他值都是可选的。
6.字体匹配过程详解
CSS允许匹配字体系列，加粗，变形。所有这些都是通过字体匹配来完成的，这是一个相当复杂的过程。
1.用户代理创建（或访问）一个字体属性数据库，这个数据库列出了用户代理能访问的所有字体的各种属性。
2.用户代理取得应用了字体属性的元素，并构建一个字体属性列表，其中列出显示该元素的必要字体属性。基于这个列表，用户代理先对显示元素使用的字体系列做第一个选择。如果完全匹配，那么用户代理就可以使用这个字体。否则，需要多做一些工作。
a.字体首先根据font-style属性进行匹配，关键字italic可以与所有标有italic,oblique的字体匹配，若没有这样的字体，则匹配失败；
b.再根据font-variant属性匹配。未标"small-caps"的字体都认为是normal，与small-caps匹配的字体可以标为"small-caps"的字体，也可以是允许合成small-caps风格的字体或者用大写字母替换小写字母的字体。
c.然后根据font-weight匹配，由于CSS中处理font-weight的特殊方式，这个匹配不会失败。
d.之后再针对font-size匹配，必须在某个可忍受的范围内匹配，不过这种忍受程度要由用户代理定义。
3.如果在第２步中未匹配任何字体，用户代理就会在这个字体系列中查代下一个候选的字体，如果找到了，就对该字体重复第２步。
4.假设找到一个通用匹配，但其中不包括显示给定元素所需的一切——例，这种字体没能版权符号——用户代理就回到第３步，再搜索另一个候选字体，然后再通过第２步来验证这种字体是否匹配。
5.最后，如果没有找到匹配，而且所有候选字体已经都试过了，用户代理就会为给定的通用字体系列选择默认字体，尽其所能正确地显示这个元素。
CSS定义了５种通用字体系列：
1.Serif字体
2.Sans-serif字体
3.Monospace字体
4.Cursive字体
5.Fantasy字体
当然还有各种特定字体系列，如Times,Verdana,Helvetica,Arial
最佳实践：
1.在所有的font-family规则中都提供一个通用字体系列，这样就提供了一条后路，在用户代理无法提供与规则匹配的特定字体时，可以选择一个候选字体。
2.当一个字体名中有一个或多个空格（如New Century Schoolbook），或者字体名中包含#，%或$之类的符号时，必须要在font-family声明中加引号，在这种情况下整个字体名应用用引号括起，这样用户代理才能搞清楚字体名到底是什么。
还有一种必须加引号的的是与所接受关键字匹配的字体名。如有一种名为"cursive"的字体，就必须加引号。显然，字体名中如果只包含一个词，而且这个词与font-family的任何关键字都不冲突，就不需要加引号，通用字体系列名（serif,monospace等）在指示具体的通用系列时就不能加引号。如果将一个通用名引号引起，用户代理就会认为你需要一个与此同名的特定字体，如'serif'，而不是一个通用字体系列。
2.字体加粗font-weight
font-weight:normal|bold|bolder|lighter|100|200|300|...|900|inherit
初始值：normal
应用于：所有元素
继承性：有
计算值：数字值或某个数字值加上某个相对数
3.字体大小font-size
font-size:xx-small|x-small|small|medium|large|x-large|xx-large|smaller|larger|<length>|<percentage>|inherit
初始值：medium
应用于：所有元素
继承性：有
百分数：根据父元素的字体大小来计算
计算值：绝对长度
4.字体风格（font-style）和字体变形（font-variant）
１）有风格的字体font-style:normal|italic|oblique
font-style很简单，就３种值，唯一有点复杂的就是italic文本和oblique文本之间的差别。基本上说，斜体（italic）是一种单独的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。对serif字体尤其如此，除了文本字符“有些斜”以外，serifs可以修改为一种斜体字体。与此不同，倾斜（oblique）文本则是正常竖直广西的一个倾斜版，标为Italic,Cursive,Kursiv的文本总是映射到italic关键字，而oblique总是对应到标为Oblique,Slanted,Incline的字体。
２）字体变形font-variant:small-caps|normal|inherit
5.font属性
font:[[<font-style>|<font-variant>|<font-weight>]?<font-size>[/<line-height>]?<font-family>]|captio|icon|menu|...|inherit
初始值：根据单个属性
应用于：所有元素
继承性：有
百分数：对于<font-size>要相对于父元素来计算；对于<line-height>则相对于元素的<font-size>来计算
计算值：见单个属性（font-style等）
注：
１）font的前三个值允许采用任意的顺序。
２）font的后两个值font-size,font-family不仅要以此顺序（font-size在前，font-family在后）作为声明中的最后两个，而且font声明中必须有这两个值。如果少了其中某个属性，那个整个规则就都是无效的，很可能被用户代理完全忽略。如
h1 {font:noraml normal italic 30px sans-serif;} /* OK */
h1 {font:30px sans-serif;} /* OK */
h1 {font:sans-serif;} /* Invalid 缺少font-size */
h1 {font:lighter 14px;} /* Invalid 缺少font-family */
３）为font设置line-height，尽管line-height是一个文本属性而不是字体属性。增加这个line-height值完全是可选的，就像font前３个属性。但若包含了一个line-height，要记住font-size总是在line-height之前，绝对不能在line-height后面，而且这两个属性要有/分隔。
４）最后再强调一下（好罗嗦啊）：font中font-size和font-family值是必须的，而且顺序不可变。不过其他值都是可选的。
6.字体匹配过程详解
CSS允许匹配字体系列，加粗，变形。所有这些都是通过字体匹配来完成的，这是一个相当复杂的过程。
1.用户代理创建（或访问）一个字体属性数据库，这个数据库列出了用户代理能访问的所有字体的各种属性。
2.用户代理取得应用了字体属性的元素，并构建一个字体属性列表，其中列出显示该元素的必要字体属性。基于这个列表，用户代理先对显示元素使用的字体系列做第一个选择。如果完全匹配，那么用户代理就可以使用这个字体。否则，需要多做一些工作。
a.字体首先根据font-style属性进行匹配，关键字italic可以与所有标有italic,oblique的字体匹配，若没有这样的字体，则匹配失败；
b.再根据font-variant属性匹配。未标"small-caps"的字体都认为是normal，与small-caps匹配的字体可以标为"small-caps"的字体，也可以是允许合成small-caps风格的字体或者用大写字母替换小写字母的字体。
c.然后根据font-weight匹配，由于CSS中处理font-weight的特殊方式，这个匹配不会失败。
d.之后再针对font-size匹配，必须在某个可忍受的范围内匹配，不过这种忍受程度要由用户代理定义。
3.如果在第２步中未匹配任何字体，用户代理就会在这个字体系列中查代下一个候选的字体，如果找到了，就对该字体重复第２步。
4.假设找到一个通用匹配，但其中不包括显示给定元素所需的一切——例，这种字体没能版权符号——用户代理就回到第３步，再搜索另一个候选字体，然后再通过第２步来验证这种字体是否匹配。
5.最后，如果没有找到匹配，而且所有候选字体已经都试过了，用户代理就会为给定的通用字体系列选择默认字体，尽其所能正确地显示这个元素。