CSS 设置字体大小

网页的主要目的就是为了传递信息，信息的呈现方式就是文字，文字样式是否美观直接影响到了网站用户的体验，可以说网站最重要的部分就是字体了。一个设计良好的网站应该字体风格统一，符合网站的主要意图，例如关于企业的网站，应该使用较为严肃的字体，如黑体、宋体，对与面向少儿的网站，则应该采用圆体、手写体，或其他看起来比较可爱、俏皮的字体。

这一小节，我们先来看看如何设置 CSS 的字体大小。

字体大小

设置字体大小使用 font-size 属性，后面指定文字的大小数值，任何可以写文字的 HTML 元素都可以设置字体相关的属性。例如把某个 p 元素的字体设置为 18 px 大小：

<style>
  p {
    font-size: 18px;
  }
</style>

<p>这是一段文字</p>

预览：

CSS 度量单位

这里简单介绍一下 CSS 的度量单位，最常见的是 px，也就是屏幕像素大小，例如分辨率为 1920 * 1080 的屏幕，它的宽度为 1920 px，那么 10px 就是占据了 10 个像素单位。另外还有百分比，如果宽度设置为 10%，那么它就占据 192 px。

字体除了可以用 px 作为单位外，还可以用 em。 em 是一个相对的单位，它会根据父元素的字体大小，计算出对应的 px 值，例如父元素的字体为 20px，那么 0.8em 就是16px，例如下方代码所示：

<style>
  div {
    font-size: 20px;
  }
  p {
    font-size: 0.8em;
  }
</style>

<div> 
  <span>这一部分为 20 px，</span>
  <p>这一部分为 16px</p>
</div>

预览：

与 em 相似的还有 rem，它也是相对单位，取自于 HTML 元素的字体大小，而 HTML 元素的字体大小又取自于浏览器的默认字体大小，一般为 16px。那么这样， 1rem 永远是 16px，与父元素的字体大小无关，除非用户手动修改了浏览器的默认字体大小，例如下方代码所示：

<style>
  div {
    font-size: 20px;
  }
  p {
    font-size: 2rem; /* 32px */
  }
</style>

<div> 
  <span>这一部分为 20 px，</span>
  <p>这一部分为 32px</p>
</div>

预览：

描述式文字大小

CSS 设置字体还可以使用描述式的文字大小，有下面几种：

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

它们会由浏览器，根据一定的比例，自行设置字体的大小，以 medium 为基准，例如下方代码所示：

<style>
  p:nth-child(1) {
    font-size: medium;
  }
  p:nth-child(2) {

    font-size: x-large;
  }
  p:nth-child(3) {
    font-size: x-small;
  }
</style>

<p>medium</p>
<p>x-large</p>
<p>x-small</p>

预览：

在 Chrome 浏览器下， medium 为16px，x-large 为 24px，x-small 为 10 px。

使用描述式字体大小也可以使用相对单位，分别是：larger 和 smaller，它们会根据父元素的字体大小，把自身的字体设置为较小或较大的尺寸：

<style>
  div {
    font-size: 20px;
  }
  span {
    font-size: smaller;
  }
  p {
    font-size: larger;
  }
</style>

<div>
  <span>这一部分为较小的字体</span>
  <p>这一部分为较大的字体</p>
</div>

预览：

小结

CSS 设置字体的大小有两种方式，一种是使用数值，一种是使用描述式大小。在使用数值时，可以使用 px 绝对大小，或者也可以使用 em/rem 相对大小。描述式可以使用 medium、x-large、xx-small 等绝对大小，也可以使用 larger、smaller 相对大小。