CSS font-size 属性-之路教程

em 单位的使用

em 单位被认为是一个相对单位。
它基于其父元素字体大小的计算值。
在下面的代码中，段落将是 32px，因为 2x16=32，而标题的字体大小将是 48px，因为 3x16=48px。
这个方法非常有用，因为我们可以确定所有的子元素总是相互关联的。

带有“em”值的 font-size 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        font-size: 16px;
      }
      p {
        font-size: 2em;
      }
      h2 {
        font-size: 3em;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Here is the heading</h2>
      <p>Here is the text.</p>
    </div>
  </body>
</html>

视口单位的使用

视口单位（vw 和 vh）用于设置元素的字体大小，它与视口的大小有关。

1vw = 视口宽度的 1%
1vh = 视口高度的 1%

.viewport {
  font-size: 120vh;
}

具有“长度”值的字体大小属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        color: green;
        font-size: 2vh;
      }
      p {
        color: red;
        font-size: 1em;
      }
      .length {
        color: orange;
        font-size: 30px;
      }
      h3 {
        color: lightblue;
        font-size: 3ex;
      }
      h1 {
        color: purple;
        font-size: 24pt;
      }
      a {
        color: blue;
        font-size: 120%;
      }
    </style>
  </head>
  <body>
    <h2>字体大小属性</h2>
     <span>这段文字是用 2vh 字体大小写的。</span>
     <p>这一段是用 1em 字体大小写的。</p>
     <div class="length">示例 30px 字体大小长度 </div>
     <h3>具有 3ex 字体大小长度的示例。</h3>
     <h1>我们将此标题的字体大小设置为 24pt。</h1>
     <a href="https://www.onitroad.com/">此超链接采用 100% 字体大小。</a>
  </body>
</html>

具有绝对大小值的 font-size 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .font-xxsmall {
        color: grey;
        font-size: xx-small;
      }
      .font-xsmall {
        color: grey;
        font-size: x-small;
      }
      .font-small {
        color: grey;
        font-size: small;
      }
      .fontSize-medium {
        color: grey;
        font-size: medium;
      }
      .font-large {
        color: grey;
        font-size: large;
      }
      .font-xlarge {
        color: grey;
        font-size: x-large;
      }
      .font-xxlarge {
        color: grey;
        font-size: xx-large;
      }
    </style>
  </head>
  <body>
    <h1>字体大小属性</h1>
     <div class="font-xxsmall">使用 font-size xx-small 属性的示例</div>
     <div class="font-xsmall">带有 font-size x-small 属性的示例</div>
     <div class="font-small">字体大小小属性示例</div>
     <div class="font-medium">使用 font-size medium 属性的示例</div>
     <div class="font-large">使用 font-size large 属性的示例</div>
     <div class="font-xlarge">带有 font-size x-large 属性的示例</div>
     <div class="font-xxlarge">带有 font-size xx-large 属性的示例</div>
  </body>
</html>

具有“较小”和“较大”值的字体大小属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .smaller {
        color: red;
        font-size: smaller;
      }
      .larger {
        color: red;
        font-size: larger;
      }
    </style>
  </head>
  <body>
    <h1>字体大小属性</h1>
     <div class="smaller">字体大小更小的属性示例</div>
     <div class="larger">字体大小较大属性的示例</div>
  </body>
</html>

语法

font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit;

字体大小属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        font-size: 24pt;
      }
      h3 {
        font-size: 26px;
      }
      p {
        font-size: 1em;
      }
      a {
        font-size: 100%;
      }
      span {
        font-size: x-small;
      }
    </style>
  </head>
  <body>
    <span>大小设置为 x-small</span>
    <p> 1em 大小</p>
    <a href="https://www.onitroad.com/"> 100% 字体大小</a>
    <h3>标题大小设置为 x-small</h3>
    <h1>将这个标题的大小设置为24像素</h1>
  </body>
</html>

rem 单位的使用

在使用 rem 单位的情况下，字体大小取决于 HTML 元素的值。
在下面的例子中，rem 单元继承自 HTML 元素，这就是它等于 24px 的原因。
因此，标题的字体大小为 24px，因为 1.5x16=24px。

具有 "rem" 值的 font-size 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        font-size: 16px;
      }
      h2 {
        font-size: 1.5rem;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Here is the heading</h2>
      <p>Here is the text.</p>
    </div>
  </body>
</html>

CSS font-size 属性值说明

值	描述
medium	将字体大小设置为介质。这是此属性的默认值。
xx-small	将字体大小设置为xx-small。
x-small	将字体大小设置为x-small。
small	将字体大小设置为小。
large	将字体大小设置为大。
x-large	将字体大小设置为x-mant。
xx-large	将字体大小设置为XX大。
smaller	小字体大小。
larger	大小是字体大小。
length	指定PX，EM等的字体大小
%	将字体大小设置为父元素字体大小的百分比。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

百分比值的使用

百分比值相对于父元素的字体大小。
下面的代码展示了它的用法：

以百分比指定的 font-size 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h3 {
        font-size: 125%;
      }
    </style>
  </head>
  <body>
    <h3>我们在这个标题中使用了 x-small 字体大小。</h3>
     <span>这个跨度是用x-small值写的。</span>
     <p>这一段是用 1em 字体大小写的。</p>
  </body>
</html>

ex 单位的使用

对于 ex 单元，1ex 等于计算出的 HTML 元素字母 x 的高度。
在下面的代码示例中，HTML 元素是 15px。
该特定字体的 x 高度将决定所有其他字体大小。

.exunit {
  font-size: 15ex;
}

CSS font-size 属性

font-size 属性定义文本的字体大小。

字体大小可以通过以下方式定义：

绝对大小
相对大小
长度
百分比

绝对字体大小包括以下值：

xx-small
x-small
small
small
x-large
xx-large

相对字体大小包括以下值：

smaller
larger

长度可以是相对长度（em、ex、px）和绝对长度（in、cm、mm、pt、pc）。
百分比指定相对于父元素字体大小的绝对字体大小。

初始值	medium
应用于	所有元素。它还适用于伪元素::first-letter 和 ::first-line。
继承	可继承
可动画的	是的。
版本	CSS1.
DOM 语法	object.style.fontsize =“15px”;

日期：2020-06-02 22:14:32 来源：oir作者：oir

←CSS font-size-adjust 属性

CSS font-stretch 属性→