CSS 字体


目录

    显示目录


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


字体选择很重要

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

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

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


通用字体系列

CSS 中有五种通用字体系列:

  1. 衬线字体每个字母的边缘都有一个小笔画。它们营造出一种正式和优雅的感觉。

  2. Sans-serif 字体具有干净的线条(没有附加小笔画)。它们营造出现代简约的外观。

  3. 等宽字体字体 - 这里所有字母都具有相同的固定宽度。它们营造出机械的外观。

  4. 草书字体模仿人类手写体。

  5. 幻想字体是装饰性/有趣的字体。

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


Serif 和 Sans-serif 字体之间的区别

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


一些字体示例

Generic Font Family Examples of Font Names
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;
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
  font-family: "Times New Roman", Times, serif;
}

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

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>

</body>
</html>