font-size

font-size 属性指定字体的大小或高度。font-size 不仅影响其应用到的字体，还用于计算 em、rem 和 ex 长度单位的值。

p {
  font-size: 20px;
}

font-size 可以接受关键字、长度单位或百分比作为值。但是，需要注意的是，当它作为 font 简写属性的一部分声明时，font-size 是一个必填值。如果它未包含在简写中，则整行将被忽略。

应用于 font-size 的长度值（例如 px、em、rem、ex 等）不能为负数。

绝对关键字和值

.element {
  font-size: small;
}

它接受以下绝对关键字值

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

这些绝对值映射到浏览器计算的特定字体大小。但是您也可以使用两个相对于父元素字体大小的关键字值。

其他绝对值包括 mm（毫米）、cm（厘米）、in（英寸）、pt（磅）和 pc（派卡）。一个磅等于 1/72 英寸，而一个派卡等于 12 磅——这些值通常用于印刷文档。

相对关键字

.element {
  font-size: larger;
}

• larger
• smaller

例如，如果父元素的字体大小为 small，则具有定义的相对大小 larger 的子元素将使子元素的字体大小等于 medium。

百分比值

.element {
  font-size: 110%;
}

百分比值，例如将字体大小设置为 110%，也相对于父元素的字体大小，如下面的演示所示

查看 CSS-Tricks 在 CodePen 上的笔 qdbELL（@css-tricks）。

em 单位

.element {
  font-size: 2em;
}

em 单位是一个相对单位，基于父元素字体大小的计算值。这意味着子元素始终依赖于其父元素来设置其字体大小。例如

<div class="container">
  <h2>This is a heading</h2>
  <p>This is some text.</p>
</div>

.container {
  font-size: 16px;
}

p {
  font-size: 1em;
}

h2 {
  font-size: 2em;
}

在上面的示例中，段落的字体大小将为 16px，因为 1 x 16 = 16px，而标题将为 32px，因为 2 x 16 = 32px。根据父元素的字体大小向上缩放类型有很多优点，即我们可以将元素包装在容器中，并知道所有子元素将始终彼此相关

查看 CSS-Tricks 在 CodePen 上的笔 了解 em 单位的工作原理（@css-tricks）。

rem 单位

但是，对于 rem 单位，字体大小取决于根元素（或 html 元素）的值。

html {
  font-size: 16px;
}

p {
  font-size: 1.5rem;
}

在上面的示例中，rem 单位等于 16px（因为它是从 html/根元素继承的），因此所有段落元素的字体大小将计算为 24px（1.5 x 16 = 24）。与 em 单位不同，段落将忽略其所有父元素的样式，除了根元素。

以下浏览器支持此单位

Chrome	Safari	Firefox	Opera	IE	Android	iOS
有效	有效	有效	有效	10+	有效	有效

ex 单位

.element {
  font-size: 20ex;
}

对于 ex 单位，1ex 将等于根元素的小写字母 x 的计算高度。因此，在下面的示例中，html 元素设置为 20px，所有其他字体大小都由该特定字体的 x 高度确定。

查看 CSS-Tricks 在 CodePen 上的笔 了解 ex 单位的工作原理（@css-tricks）。

通过替换 html 元素上的 font-family 来试验上面的演示，看看其他字体大小如何变化。

视口单位

.element-one {
  font-size: 100vh;
}

.element-two {
  font-size: 100vw;
}

视口单位（如 vw 和 vh）根据视口尺寸设置元素的字体大小

• 1vw = 视口宽度的 1%
• 1vh = 视口高度的 1%

因此，如果我们采用以下示例

.element {
  font-size: 100vh;
}

那么这将说明元素的字体大小应始终为视口高度的 100%（50vh 为 50%，15vh 为 15% 等等）。在下面的演示中，尝试调整示例的高度以观察类型伸展

查看 CSS-Tricks 在 CodePen 上的笔 使用 vh 单位调整类型大小（@css-tricks）。

vw 单位有所不同，因为它根据视口的宽度设置字形的宽度，因此在下面的演示中，您需要水平调整浏览器窗口大小才能查看这些更改

查看 CSS-Tricks 在 CodePen 上的笔 使用 vw 单位调整类型大小（@css-tricks）。

以下浏览器支持这些单位

Chrome	Safari	Firefox	Opera	IE	Android	iOS
31+	7+	31+	27+	9+	4.4+	7.1+

需要注意的是，还有另外两个视口单位：vmin 和 vmax。第一个将找到 vh 和 vw 的值，并将字体大小设置为两者中较小的一个，而 vmax 将字体大小设置为这两个值中较大的一个。

ch 单位

.element {
  font-size: 24ch;
}

ch 单位类似于 ex 单位，它将根据字体的 0（零）字形的宽度设置元素的字体大小

查看 CSS-Tricks 在 CodePen 上的笔 使用 ch 单位调整类型大小（@css-tricks）。

此单位受以下支持

Chrome	Safari	Firefox	Opera	IE	Android	iOS
27+	有效	10+	有效	9+	有效	有效

相关属性

• font
• font-family
• font-stretch
• font-style
• font-variant
• font-weight

其他资源

• W3C 上的字体大小
• MDN 上的字体大小
• 字体大小建议：根元素使用 px，组件使用 rem，文本元素使用 em
• CSS 的长度单位
• 为什么使用 em？
• 视口大小的排版
• 精确控制响应式排版