Skip to main content

文字大小 font-size

Docs

font-size - CSS | MDN (mozilla.org)

font-size 属性指定字体的大小。因为该属性的值会被用于计算 em 和 ex 长度单位，定义该值可能改变其他元素的大小。

  • font-size 用于设置文字的大小
  • 常用的设置
    • 具体数值 + 单位
      • 比如 100px
      • 也可以使用 em 单位 (不推荐)：1em 代表 100%，2em 代表 200%，0.5em 代表 50%
    • 百分比
      • 基于父元素的 font-size 计算，比如 50% 表示等于父元素 font-size 的一半
CSS 的值与单位 - 学习 Web 开发 | MDN (mozilla.org)
  • 绝对长度单位
    • cm, mm, Q, in, pc, pt, px
  • 相对长度单位
    • em, ex, ch, rem, lh, vw, vh, vmin, vmax
  • 百分比
    • 将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比。如果使用百分比作为宽度值，那么它将是父值宽度的百分比。
ems and rems

概括地说，在排版属性中 em 单位的意思是"父元素的字体大小"。带有 ems 类的 <ul> 内的 <li> 元素从它们的父元素中获取大小。因此，每一个连续的嵌套级别都会逐渐变大，因为每个嵌套的字体大小都被设置为 1.3em 是其父嵌套字体大小的 1.3 倍。

概括地说，rem 单位的意思是"根元素的字体大小"。("根 em"的 rem 标准。) <ul> 内的 <li> 元素和一个 rems 类从根元素 (<html>) 中获取它们的大小。这意味着每一个连续的嵌套层都不会不断变大。

但是，如果你在 CSS 中更改 <html> 字体大小，你将看到所有其他相关内容都发生了更改，包括 rem 和 em 大小的文本。

语法​

font-size 属性以两种方式之一指定：

作为一个从绝对大小 absolute-size 关键字列表或相对大小 relative-size 关键字列表中选择的单个关键字。 作为一个 <length-percentage> 值。

值​

  • xx-small, x-small, small, medium, large, x-large, xx-large：该套绝对大小关键字定义相对于用户的默认字体大小 (medium)。与展示 HTML 的 <font size="1"> 到 <font size="7">（用户默认字体大小 <font size="3">）类似。

  • larger, smaller：比父元素的字体大或小，使用与上面的关键字的相近缩放比率。

  • <length>：正数 <length>。当单位为 em 或 ex 时，大小为相对于父元素的文字的大小。例如，0.5em 就是当前元素的父元素的字体大小的一半。

  • <percentage>：父元素字体大小的正数 <percentage>

可用方法​

有多重定义字体大小的方法，包括了使用关键字及使用像素或 em 数字值。请根据网页的特定需求选择适用的方法。

关键字​

关键字是定义网络字体大小的好方法。通过在 body 元素上定义关键字字体大小，你可以在网页的任何地方设置相对字体大小，这让你能轻易地缩放整个网页的字体大小。

像素​

当你需要精确地像素时，用 px 设定字体大小是一种好方法。一像素的大小是固定的。这是一个不取决于平台的、跨浏览器的准确设置字体大小高度为你所想的像素大小的方法。因为不同浏览器为得到同样效果的算法可能不同，所以显示效果可能有微小的不同。

字体大小的设置也可以使用组合值。例如，如果父元素设定为 16px 而子元素设定为 larger, 子元素显示的字体大小就会大于父元素。

备注： 用像素字体定义使得字体大小不可由用户的浏览器改变。（例如，视力较低用户可能希望使用比网页设计师设定的字体大小大很多的字体）所以，如果你想创造能广泛使用的设计请避免使用像素设定字体。

Em​

另一种方法是用 em 值设定字体大小。em 值的大小是动态的。当定义或继承 font-size 属性时，1em 等于该元素的字体大小。如果你在网页中任何地方都没有设置文字大小的话，那它将等于浏览器默认文字大小，通常是 16px。所以通常 1em = 16px。2em = 32px。如果你设置了 body 元素的字体大小为 20px，那 1em = 20px、2em = 40px。那个 2 就是当前 em 大小的倍数。

可用这个公式计算像素大小的等价 em 大小：

em = 希望得到的像素大小 / 父元素字体像素大小

例如，假设 body 的文字大小设为 1em，且浏览器默认 1em = 16px。如果你想得到 12px，那你就可设定 0.75em (because 12/16 = 0.75)。同样的，如果你想设定文字大小为 10px，那就定义 0.625em (10/16 = 0.625)；若想要 22px 就定义 1.375em (22/16=1.375).

一个流行的技巧是设置 body 元素的字体大小为 62.5% (即默认大小 16px 的 62.5%)，等于 10px。现在你可以通过计算基准大小 10px 的倍数，在任何元素上方便的使用 em 单位。这样有 6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em。例如：

body {
  font-size: 62.5%; /* font-size 1em = 10px */
}

p {
  font-size: 1.6em; /* 1.6em = 16px */
}

因为 em 可以自动适应用户的字体，em 是一个非常有用的 CSS 单位。

示例​

<div class="home">
  <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>
  <p class="ems">文字大小为 1.5em(16 x 1.5).</p>
  <p class="rems">文字大小为 1.5rem(16 x 1.5).</p>
  <p>
    <span class="normal">.normal 下元素文字大小为 30px.
      <span class="rems">.normal .rems 元素文字大小为 1.5rem(16 x 1.5).
        <span class="ems">.normal .rems .ems 元素文字大小为 1.5em(16 x 1.5 x 1.5). </span>
      </span>
    </span>

  </p>
  <p>
    <span class="normal">.normal 下元素文字大小为 30px.
      <span class="ems">.normal .ems 元素文字大小为 1.5em(30 x 1.5).
        <span class="rems">.normal .ems .rems 元素文字大小为 1.5rem(16 x 1.5). </span>
      </span>
    </span>
  </p>
</div>
http://localhost:3000/font-size.html

Small H1

Larger H1

24 point H1

200% H1

文字大小为 1.5em(16 x 1.5).

文字大小为 1.5rem(16 x 1.5).

.normal 下元素文字大小为 30px..normal .rems 元素文字大小为 1.5rem(16 x 1.5)..normal .rems .ems 元素文字大小为 1.5em(16 x 1.5 x 1.5).

.normal 下元素文字大小为 30px..normal .ems 元素文字大小为 1.5em(30 x 1.5)..normal .ems .rems 元素文字大小为 1.5rem(16 x 1.5).