CSS 字体大小
字体大小
font-size 属性设置文本的大小。
在网页设计中，能够管理文本大小非常重要。但是，你不应该使用字体大小的调整来让段落看起来像标题，或让标题看起来像段落。
始终使用正确的 HTML 标签，例如用于标题的 <h1> - <h6> 和用于段落的 <p>。
字体大小的值可以是绝对大小或相对大小。
绝对大小
- 将文本设置为指定大小
- 不允许用户在所有浏览器中更改文本大小（这不利于可访问性）
- 当输出的物理尺寸已知时，绝对大小很有用
相对大小
- 相对于周围元素设置大小
- 允许用户在浏览器中更改文本大小
注意： 如果不指定字体大小，则正常文本（如段落）的默认大小为 16px (16px=1em)。
使用像素设置字体大小
使用像素设置文本大小可让您完全控制文本大小
提示： 如果使用像素，您仍然可以使用缩放工具来调整整个页面的大小。
使用 Em 设置字体大小
为了让用户能够调整文本大小（在浏览器菜单中），许多开发者使用 em 而不是像素。
1em 等于当前的字体大小。浏览器中的默认文本大小为 16px。因此，1em 的默认大小是 16px。
可以使用以下公式将大小从像素转换为 em：像素/16=em
示例
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
自己动手试一试 »
在上面的示例中，em 文本大小与上一示例中的像素大小相同。但是，使用 em 大小，可以在所有浏览器中调整文本大小。
遗憾的是，旧版 Internet Explorer 仍然存在一个问题。当放大时，文本会比应有的更大，当缩小到小于应有的尺寸时。
使用百分比和 Em 的组合
在所有浏览器中都有效的一种解决方案是为 <body> 元素设置默认字体大小（以百分比表示）
示例
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
自己动手试一试 »
我们的代码现在运行得很好！它在所有浏览器中显示相同的文本大小，并且允许所有浏览器缩放或调整文本大小！
响应式字体大小
可以使用 vw 单位设置文本大小，它代表“视口宽度”。
这样，文本大小将跟随浏览器窗口的大小。
你好世界
调整浏览器窗口大小，查看字体大小如何缩放。
视口是浏览器窗口的大小。1vw = 视口宽度的 1%。如果视口宽 50 厘米，则 1vw 为 0.5 厘米。
