1. Web
  2. CSS
  3. font-size

font-size

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

font-size CSS 属性用于设置字体大小。更改字体大小还会更新与字体大小相关的 <length> 单位（如 em、ex 等）的大小。

试一试

font-size: 1.2rem;

font-size: x-small;

font-size: smaller;

font-size: 12px;

font-size: 80%;

<section id="default-example">
  <p id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
    as if the waters had but newly retired from the face of the earth, and it
    would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

语法

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> 值，相对于父元素的字体大小。

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

math

在确定数学元素的 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-height。数值会乘以元素继承的 font-size，并且 font-size 会相对层叠。

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

正式定义

初始值medium
应用于所有元素和文本。它也适用于 ::first-letter 和 ::first-line。
继承性是
百分比参考父元素的字体大小
计算值绝对 <length>
动画类型按计算值类型

正式语法

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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.