CSS - font-family 屬性

CSS 的 font-family 屬性用於指定網頁上首選字型或要使用的字型列表。它指的是具有相似設計特徵的字型組或類別。應首先提及具體的字型名稱，然後是通用字型名稱。

語法

font-family: font-family name | generic-family name | initial | inherit;

屬性值

值	描述
字型名稱, 通用字型名稱	感興趣的字型名稱和/或通用字型名稱列表。
initial	這將屬性設定為其預設值。
inherit	這將從父元素繼承屬性。

CSS 字體系列屬性示例

以下示例使用不同的字型解釋了 font-family 屬性。

使用不同字型的字體系列屬性

要將不同的字型樣式應用於網頁文字，請使用 font-family 屬性。我們指定一個特定字型，然後是通用字型作為後備，以應對瀏覽器找不到特定字型的情況。以下示例演示了用法。

<!DOCTYPE html>
<html>

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

     #font-1 {
        font-family: Times New Roman, Times, serif;
     }

     #font-2 {
        font-family: verdana, georgia;
     }

     #font-3 {
        font-family: Arial, Helvetica, sans-serif;
     }
  </style>
</head>

<body>
  <h2>
     CSS font-family property
  </h2>
  <h4>
     font-family: Times New Roman, Times, serif
  </h4>
  <p id="font-1" class="size">
     TutorialsPoint is an online platform offering free 
     and comprehensive tutorials on a wide range of topics,
     including programming, web development,and data science.
     It provides structured lessons, examples, and exercises
     to support self-paced learning and skill development.
  </p>
  <h4>
     font-family: verdana, georgia
  </h4>
  <p id="font-2" class="size">
     TutorialsPoint is an online platform offering free 
     and comprehensive tutorials on a wide range of topics,
     including programming, web development,and data science.
     It provides structured lessons, examples, and exercises
     to support self-paced learning and skill development.
  <h4>
     font-family: Arial, Helvetica, sans-serif
  </h4>
  <p id="font-3" class="size">
     TutorialsPoint is an online platform offering free 
     and comprehensive tutorials on a wide range of topics,
     including programming, web development,and data science.
     It provides structured lessons, examples, and exercises
     to support self-paced learning and skill development.
</body>

</html>

注意

特定字型名稱：例如“Arial”、“Times New Roman”、“Courier New”、“Verdana”、“Helvetica”等。
通用字體系列：這些是通用的字型類別，如果特定字型不可用，則將使用這些字型。例如“serif”、“sans-serif”、“monospace”、“cursive”、“fantasy”。
字型堆疊：這些是由逗號分隔的字型列表，瀏覽器將使用列表中第一個可用的字型。例如：“Arial, Helvetica, sans-serif”。

支援的瀏覽器

屬性
font-family	1.0	4.0	1.0	1.0	3.5

css_properties_reference.htm

列印頁面