手册
目录
font-size 属性用于设置文本的大小。
在网页设计中，能够管理文本的大小非常重要。但请注意，不要使用字体大小调整来让段落看起来像标题，或者让标题看起来像段落。
请始终使用正确的 HTML 标签，例如使用 <h1> - <h6> 表示标题，使用 <p> 表示段落。
字体大小的值可以是绝对大小，也可以是相对大小。
绝对大小：
相对大小：
注意： 如果未指定字体大小，则普通文本（如段落）的默认大小为 16px（16px=1em）。
使用像素设置文本大小可以完全控制文本的大小：
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}运行实例 » 点击 "运行实例" 按钮查看在线实例
提示： 即使使用像素，你仍然可以使用浏览器的缩放工具来调整整个页面的大小。
为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。
1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认情况下 1em 等于 16px。
可以使用以下公式将像素转换为 em：pixels/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 的旧版本中仍存在一个问题。当放大文本时，文本会变得比预期更大，而缩小时则会比预期更小。
在所有浏览器中都能正常工作的解决方案是为 <body> 元素设置以百分比表示的默认字体大小：
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}运行实例 » 点击 "运行实例" 按钮查看在线实例
现在我们的代码运行得很好！它在所有浏览器中显示相同的文本大小，并允许所有浏览器缩放或调整文本大小！
可以使用 vw 单位设置文本大小，表示“视口宽度”。
这样，文本大小将随着浏览器窗口的大小进行缩放：
调整浏览器窗口的大小，观察字体大小如何缩放。
<h1 style="font-size:10vw">Hello World</h1>运行实例 » 点击 "运行实例" 按钮查看在线实例
视口即浏览器窗口的大小。1vw = 视口宽度的 1%。如果视口宽度为 50cm，则 1vw 等于 0.5cm。
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.9万人学习
共29课时
62.3万人学习
共25课时
39.7万人学习
共43课时
73.6万人学习
共25课时
62.2万人学习
共22课时
23.2万人学习
共28课时
34.4万人学习
共89课时
127万人学习
