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	从父元素继承该属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS 字体大小属性示例

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

使用 medium 值的字体大小属性

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

示例

Open Compiler

<!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 值。这在以下示例中显示。

示例

Open Compiler

<!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 值。这在以下示例中显示。

示例

Open Compiler

<!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 值。这在以下示例中显示。

示例

Open Compiler

<!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 值。这在以下示例中显示。

示例

Open Compiler

<!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 值。这在以下示例中显示。

示例

Open Compiler

<!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 值。这在以下示例中显示。

示例

Open Compiler

<!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 值。这在以下示例中显示。

示例

Open Compiler

<!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 值。这在以下示例中显示。

示例

Open Compiler

<!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等）设置。这在以下示例中显示。

示例

Open Compiler

<!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%等）设置。这在以下示例中显示。

示例

Open Compiler

<!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

打印页面