CSS - font-family 属性

CSS 的 font-family 属性用于指定网页上首选字体或要使用的字体列表。它指的是具有相似设计特征的字体组或类别。应首先提及具体的字体名称，然后是通用字体名称。

语法

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

属性值

值	描述
字体名称, 通用字体名称	感兴趣的字体名称和/或通用字体名称列表。
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-family 属性。

使用不同字体的字体系列属性

要将不同的字体样式应用于网页文本，请使用 font-family 属性。我们指定一个特定字体，然后是通用字体作为后备，以应对浏览器找不到特定字体的情况。以下示例演示了用法。

Open Compiler

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

打印页面