CSS学习笔记：字体

font-family

/* 一个字体名和一个通用的字体族名 */
font-family: Gill Sans Extrabold, sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

/* 仅有通用的字体族名 */
font-family: sans-serif;
font-family: serif;
font-family: fantasy;
font-family: cursive;
font-family: monospace;

font-family: inherit

我们熟悉的字体可能是由许多字体变形组成，分别用来描述正常的、斜体的、粗体的字体等等。
比如Times字体，实际上是多种变形的一个组合，包括TimesRegular、TimesBold、TimesItalic等等。因此，Times其实不是一种单个的字体，而是一个字体系列（font-family）。

除了各种特定字体系列之外（Times、Helvetica、Arial），CSS还定义了5种通用字体系列：

• Serif
• Sans-serif
• monospace
• cursive
• fantasy

理论上，用户安装的任何字体都会落入到上述某种通用系列当中。

使用通用字体系列

可以使用属性font-family在文档中采用上述任何字体系列。

由于font-family属性有继承性，因此这种字体会应用到元素所有后代上，除非有一种更特定的选择器将其覆盖。

指定字体系列

创作人员或者用户可能想要使用更特定的字体，还是要使用font-family属性，来定义文档显示使用的具体字体。

但是，如果这个特定字体不可用，那么浏览器就会使用其默认字体来显示。

为了避免这种情况，一般都是结合特定字体与通用字体系列。这样，在用户代理无法提供与规则匹配的特殊字体时，就可以选择一个候选字体。

h1{ font-family:Georgia,serif;}

如果开发人员对字体很熟悉，显示一个给定元素时可能会想到很多类似的字体，那么就把这些字体按优先顺序排列好，然后用逗号连接起来：

p {font-family:Times,TimesNR,'New York',serif}

用户代理会按照font-family中所列的顺序来查找这些字体。

• 使用引号
  上一个例子中出现了单引号。当一个字体名有一个或多个空格时，或者包括#或$之类的符号时，在这些情况下，整个字体名应当用引号括起。
  如果没有引号，尽管规则余下部分还会得到处理，但是用户代理很有可能忽略这个特定的字体名。

font-weight

font-weight: normal;
font-weight: bold;

/* Relative to the parent */
font-weight: lighter;
font-weight: bolder;

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

font-weight: inherit;

利用font-weight属性，CSS允许对字体加粗有更多控制。

一个字体系列会有很多变形，每个变形都可能有不同的加粗。
现在假设用户希望一个文档使用Zurich，但是想使用不同的加粗级别。可以直接通过font-family指定不同的字体变形来完成，但不是十分实用：

h1 {font-family:'Zurich UltraBlack',sans-serif}
h2 {font-family:'Zurich Black',sans-serif}
h3 {font-family:'Zurich Bold',sans-serif}

从理论上来讲，使用font-weight就可以使用不同的值来做到这点。

b{font-weight:bold}

实际情况是会使用字体的一种加粗变形来显示b元素。比如如果使用Times显示，而其中一部分为粗体，那么就会使用Times Bold来显示。

加粗如何起作用

• 关键字100~900
  
  • 为字体制定了9级加粗度。
  • 如果一个字体内置了这些加粗级别的字体变形，那么这些数字就直接映射到预定义的级别，100对应最细的字体变形，900对应最粗的字体变形
  • 实际上，这些数字本身没有固定的加粗度，CSS规范只是指出每个数对应一个加粗度，它至少与前一个数指定的加粗度相同，而不能比前一个数字指定的更细。因此，可能100,200,300都映射到同一个较细的字体变形，700,800.900都生成同样的较粗的字体变形。

一般地，这些数都被定义为与某个常用变形名等价：400等价为normal，700对应于bold。
其他数字值不对应font-weight的其他值，但是可能对应于一个字体的变形名。

• 如果一个字体有几种变形，标为Normal、Regular、Roman或Book，那么就会为之指定400
• 如果字体被标为Medium，就会被指定500.不过如果Medium是一个字体的唯一变形，它就会被指定为400

如果给定的字体系列中定义的加粗度少于9种，用户代理还必须多做一些工作来填补这些空白：

