字体是我们打开网页时首先看到的东西,网页上使用的字体类型让我们对内容的风格有所了解。因此,选择正确的字体是网页设计过程的关键部分。
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
) 或rem
/ em
,它指的是从当前字体的最顶部到最底部的距离。
通常,最好使用em
or 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;
}