CSS 字体大小

用像素设置字体大小

用像素设置文本大小可以让您完全控制文本大小：

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

提示：如果您使用像素，您仍然可以使用缩放工具来调整整个页面的大小。

为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。

1em 等于当前字体大小。浏览器中的默认文本大小为 16px。所以，1em 的默认大小是 16px。

可以使用以下公式从像素到 em 计算大小：像素/16=嗯

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单位，表示"viewport width"。

这样，文本大小将跟随浏览器窗口的大小：

调整浏览器窗口大小以查看字体大小如何缩放。

<h1 style=" font-size:10vw">Hello World</h1>

视口是浏览器窗口的大小。 1vw = 视口宽度的 1%。如果视口宽 50 厘米，则 1vw 为 0.5 厘米。