- 使用通用字体系列
css定义了 5 中通用字体系列:
Serif
Sans-serif
Monospace
Cursive
Fantasy
| font-family | |
| 值： | | inherit |
| 初始值： | 用户代理指定的值 |
| 应用于： | 所有元素 |
| 继承性： | 有 |
| 计算值： | 根据指定确定 |
body {font-family: sans-serif;}这样用户代理就会从 sans-serif 字体系列选择一个字体（如 Helvetica），并将其应用到 body 元素，因为有继承性，这种字体选择还将应用到 body 元素中包含的所有元素，除非有一种更特定的选择器将其覆盖
- 指定字体系列
p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;}根据这个列表，用户代理会按所列的顺序查找这些字体。如果列出的所有字体都不可用，就会简单的选择一种可用的 serif 字体
| font-weight | |
| 值： | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit |
| 初始值： | normal |
| 应用于： | 所有元素 |
| 继承性： | 有 |
| 计算值： | 数字值（如 100 等），或某个数字值加上某个相对数（bolder 或 lighter） |
一般上，字体加粗越重，字体看上去就越黑且 “越粗”
b {font-weight: bold;}-
加粗如何起作用
数字关键字 100 - 900：定义这些数字关键字是为了映射字体设计中一个很常见的特性，即为字体指定了 9 级加粗度，例如 OpenType 采用了一个数值梯度，其中包含 9 个值。如果一个内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。
实际上，这些数字本身没有固定的加粗度。CSS 规范只是指出，每个数对应一个加粗度，它至少与前一个数指定的加粗度相同。因此，100、200、300 和 400 可能都映射到同样的较细变形；500 和 600 可能对应到同样的较粗字体变形；而 700、800 和 900 可能都生成同样的很粗的字体变形。只要一个关键字对应的变形不会比前一个关键字所对应变形更细，就都是允许的。
一般地，这些数都被定义为与某个常用变形名等价（先不考虑 font-weight 的其他值）。400 对应 normal，700 对应 bold。其他数不对应 font-weight 的任何其他值，不过他们可能对应于常用变形名。如果有一个字体变形标为 Normal、Regular、Roman 或 Book ，就会为之指定 400 ，而标为 Medium 的变形会指定为 500 。不过，如果一个标为 Medium 的变形是唯一可用的变形，它不会指定为 500 而会是 400
如果给定的字体系列中定义的加粗度少于 9 种，用户代理还必须多做一些工作。在这种情况下，他必须以一种预定的方式填补这些 “空白”：
- 如果未指定值 500 的加粗度，其字体加粗与 400 的相应加粗相同
- 如果未指定 300 的加粗度，则为之指定下一个比 400 更细的变形。如果没有可用的较细变形，为 300 指定的变形等同于 400 的相应变形。在这种情况下，通常是 Normal 或 Medium 。这种方法同样适用于 200 和 100 。
- 如果未指定 600 的加粗度，会为之指定下一个比 400 更粗的变形。如果没有可用的较粗变形，为 600 指定等同于 500 的相应变形。这种方法同样适用于 700、800、900 。
| font-size | |
| 值： | xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | | | inherit |
| 初始值： | medium |
| 应用于： | 所有元素 |
| 继承性： | 有 |
| 百分数： | 根据父元素的字体大小来计算 |
| 计算值： | 绝对长度 |
-
字体大小和继承
font-size 是可以继承的，不过继承的是计算值而不是百分比；与相对大小关键字一样，百分数可以积累
p {font-size: 12px;} em {font-size: 120%;} strong {font-size: 135%;}
<p> This paragraph contains both <em>emphasis and <strong>strong emphasis</strong></em>, both of which are larger than the paragraph text. </p>
在这种情况下，用户代理对像素进行取整，再由子元素正常继承。比如：
12px * 120% = 14.4px ≈ 14px 14px * 135% = 18.9px ≈ 19px
注意： 如果有更多的百分数相乘，取整错误就会开始累积 如果浏览器没有最小字号限制，这将会导致页面无法阅读
-
使用长度单位
| font-style | |
| 值： | italic | oblique | normal | inherit |
| 初始值： | normal |
| 应用于： | 所有元素 |
| 继承性： | 有 |
| 计算值： | 根据指定确定 |
normal：“竖直” 的文本 / （“非斜体或倾斜的文本”）
italic：斜体
oblique：倾斜
italic 和 oblique 基本一致，实际上，并不是每种字体都如此复杂，同时有斜体和倾斜字体，甚至即使这两种字体同时存在，也很少有浏览器复杂到满足区分它们