font-family

Avatar of Louis Lazaris
Louis Lazaris

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费积分!

font-family 属性定义应用于所选元素的字体。所选字体不是单个字体面,而是一个“系列”,因此可能取决于其他排版属性值才能在系列中选择正确的字体面。

body {
    font-family: Arial, Helvetica, sans-serif;
}

值可以是以下之一:

  • 与页面上嵌入或用户系统上可用的字体匹配的字体系列名称。
  • 一系列用逗号分隔的字体系列名称,其中可以包含通用字体系列名称。

如果使用了多个字体系列名称,浏览器将选择它找到的第一个字体系列名称,这些名称要么使用@font-face嵌入到页面中,要么安装在用户的操作系统上。

对于font-family,没有特定的默认值或初始值;初始值始终取决于浏览器和/或操作系统。

通用字体系列名称

如果为单个声明使用了多个值,建议将通用字体系列列在最后作为后备,以确保最佳的排版体验。

code {
    font-family: Courier, Monaco, monospace;
}

在上面的示例中,“Courier”和“Monaco”是实际字体的真实字体系列名称,而“monospace”只是一个对用户系统上安装的任何等宽字体的通用引用。

如果找不到安装的前两个字体系列,浏览器将选择最佳选项,但仅限于等宽字体。如果没有通用字体系列,字体将默认为用户系统上的默认字体(可能是衬线或非衬线),这将是不希望看到的。

通用字体系列名称包括serifsans-serifcursivefantasymonospace

如果字体系列名称与通用字体系列名称匹配,则应将字体系列名称用引号括起来,以指示它不是通用字体系列。

多词字体系列名称

如果字体系列名称包含用空格分隔的多个单词,建议将字体系列名称用引号(单引号或双引号)括起来。

code {
    font-family: "Times New Roman", Georgia, serif;
}

这并非总是必要的,但通常更安全的做法是为任何包含空格或特殊字符的字体系列名称包含引号。

相关属性

其他资源

浏览器支持

Chrome Safari Firefox Opera IE Android iOS
有效 有效 有效 有效 有效 有效 有效