什么是正确的指定为 CSS 字体系列值：字体、字体或字体系列？

Posted 2023-03-07

【中文标题】什么是正确的指定为 CSS 字体系列值：字体、字体或字体系列？

【英文标题】：What is correct to specify as CSS font-family value: typeface, font or font-family?

【发布时间】：2014-02-02 08:44:31

【问题描述】：

这里是字体、字体和字体系列的定义：

字体是一组字符的设计。 字体是字体和其他特性（例如大小、间距和间距）的组合。 字体系列是一组字体，所有字体都相同，但大小、粗细和倾斜度不同。

那么我可以将这 3 个中的哪一个指定为 css font-family 属性的值？ 如果我应该只指定 3) 即字体系列，那么当我指定无衬线字体时，浏览器将从用户系统中选择哪种无衬线字体来显示内容？用户系统上可以有很多无衬线字体。

提前致谢， 苏仁

【参考方案1】：

没有。 font-family 的值是字体系列的逗号分隔列表（按优先顺序）。字体系列是一组（一个或多个）具有相似设计的字体，通常由印刷师设计，以便它们在风格上保持一致。例如，字体系列 Georgia 包含可能具有名称 Georgia Regular、Georgia Italic、Georgia Bold 和 Georgia Bold Italic 的字体。字体的名称可能与语言有关，并不打算在 CSS 中使用。相反，您使用各种 CSS 结构来选择字体；例如，font-style: italic 从正在使用的字体系列中选择一个斜体字体（或者，如果它没有这样的字体，可以通过在常规字体中倾斜字形来创建“仿斜体”）。

标识符sans-serif 表示所谓的通用无衬线字体系列。这意味着依赖于浏览器的字体系列。浏览器有默认设置，用户可以在浏览器设置中更改（尽管很少有人知道和关心这一点）。

【参考方案2】：

在 CSS 中使用 font-family 时，最好构建一个“字体堆栈”。 This website 为您提供了一些标准字体，您无需下载任何额外字体即可使用。

字体堆栈的思想是用户计算机在列表（堆栈）中查找第一个字体，如果找不到，它将移动到列表中的下一个字体

举个例子：

font-family: 'Open Sans', Arial, "Helvetica Neue", Helvetica, sans-serif;

首先查找字体“Open Sans”。如果找不到，它会移动到“Arial”等等。就在最后，看起来像另一个字体名称“sans-serif”。有点混乱，因为这是一种类型，而不是字体的名称。在大多数系统上，这仅意味着无衬线字体将退回到您最基本的无衬线字体（在大多数情况下，这基本上只是 Windows 上的 Arial，可能是 Mac 上的 Helvetica）。了解它的最佳方式就是尝试一下！

【参考方案3】：

我不完全确定问题的第一部分是什么意思。但是，如果你写：

p
font-family: sans-serif;

那么您没有指定特定字体，仅指定默认的无衬线/衬线字体。浏览器将选择浏览器内置的默认浏览器（例如，在 Mac 的情况下，这将是 Helvetica，Windows 将默认为 Arial）或已由用户指定 - 仅在以下情况下由用户覆盖他们在浏览器中更改了默认设置。

如果要使用特定字体，则必须指定该字体。在行尾添加“sans-serif”或“serif”是一种很好的做法，因为它会使页面回退到默认字体。

例如：

 p 
        font-family: 'Lobster font', 'Tahoma', sans-serif;
  

在本例中，我们查找“龙虾字体”，如果找不到，我们会查找“Tahoma”，如果找不到，则回退到浏览器默认设置。

【讨论】：

表达式'sans-serif' 表示具有专有名称sans-serif 的字体系列。顺便说一句，这样的字体不存在。不带引号的表达式sans-serif 表示依赖于浏览器的（通用）字体系列。

已修改以反映这一点。