CSS OS 依赖字体系列

在编写 CSS 样式时，字体选择是一个重要的考虑因素，因为字体不仅与美观相关，而且使得页面易于阅读。CSS 提供了一种依赖字体的机制，以确保浏览器能够正确地呈现所需字体。

字体依赖

CSS 样式中的字体可以分为两类：系统字体和自定义字体。系统字体是浏览器中内置的字体，可供网站使用。而自定义字体必须通过 Web 字体来进行传递和呈现。

CSS 的字体依赖是通过 font-family 属性来实现的。如果指定的字体不存在，浏览器将尝试依次使用 font-family 中列出的字体。

下面是一个示例：

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

在这个示例中，如果 Helvetica 字体在用户的系统中不可用，浏览器将使用 Arial，如果 Arial 也不可用，则使用 sans-serif 系统字体来显示。

系统字体

以下是常见的系统字体列表：

• Arial (Windows, macOS, iOS)
• Helvetica (macOS, iOS)
• Tahoma (Windows)
• Times New Roman (Windows, macOS)
• Georgia (Windows, macOS)
• Verdana (Windows, macOS, iOS)
• Courier New (Windows, macOS, iOS)
• Lucida Console (Windows, macOS)

需要注意的是，这些系统字体可能会因操作系统不同而有所不同。因此，在编写样式时，建议使用常用的系统字体。

Web 字体

Web 字体是一种在网页上使用的字体格式。不同于系统字体，Web 字体需要从服务器上进行下载。通常情况下，Web 字体以 TrueType 或 OpenType 格式存储，并使用 @font-face 规则进行处理。

以下是一个使用 Web 字体的示例：

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular.ttf") format("truetype");
}

body {
  font-family: "Open Sans", sans-serif;
}

在这个示例中，@font-face 规则定义了一种名为 "Open Sans" 的字体，并指定其字体文件的位置和格式。在 body 元素中，"Open Sans" 字体被设置为首选字体，并采用系统字体作为备选字体。

结论

在编写 CSS 样式时，字体选择是一个重要的考虑因素。通过正确使用字体依赖机制，可以确保网站在各种浏览器环境中正常显示。