• 如果未指定500的加粗度，则其字体加粗度与400对应的加粗度相同
• 如果未指定300，则为其指定下一个比400更细的变形。如果没有可用的较细变形，那么就为300指定等同于400的字体变形。这种方法同样适用于200和100.
• 如果未指定600的加粗度，会为之指定下一个比400更粗的变形。如果没有可用的较粗变形，为600指定的变形则等同于500的变形。这种方法同样适用于700，800，900。

font-weight是可以继承的。

让字体更粗

• 如果将一个元素的加粗设置为bolder，用户代理首先必须确定从父元素继承的font-weight值。
• 然后选择一个数，它对应于比所继承值更粗的一个字体加粗，而且在满足这个条件的所有数中，选择最小的一个。
• 如果没有可用的字体变形，用户代理会把该元素的字体加粗设置为下一个更大的数字值，除非这个值已经是900，那么就保持900。
  在这种情况下，由于没有更粗的字体变形，一般加大数字值并不会引起字体真的看起来变粗，即使代表粗度的数字值变大了。

p{font-family:normal;}
p em{font-family:bolder;}

h1{font-family:bold;}
h1 b{font-family:bolder;}


div{font-family:100;}
div strong{font-family:bolder;}

• 第一个例子中，用户代理将加粗从normal上移为bold，即粗度从400变为700
• 第二个例子中，h1已经是bold，如果没有更粗的字体，用户代理就会把h1中b文本的加粗设置为800，因为700（bold）的下一个数就是800。由于800和700被指定为同一个字体，所以正常的和加粗的h1文本看上去没有任何区别。
• 第三个例子中，div的字体被设置为最细。
  
  • 假设这个字体有Lighter变形，那么后代元素就会加粗为normal，因为这是该字体系列中下一个最粗的字体。
  • 如果这个字体系列中只有Regular和Bold，那么加粗度100的字体会被指定为normal，但是font-weight还是100，那么计算出的下一个最粗的字体就会是粗度为700的Bold字体。

让字体更细

lighter的做法完全一样，只不过会导致粗度下一而不是上移。

总结一下，指定bolder与lighter时，其实就是会按照下图的规律来渲染字体大小的粗细值：

font-size

/* <absolute-size>，绝对大小值 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

/* <relative-size>，相对大小值 */
font-size: larger;
font-size: smaller;

/* <length>，长度值 */
font-size: 12px;
font-size: 0.8em;

/* <percentage>，百分比值 */
font-size: 80%;

font-size: inherit;

与font-weight关键字lighter和bolder方式类似，属性font-size也有两个相对大小关键字：larger和smaller。类似于字体加粗，这些关键字会导致font-size的计算值上移或下移。不过，首先要分析如何确定字体的大小。

实际上，font-size属性与用户看到的实际字体大小之间的具体关系由设计者来确定。
这种关系为字体本身的一个em方框，指示没有额外行间距（line-height）的时候字体基线间的距离。
某种字体的字符大小可能会比默认的基线距离要高，要低，这都是有可能的。因此，一般定义字体时都会要求所有字符小于其em方框。
因此，font-size的作用就是为给定字体的em框提供一个大小，而不是保证实际显示的字体就是这种大小。

绝对大小

font-size有7个绝对大小值：xx-small、x-small、small、medium、large、x-large、xx-large。
这些绝对大小关键字定义相对于用户的默认字体大小(medium)的大小。
根据CSS1规范，一个绝对大小与下一个绝对大小之前的差别应该是向上1.5，向下0.66。因此如果medium是10px，那么large就是15px。
但其实缩放因子不一定是1.5，不仅因为对于不同的用户代理缩放因子可能不同，此外就是CSS2中缩放因子可能介于1.0~1.2之间。

相对大小

关键字smaller和larger，使字体的大小相对于其父元素的大小在绝对大小梯度上上移或下移，在此会使用计算绝对大小时采用的缩放因子。

相对大小值不必限制在绝对大小范围内，因此，一个字体的大小可以超过xx-small和xx-large的大小。

百分数和大小

百分数值总是根据从父元素继承来的大小来计算。不同于相对大小关键字，百分数允许对计算的字体大小有更细的控制。

有时，CSS定义长度值em等价于百分数值，即确定字体大小时1em等于100%，因此以下会得到相同的结果：

p.one{font-size:166%}
p.two{font-size:1.6em}

在使用em度量时，会应用百分数的相同规则，如计算大小的继承规则等等。

字体大小和继承

