CSS 字体

为您的网站选择正确的字体很重要！

字体选择很重要

选择正确的字体对读者的体验有巨大影响 网站。

正确的字体可以为您的品牌创造一个强大的形象。

使用易于阅读的字体很重要。字体添加 value 添加到您的文本中。选择正确的颜色和文本大小也很重要 用于字体。

通用字体系列

在CSS中，有五个通用字体系列：

1. 衬线字体在每个字母的边缘都有一个小笔画。它们营造出一种正式和优雅的感觉。
2. 无衬线字体具有简洁的线条（没有附加小笔画）。它们营造出现代简约的外观。
3. 等宽字体 - 这里所有字母都具有相同的固定宽度。它们创造了一种机械外观。
4. 草书字体模仿人类的笔迹。
5. 幻想字体是装饰性/俏皮的字体。

所有不同的字体名称都属于通用字体系列之一。

衬线字体和无衬线字体之间的区别

注意： 在计算机屏幕上，无衬线字体被认为比衬线字体更容易阅读。

一些字体示例

字体名称	示例
Serif	Times New Roman、Georgia、Garamond
Sans-serif	Arial、Verdana、Helvetica
Monospace	Courier New、Lucida Console、Monaco
Cursive	Brush Script MT、Lucida Handwriting、
Fantasy	Copperplate、Papyrus

CSS font-family 属性

在 CSS 中，我们使用font-family属性来指定文本的字体。

注意：如果字体名称不止一个单词，则必须使用引号，例如：“Times New Roman”。

提示： font-family：该属性应包含多个字体名称作为“回退”系统， 以确保浏览器/操作系统之间的最大兼容性。从所需的字体开始，以通用系列结束 （让 如果没有其他字体，浏览器在通用系列中选择类似的字体 可用）。字体名称应用逗号分隔。阅读更多关于 下一章中的回退字体。

为三个段落指定一些不同的字体：

.p1 {  font-family: "Times New Roman", Times, serif;}  

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

.p3 {  font-family: "Lucida Console", "Courier New", monospace;}

尝试一下 »