字体大小

**font-size** CSS 属性设置字体的尺寸。更改字体尺寸也会更新字体尺寸相关的 <length> 单位的大小，例如 em、ex 等。

试一试

语法

css
/* <absolute-size> values */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;

/* <relative-size> values */
font-size: smaller;
font-size: larger;

/* <length> values */
font-size: 12px;
font-size: 0.8em;

/* <percentage> values */
font-size: 80%;

/* math value */
font-size: math;

/* Global values */
font-size: inherit;
font-size: initial;
font-size: revert;
font-size: revert-layer;
font-size: unset;

值

xx-small、x-small、small、medium、large、x-large、xx-large、xxx-large

绝对尺寸 关键字，基于用户的默认字体大小（即 medium）。

larger、smaller

相对尺寸 关键字。字体相对于父元素的字体大小会更大或更小，大约按照上面用于分隔绝对尺寸关键字的比例。

<length>

正 <length> 值。对于大多数字体相关的单位（如 em 和 ex），字体大小相对于父元素的字体大小。

对于基于根的字体相关单位（如 rem），字体大小相对于 <html>（根）元素使用的字体大小。

<percentage>

正 <percentage> 值，相对于父元素的字体大小。

注意：为了最大程度地提高可访问性，通常最好使用相对于用户默认字体大小的值。

数学

确定数学元素的 font-size 属性的计算值相对于包含父元素的 font-size 时，会应用缩放规则。有关更多信息，请参阅 math-depth 属性。

描述

有多种方法可以指定字体大小，包括像素或 em 的关键字或数值。根据特定网页的需要选择合适的方法。

关键字

关键字是设置网页上字体大小的一种好方法。通过在 <body> 元素上设置关键字字体大小，可以在页面上的其他任何位置设置相对字体大小，从而能够轻松地相应地放大或缩小整个页面的字体。

像素

当需要像素精度时，以像素值 (px) 设置字体大小是一个不错的选择。px 值是静态的。这是一种与操作系统和浏览器无关的方式，实际上是告诉浏览器以您指定的精确像素高度呈现字母。结果在不同浏览器之间可能略有不同，因为它们可能使用不同的算法来实现类似的效果。

字体大小设置也可以组合使用。例如，如果父元素设置为 16px，其子元素设置为 larger，则子元素在页面上显示的大小大于父元素。

注意： 在 px 中定义字体大小不可访问，因为用户在某些浏览器中无法更改字体大小。例如，视力有限的用户可能希望将字体大小设置为比网页设计师选择的大小大得多。如果您希望创建包容性设计，请避免将其用于字体大小。

em

使用 em 值会创建动态或计算出的字体大小（历史上，em 单位源自给定字体中大写字母“M”的宽度）。数值充当其所用元素的 font-size 属性的乘数。请考虑以下示例

css
p {
  font-size: 2em;
}

在这种情况下，<p> 元素的字体大小将是 <p> 元素继承的计算出的 font-size 的两倍。扩展来说，font-size 为 1em 等于其所用元素的计算出的 font-size。

如果在任何 <p> 的祖先元素上都没有设置 font-size，则 1em 将等于默认的浏览器 font-size，通常为 16px。因此，默认情况下 1em 等于 16px，而 2em 等于 32px。如果您在 <body> 元素上设置 font-size 为 20px，则 <p> 元素上的 1em 将等效于 20px，而 2em 将等效于 40px。

为了计算任何所需像素值的 em 等价物，您可以使用以下公式

em = desired element pixel value / parent element font-size in pixels

例如，假设页面的 <body> 的 font-size 设置为 16px。如果您想要的字体大小为 12px，则应指定 0.75em（因为 12/16 = 0.75）。类似地，如果您想要 10px 的字体大小，则指定 0.625em（10/16 = 0.625）；对于 22px，指定 1.375em（22/16）。

em 是 CSS 中一个非常有用的单位，因为它会根据读者选择使用的字体自动调整其长度。

需要记住的一个重要事实：em 值会复合。请看以下 HTML 和 CSS

css
html {
  font-size: 100%;
}
span {
  font-size: 1.6em;
}
html
<div>
  <span>Outer <span>inner</span> outer</span>
</div>

结果是

假设浏览器的默认 font-size 为 16px，“outer”一词将以 25.6px 渲染，但“inner”一词将以 40.96px 渲染。这是因为内部 <span> 的 font-size 为 1.6em，它相对于其父元素的 font-size，而父元素的 font-size 又相对于其父元素的 font-size。这通常称为复合。

rem

为了避免复合问题，发明了 rem 值。rem 值相对于根 html 元素，而不是父元素。换句话说，它允许您以相对方式指定字体大小，而不会受到父元素大小的影响，从而消除了复合。

下面的 CSS 几乎与前面的示例相同。唯一的例外是单位已更改为 rem。

css
html {
  font-size: 100%;
}
span {
  font-size: 1.6rem;
}

然后我们将此 CSS 应用于相同的 HTML，如下所示

html
<span>Outer <span>inner</span> outer</span>

在此示例中，“outer inner outer”这几个词都以 25.6px 显示（假设浏览器的 font-size 保持默认值 16px）。

ex

与 em 单位一样，使用 ex 单位设置的元素的 font-size 是计算出的或动态的。它的行为完全相同，只是在使用 ex 单位设置 font-size 属性时，font-size 等于页面上使用的第一个可用字体 的 x 高度。数值会将元素继承的 font-size 乘以，并且 font-size 相对复合。

有关 ex 等字体相对长度单位 的更详细说明，请参阅 W3C 编辑草案。

正式定义

初始值medium
应用于所有元素和文本。它也适用于 ::first-letter 和 ::first-line。
继承是
百分比指的是父元素的字体大小
计算值按指定，但将相对长度转换为绝对长度
动画类型一个 长度

正式语法

font-size = 
  <absolute-size>            |
  <relative-size>            |
  <length-percentage [0,∞]>  |
  math                       

<length-percentage> = 
  <length>      |
  <percentage>

示例

设置字体大小

CSS

css
.small {
  font-size: xx-small;
}
.larger {
  font-size: larger;
}
.point {
  font-size: 24pt;
}
.percent {
  font-size: 200%;
}

HTML

html
<h1 class="small">Small H1</h1>
<h1 class="larger">Larger H1</h1>
<h1 class="point">24 point H1</h1>
<h1 class="percent">200% H1</h1>

结果

规范

规范
CSS 字体模块级别 4
# font-size-prop

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