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

列印頁面