CSS - font-size 属性

CSS font-size 属性设置元素文本的字体大小。它可以使用各种单位定义，例如像素、em、rem、百分比或关键字，影响文本的可读性、布局以及不同设备和分辨率下的整体设计一致性。

语法

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

属性值

值	描述
medium	将元素的字体大小设置为中等。
xx-small	将元素的字体大小设置为极小。
x-small	将元素的字体大小设置为较小。
small	将元素的字体大小设置为小。
large	将元素的字体大小设置为大。
x-large	将元素的字体大小设置为较大。
xx-large	将元素的字体大小设置为极大。
smaller	将元素的字体大小设置为更小。
larger	将元素的字体大小设置为更大。
长度	元素的字体大小以长度单位（px、em、rem 等）指定。
百分比	元素的字体大小以百分比指定。
initial	将属性设置为其初始值。
inherit	从父元素继承该属性。

CSS 字体大小属性示例

以下示例说明了使用不同值的font-size 属性。

使用 medium 值的字体大小属性

要将元素的字体设置为中等大小，我们使用medium 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .font {
         font-size: medium;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-size property
   </h2>
   <p>
      This is sample text.
   </p>
   <p class="font">
      This text has a medium size.
   </p>
</body>

</html>

使用 xx-small 值的字体大小属性

要将元素的字体设置为 xx-small 大小，我们使用xx-small 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .font {
         font-size: xx-small;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-size property
   </h2>
   <p>
      This is sample text.
   </p>
   <p class="font">
      This text has a xx-small size.
   </p>
</body>

</html>

使用 x-small 值的字体大小属性

要将元素的字体设置为 x-small 大小，我们使用x-small 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .font {
         font-size: x-small;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-size property
   </h2>
   <p>
      This is sample text.
   </p>
   <p class="font">
      This text has a x-small size.
   </p>
</body>

</html>

使用 small 值的字体大小属性

要将元素的字体设置为 small 大小，我们使用small 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .font {
            font-size: small;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-size property
   </h2>
   <p>
      This is sample text.
   </p>
   <p class="font">
      This text has a small size.
   </p>
</body>

</html>

使用 large 值的字体大小属性

要将元素的字体设置为 large 大小，我们使用large 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .font {
         font-size: large;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-size property
   </h2>
   <p>
      This is sample text.
   </p>
   <p class="font">
      This text has a large size.
   </p>
</body>

</html>

使用 x-large 值的字体大小属性

要将元素的字体设置为 x-large 大小，我们使用x-large 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .font {
         font-size: x-large;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-size property
   </h2>
   <p>
      This is sample text.
   </p>
   <p class="font">
      This text has a x-large size.
   </p>
</body>

</html>

使用 xx-large 值的字体大小属性

要将元素的字体设置为 xx-large 大小，我们使用xx-large 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .font {
         font-size: xx-large;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-size property
   </h2>
   <p>
      This is sample text.
   </p>
   <p class="font">
      This text has a xx-large size.
   </p>
</body>

</html>

使用 smaller 值的字体大小属性

要将元素的字体设置为更小，我们使用smaller 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .font {
         font-size: smaller;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-size property
   </h2>
   <p>
      This is sample text.
   </p>
   <p class="font">
      This text has a smaller size.
   </p>
</body>

</html>

使用 larger 值的字体大小属性

要将元素的字体设置为更大，我们使用larger 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .font {
         font-size: larger;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-size property
   </h2>
   <p>
      This is sample text.
   </p>
   <p class="font">
      This text has a larger size.
   </p>
</body>

</html>

使用长度值的字体大小属性

元素的font-size也可以使用长度值（例如px、rem、em等）设置。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .size1 {
         font-size: 2em;
      }

      .size2 {
         font-size: 25px;
      }

      .size3 {
         font-size: 3rem;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-size property
   </h2>
   <p>
      This is sample text.
   </p>
   <p class="size1">
      This text has a 2em size.
   </p>
   <p class="size2">
      This text has a 25px size.
   </p>
   <p class="size3">
      This text has a 3rem size.
   </p>
</body>

</html>

使用百分比值的字体大小属性

元素的font-size也可以使用百分比值（例如10%、4%等）设置。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .size1 {
         font-size: 120%;
      }

      .size2 {
         font-size: 140%;
      }

   </style>
</head>

<body>
   <h2>
      CSS font-size property
   </h2>
   <p>
      This is sample text.
   </p>
   <p class="size1">
      This text has a 120% size.
   </p>
   <p class="size2">
      This text has a 140% size.
   </p>
</body>

</html>

支持的浏览器

属性
font-size	1.0	5.5	1.0	1.0	7.0

css_properties_reference.htm

打印页面