font-size 属性设置文本的大小。
能够管理文本大小在网页设计中很重要。然而，你 不应使用字体大小调整来使段落看起来像标题，或者 标题看起来像段落。
始终使用正确的 HTML 标签，例如 <h1> - <h6> 表示标题，<p> 表示标题 段落。
字体大小值可以是 绝对或相对大小。
绝对尺寸：
将文本设置为指定大小
不允许用户更改所有浏览器中的文本大小（由于可访问性原因不好）
当输出的物理尺寸已知时，绝对尺寸很有用
相对尺寸：
设置相对于周围元素的大小
允许用户更改浏览器中的文本大小
注意：如果您不指定字体大小，则普通文本（如段落）的默认大小为 16px (16px=1em)。
用像素设置文本大小可以让您完全控制文本大小：
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
提示：如果您使用像素，您仍然可以使用缩放工具来调整整个页面的大小。
为了允许用户调整文本大小（在浏览器菜单中），许多 开发人员使用 em 而不是像素。
1em 等于当前字体大小。浏览器中的默认文本大小是 16 像素。所以，1em 的默认大小是 16px。
可以使用以下公式从像素到 em 计算大小：<i>像素/16=<i>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 */
}自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
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 */
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in em allows all major browsers to resize the text.
Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes larger/smaller than it should.</p>
</body>
</html>
在上面的示例中，以 em 为单位的文本大小与前面的示例相同 以像素为单位。但是，使用 em 大小，可以调整文本大小 在所有浏览器中。
不幸的是，旧版本仍然存在问题 Internet Explorer 的。 文本变得比应有的大 当变大时，比应有的尺寸小；当变小时，比应有的尺寸小。
适用于所有浏览器的解决方案是设置默认字体大小 <body> 元素的百分比：
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in percent and em displays the same size in all major browsers, and allows all browsers to resize the text!</p>
</body>
</html>
我们的代码现在运行得很好！它显示相同的文本大小 所有浏览器，并允许所有浏览器缩放或调整文本大小！
文本大小可以用 vw 单位设置，这意味着“视口宽度”。
这样，文本大小将跟随浏览器窗口的大小：
Resize the browser window to see how the font size scales.
<h1 style="font-size:10vw">Hello World</h1>自己尝试一下 →
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h1 style="font-size:10vw;">Responsive Text</h1>
<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>
<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>
<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>
</body>
</html>
视口是浏览器窗口的大小。 1vw=视口宽度的 1%。如果视口宽 50 厘米，则 1vw 为 0.5 厘米。