CSS字体

字体是我们打开网页时首先看到的东西,网页上使用的字体类型让我们对内容的风格有所了解。因此,选择正确的字体是网页设计过程的关键部分。

CSS 很好地支持字体,本指南的这一部分我们将研究如何在页面上操作字体。

Web 开发人员和设计人员使用Google Fonts作为向其网站添加字体的存储库是很常见的。如果您不使用Google Fonts 提供的字体文件将字体添加到您的网站,那么用户唯一可用的字体将是安装在其本地计算机上的字体。

字体系列#

可能是要知道的最有用的字体属性,font-family可让您为特定元素设置字体。它接受逗号分隔的字体列表。最佳做法是遵循带有关键字的字体列表,例如sans-serif. 这意味着如果没有安装列出的字体,sans-serif将使用系统默认值。

div {
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

另请注意,单字字体不需要语音标记,但多字字体需要。可用于字体系列的关键字是:

  • serif – 一种有衬线的字体,即Times New Roman
  • sans-seri – 一种没有衬线的字体,即本页使用的字体
  • monospace – 一种间距均匀的字体,通常用于编码,即Menlo
  • Fantasy——一种装饰性字体,即Impact
  • cursive – 一种模仿手写的字体,即Apple Chancery

字体大小#

字体大小用 设置font-size。这接受任何 CSS 单位,但最常见的是像素 ( px) 或remem,它指的是从当前字体的最顶部到最底部的距离。

通常,最好使用emor rem

div {
    font-size: 1.5rem;
}

字体样式#

在 CSS 中,font-style是指一种字体是oblique还是italic,两种不同风格的倾斜字体。它可以设置为这些值中的任何一个,或normal.

div {
    font-style: italic;
}

我是斜体!

线高#

一行文本的高度也可以用 CSS 来配置。为此,我们使用line-height. 正如预期的那样,它接受任何 CSS 单元,但最常见的是:

  • no units无单位– 指当前字体大小,因此对于 16px 字体,1 为 16px,2 为 32px。
  • em/rem – 如前所述,指的是字体大小。
  • px – 以特定像素单位定义的行高。
div {
    line-height: 1.5rem;
}
li {
    line-height: 1.25;
}