CSS 字体大小
字体大小
font-size 属性设置文本的大小。
能够管理文本大小在网页设计中很重要。但是，您不应该使用字体大小调整来使段落看起来像标题，或使标题看起来像段落。
始终使用正确的 HTML 标签，例如 <h1> - <h6> 用于标题，<p> 用于段落。
font-size 值可以是绝对值或相对值。
绝对大小
- 将文本设置为指定大小
- 不允许用户在所有浏览器中更改文本大小（不利于可访问性）
- 当已知输出的物理大小时，绝对大小很有用
相对大小
- 设置相对于周围元素的大小
- 允许用户在浏览器中更改文本大小
注意：如果您未指定字体大小，则段落等普通文本的默认大小为 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%。如果视窗宽 50cm，则 1vw 为 0.5cm。
