CSS font-family

HTML 页面的外观和格式是通过一种称为 CSS（层叠样式表）的语言来指定的。CSS 中的 `font-family` 属性用于指定 HTML 元素中文本内容的首选字体(s)。'font-family' 属性在此分解为主要和高级概念

字体系列基础概念

1. 字体系列名称： 字体系列名称可以作为字符串值提供。例如：

在这种情况下，浏览器将尝试使用 Arial 字体。如果 Arial 不可用，则会使用标准的无衬线字体。

2. 通用字体系列： 当字体不可用时，可以使用五种通用字体系列之一作为后备。以下是通用系列：

• “Serif”（衬线体）： 通常用于更正式或传统的材料。
• “Sans-serif”（无衬线体）： 经常用于更现代和休闲的材料。
• “Monospace”（等宽字体）： 用于保持字符对齐或显示代码。
• “cursive”（手写体）： 表示手写或类似于脚本的字体。
• “Fantasy”（装饰体）： 这个术语指的是装饰性或奇幻风格的字体。

字体系列高级概念

1. 字体堆栈： 如果指定的字体不可用，可以提供备用字体系列。这被称为字体堆栈。例如：

在这种情况下，浏览器将首先尝试应用“Helvetica Neue”字体。因此，它将尝试使用 Arial；如果可能，它将回退到标准的无衬线字体。

2. 系统字体： 可以使用 CSS 使用用户设备上预装的系统字体。通过提供字体系列的通用名称，可以指示浏览器使用操作系统的默认字体。例如：

在这种情况下，浏览器将尝试使用系统的默认字体。它将在 Apple 品牌设备上使用 Apple 系统字体，在 macOS 上使用 San Francisco，在 Windows 上使用 Segoe UI。

3. Web 字体： 从远程服务器检索而不是安装在用户设备上的自定义字体称为 Web 字体。要将 Web 字体导入 CSS 中并使用它们，请使用 `@font-face` 规则。例如：

此示例使用 `@font-face` 语法导入“MyWebFont”Web 字体，该字体随后在 `font-family` 属性中使用。

这些是 CSS 中 `font-family` 属性的基本概念和更复杂的概念。通过使用多种字体系列，可以管理您网站上文本的外观和感觉。

CSS 中的字体系列类型

有五种字体类型或分类：

1. 衬线字体 (Serif Fonts)： 衬线字体在字母的末端包含小的装饰性笔画或线条，称为衬线。它们被认为更正式和传统，通常用于印刷品的正文。Georgia、Times New Roman 和 Garamond 是其中的一些例子。
2. 无衬线字体 (Sans-serif Fonts)： 无衬线字体没有衬线，看起来更现代、更简洁。它们经常用于屏幕显示和数字娱乐。Arial、Helvetica 和 Verdana 是其中的一些例子。
3. 等宽字体 (Monospaced Fonts)： 等宽字体中的每个字母之间使用相等的空间，通常称为固定宽度字体。结果是每个字母占据相同的水平空间比例。它们常用于表格数据、终端显示和编码。Consolas、Monaco 和 Courier 是其中的一些例子。
4. 手写体 (Cursive Fonts)： 手写体模仿书法或手写。它们的字形会流畅地连接在一起，看起来像是手工制作的。设计通常会添加装饰性或个人风格，例如 Lucida Handwriting、Zapfino 和 Brush Script。
5. 装饰体 (Fantasy Fonts)： 具有美丽且富有创意的装饰的字体属于装饰体类别。它们常用于富有想象力和艺术性的设计，如标志、海报和具有奇幻主题的材料。在装饰体字体中可以看到独特而不同寻常的字形，其中融合了符号或华丽的图案。Chiller、Jokerman 和 Ravie 也是一些例子。

这五种字体类别提供了各种风格和特性，以适应不同的设计目标和美学。