font-size是可以继承的，但继承的是计算值而不是百分数。
另外，与相对大小关键字一样，百分数可以积累。

<p>aaa
    <em>bbb
        <strong>ccc</strong>
    </em>
</p>

p{font-size:12px}
em{font-size:120%}
strong{font-size:135%}

其中，strong元素的大小计算值是：
12*120%=14.4；
14.4*135%=19.44；

用户代理可能会对像素大小进行取整，取整后的值再由子元素正常继承。

使用长度单位

可以使用任何长度单位来设置font-size。

像素

当你需要精确地像素时，用px设定字体大小是一种好方法。一像素的大小是固定的。这是一个不取决于平台的、跨浏览器的准确设置字体大小高度为你所想的像素大小的方法。因为不同浏览器为得到同样效果的算法可能不同，所以显示效果可能有微小的不同。

Em

另一种方法是用em值设定字体大小。em值的大小是动态的。当定义font-size属性时，1em等于元素的父元素的字体大小。如果你在网页中任何地方都没有设置文字大小的话，那它将等于浏览器默认文字大小，通常是16px。所以通常1em = 16px。2em = 32px。 如果你设置了body元素的字体大小为20px，那1em = 20px、2em = 40px。

可用这个公式计算像素大小的等价em大小：

em = 希望得到的像素大小 / 父元素字体像素大小

例如，假设body的文字大小设为1em，且浏览器默认1em = 16px。如果你想得到12px，那你就可设定0.75em (because 12/16 = 0.75)。同样的，如果你想设定文字大小为10px，那就定义0.625em (10/16 = 0.625)；若想要22px就定义1.375em (22/16=1.375).

一个流行的技巧是设置body元素的字体大小为62.5% (即默认大小16px的62.5%)，等于10px。现在你可以通过计算基准大小10px的倍数，在任何元素上方便的使用em单位。这样有6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em。

因为em可以自动适应用户的字体，em是一个非常有用的CSS单位。

font-style

font-style: normal; //初始值
font-style: italic;
font-style: oblique;

font-style CSS 属性允许你选择 font-family 字体下的 italic 或 oblique 样式。

• italic是一种单独的字体风格，一般是指书写体，相比无样式的字体，通常会占用较少的高度。
• oblique：一般只是常规字形的倾斜版本

注意，不是所有的字体都有确切的 oblique 和 italic 字形，即便如此，浏览器也会通过使用现有的字形来模拟所缺少的字形。

font-variant

font-variant: normal;
font-variant: small-caps;

CSS提供了font-variant来确定常见的字体变形。

• normal：描述正常文本
• small-caps：使用小型大写字母文本

这种效果就是，只要文本中出现大写字母，就会显示一个更大的大写字母；只要文本中出现一个小写字母，就会显示一个小型的大写字母。

font

font属性是涵盖所有其他字体属性的一个简写属性。

h1{font:italic 900 small-caps 30px Verdana,sans-serif}

和其它的CSS简写属性一样，该属性中未被设置的属性值使用它们各自的初始值，并覆盖之前由非简写的属性设置的值。

h1,h2{font:italic small-caps 250% sans-serif }
h2{font:200% sans-serif}
//此时h2元素既不是斜体也不是小型大写字母，因为第二条规则未声明的默认值将会覆盖第一条规则中声明的值，如italic，small-caps

另外，使用font属性，还有几个需要注意的地方：

• 一定要包含font-family和font-size属性。
• 属性值的顺序并非完全自由：如需设置 font-style, font-variant 和 font-weight 中任意一个或几个的值，它们必须要放在 font-size 值的前面。 font-family 是必不可少的，且必须放在最后。

增加行高

还可以使用font设置line-height：，尽管line-height是一个文本属性而不是字体属性。这可以作为对font-size值的一个补充，并用一个斜线（/）与之分隔。

p { font: 200%/1.2 sans-serif }

line-height一定要在font-size之后，且两者之间用一个斜线分隔。

使用系统字体

如果希望一个Web页面结合用户操作系统的设置，font属性提供的系统字体值会很方便。

利用这些值，可以创建一个基于web的应用，但他看上去会非常类似与用户操作系统自带的应用。

@font-face

这是一个叫做@font-face 的CSS @规则 ，它允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式，@font-face 可以消除对用户电脑字体的依赖。

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url("../fonts/glyphicons-halflings-regular.eot");
 }