跳到主要内容位置

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 相对大小。