CSS 字体系列窄字体

在 CSS 中，可以通过 font-family 属性设置字体，字体系列会根据字体名的顺序逐一进行选择，直到找到可用的字体。通常，字体系列定义为一个由多个字体名组成的列表，如果其中某个字体不能正常的显示，则会自动选择下一个字体。 字体系列的常用属性值包括 serif, sans-serif, monospace, cursive, fantasy 和 system-ui 等。 本文主要介绍 CSS 中的窄字体系列。

窄字体系列

窄字体系列是一种字体系列，其特点是字体较为狭窄。 在 CSS 中，窄字体系列可以使用以下字体名：

font-family: "Roboto Condensed", "Helvetica Neue", sans-serif;

其中，Roboto Condensed 是一种由 Google 开发的精简版 Roboto 字体，该字体具有紧凑的字形和良好的可读性。 如果没有这种字体，则会自动使用系统默认的 Helvetica Neue 字体或 sans-serif 字体。

示例

可以使用以下代码段示例窄字体系列的使用：

/* 字体系列 */
body {
  font-family: "Roboto Condensed", "Helvetica Neue", sans-serif;
}

/* 标题 */
h1 {
  font-size: 2.5em;
  font-weight: bold;
}

/* 正文 */
p {
  font-size: 1.2em;
  line-height: 1.5;
}

结论

窄字体系列在设计中使用越来越广泛，它们可以大幅缩小字体所占用的空间，同时可以保持良好的可读性。 在设计响应式网站时，窄字体系列也是一个很好的选择。