CSS Fonts
在 CSS 中，总的来说有两种字体集：
- generic family 通用字体系统，一组拥有相似外观的字体系统
- font family 特定字体系统 (like “Times New Roman” 或 “Arial”)
| Generic family | Font family | 描述 |
|---|---|---|
| Serif | Times New Roman, Georgia，宋体，仿宋，楷体 | 这类型的字体每个字符的末端有突出的小线 |
| Sans-serif | Arial, Verdana，微软雅黑 | 字符末端不会有多出来的衬线 |
| Monospace | Courier New, Lucida Console | 每一个字符宽度相同(Safari 好像不支持，这行效果需要在 Chrome 里查看) |
Tip：sans-serif 无衬线字体被认为比有衬线 serif 字体在电脑屏幕上更容易阅读，有人比较过同样为 14px 的中文字体，黑体看起来比宋体和楷体更大。
font-family
font-family 属性像一个“后备”系统，拥有一些字体名称。每一个名称之间由逗号分开，从你希望使用的字体开始，以一个通用字体系统结束，这样如果浏览器不支持第一个字体，它会尝试后面的选项。
对于以中文为使用语言的 web 应用，把英文字体集，写在最前面。因为英文字体集没有中文字符，但是中文字体集却包含所有英文字符。中文字体放在前面，会优先显示，而中文字体显示的英文字符通常比较丑。
对于仿宋、楷体，最好在字号大于 14px 的情况下使用，否则影响清晰度。
目前在 ios、android、winphone，三种手机操作系统中的默认字体都是类似微软雅黑的 Sans-serif 无衬线字体。
注意: 如果字体集名称多余一个单词，则必须用双引号括起来。如: “Times New Roman”.
Font style
font-style 属性有 3 种值：
normal正常显示italic斜体oblique常规字体的倾斜版。oblique is very similar to italic, but less supported
斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的倾斜版本。通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。
Font size
font-size 用来设定字体大小。
注意: 不要通过调整字体大小来使段落看起来像是标题，或者使标题看起来像段落。请使用恰当的 HTML 标签来实现。
absolute-size
- 设为指定的大小
- 不是在所有浏览器里都允许用户改变字体大小
- 设置字体大小为一个特定的值，当输出设备物理尺寸为已知时，很有用。
Possible values include the following: xx-small, x-small, small, medium, large, x-large, xx-large.
relative-size
大小相对于父元素的字体大小. Possible values include the following: smaller, larger.
注意: 如不指定 font size，正常段落文本的默认字体大小为 16px.
字体大小取值
length：Floating-point number, 后跟 CSS Unit.
%：以父元素字体大小为百分比
Set font-size with em
em 允许用户 resize 文本字体大小，许多开发者使用 em 而不是 px。
1em 等于当前字体大小（字体 font-size 默认从父元素继承）。浏览器默认字体大小为 16px，所有 1em=16px
pixel to em: pixels/16=em
Font weight
font-weight 用来设定字体的粗细，取值：
- normal 默认值
- bold 粗体
- bolder 更粗
- lighter 细体
整百数字（100-900）400 等同于 normal，700 等同于 bold。
Font variant
font-variant 属性用来设定文本是否以 small-caps 小型大写字体输出：
normal默认值small-caps
所有小写字母被转换成大写字母，但是，这些被转换成大写的字母，要比文本中本来的大写字母要小。效果如下：
Hey we are Small Caps Fonts.
All in one
font 属性用来将所有 font 相关的属性写在一起, (in order):
font-style font-variant font-weight font-size/line-height font-family
其中 font-size 和 font-family 是 required. If one of the other values are missing, the default values will be inserted, if any.
CSS3 Web Fonts
“typography is communication” but currently the web is “all system, no soul.”
网络字体使得 web 设计者可以使用那些用户设备上没有安装的字体。只需要将字体文件添加到 web 服务器上，在用户需要时自动加载字体。
- 受制于同源策略
- 需定义在 CSS 选择器外
- TTF/OTF(94.6%)，WOFF (94.29%) 格式的字体文件被大多数浏览器支持
自有字体使用 CSS3 的 @font-face 规则定义，使用方法如下：
@font-face {
font-family: myFont; /* 定义字体名称 */
src: url(font_file.otf) format("opentype"); /* 指向字体文件 */
}
div {
font-family: myFont;
}
注意：最好使用小写字体来写 URL，避免 IE 中出现意外结果。
使用web font，可能在页面渲染中形成性能瓶颈并延迟文本渲染，参考谷歌开发者文档进行优化。
font-style, font-weight, font-stretch
这3个 descriptor 定义了 font-face 的特征，用于匹配样式到指定 face 的过程，缺省值都是 normal。
对于使用 several @font-face 规则定义的同一个 font family，user agents 可以下载该字体集的全部 face，或者使用这些 descriptors 有选择性的下载匹配文档中实际使用的样式。
此处涉及浏览器兼容性。比如对于 <h2> 字体应用以下字体：
@font-face {
font-family: "Source Han Sans CN Bold";
src: url(data:application/x-font-ttf;charset=utf-8;base64,YOUR BASE64 STRING) format("truetype");
font-weight: bold; /*缺省该属性，在Window+Chrome中没有影响，而MAC OS+Chrome中，标题字体看起来更粗*/
}
Variable fonts
通过使用 font-variation-settings 属性，使用一个字体集实现“seemingly different typefaces”看似不同的字体。
适用于 OpenType font format。目前支持性不太好，看不出效果