CSS 字体

合适的字体、字号以及文本的颜色能极大的提高网站的体验，通过 CSS 我们可以轻松的控制网页的字体、字号。

合适的字体、字号以及文本的颜色能极大的提高网站的体验，通过 CSS 我们可以轻松的控制网页的字体、字号。

通用字体系列

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

  1. **衬线(Serif)**字体在每个字母的边缘都有一个小笔画，营造出正式和优雅的感觉。
  2. **无衬线(Sans-serif)**字体有干净的线条（没有附加的小笔画），营造出现代简约的外观。
  3. **等宽(Monospace)**字体 - 这里所有的字母都具有相同的固定宽度，适合展示代码片段。
  4. **草书(Cursive)**字体模仿人类的笔迹。
  5. **幻想(Fantasy)**字体是装饰性/俏皮的字体。

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

衬线(Serif) 和 无衬线(Sans-serif) 字体之间的区别

衬线与无衬线

!! 注意： 在计算机屏幕上，无衬线(Sans-serif)字体比有衬线(Serif)字体更容易阅读。

一些字体示例

通用字体系列 字体
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 属性来指定文本的字体。

font-family 属性应包含多个字体名称作为“后备”字体，以确保浏览器/操作系统之间的最大兼容性。从您想要的字体开始，并以通用系列结束，字体名称之间以英文逗号分隔。

! 注意：如果字体名称不止一个单词，则必须用引号引起来，例如："Times New Roman" 或者 'Times New Roman'。

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

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

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

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

字体样式

font-style 属性主要用于指定斜体文本。

此属性具有三个值：

  • normal - 文本正常显示
  • italic - 文本以斜体显示
  • oblique - 文本“倾斜”（倾斜与斜体非常相似，但支持较少）
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

字体粗细

font-weight 属性指定字体的粗细。

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

字体变体

font-variant 属性指定文本是否应以小号大写字体显示。小号大写字体就是比正常的大写字母的字号更小。

p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}

字体大小

font-size 属性设置文本字体大小，字体大小的值可以采用绝对尺寸或相对尺寸。

字体大小的单位可到 CSS 单位章节查看更多的信息。

! 注意： 浏览器的默认字体大小为 16px (16px=1em)。

使用绝对尺寸设置字体大小

用像素设置字体大小

h1 {
  font-size: 48px;
}

使用相对尺寸设置字体大小

有两个常用的相对单位， em 和 rem：

  • em： 相对于父元素的字体大小，比如父元素当前字体大小 10px, 那么 2em = 20px

  • rem： 先对于根元素的字体大小，比如根元素的字体大小为 10px，那么 2rem = 20px。 rem 尺寸不受父元素的影响。

下面的例子展示 em 和 rem 的不同：

<!DOCTYPE html>
<html>
  <head>
    <style>
      html {
        font-size: 16px;
      }
      div {
        font-size: 32px;
      }
      p.rem {
        font-size: 2rem;
      }
      p.em {
        font-size: 2em;
      }
    </style>
  </head>
  <body>
    <div>
      <p class="rem">Hello World!</p>
      <p class="em">Hello World!</p>
    </div>
  </body>
</html>

相对视口宽度设置大小

vw 也是一个相对尺寸单位，相对于的是“视口宽度”， 1vm = 视口宽度的 1%。

字体大小随窗口宽度变化：

<h1 style="**font-size:10vw**">Hello World</h1>

CSS 字体属性简写

font 属性是以下各项的简写属性：

  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family

注：font-size 和 font-family 值是必需的。如果缺少其他值之一，则使用它们的默认值。

用于 font 在一个声明中设置多个字体属性：

p.a {
  font: 20px Arial, sans-serif;
}

p.b {
  font: italic small-caps bold 12px/30px Georgia, serif;
}

安全字体

Web 安全字体是在所有浏览器和设备上普遍安装的字体。

因为网页的受众很大，浏览器的类型和设备的类型也很多，总是有可能在某个设备上找不到网页指定的字体。

后备字体是一种安全策略。通过指定后备字体，浏览器在找不到首选字体的时候，会尝试后备字体。

font-family 中指定字体的时候，多个字体之间使用英文逗号 , 间隔。第二个字体及之后的字体都作为第一个字体的后背字体。

p {
  font-family: Tahoma, Verdana, sans-serif;
}

以下列表字体几乎在所有的设备上可用，是 HTML 和 CSS 的最佳网络安全字体：

  • Arial（无衬线字体）
  • Verdana（无衬线字体）
  • Helvetica（无衬线字体）
  • Tahoma（无衬线字体）
  • Trebuchet MS（无衬线字体）
  • Times New Roman（衬线字体）
  • Georgia（衬线字体）
  • Garamond（衬线字体）
  • Courier New（等宽字体）
  • Brush Script MT（草书字体）

常用后备字体

以下是 5 个通用字体系列的一些常用的回退字体：

  • 衬线(Serif)
    • "Times New Roman", Times, serif
    • Georgia, serif
    • Garamond, serif
  • 无衬线(Sans-serif)
    • Arial, Helvetica, sans-serif
    • Tahoma, Verdana, sans-serif
    • "Trebuchet MS", Helvetica, sans-serif
    • Georgia, Verdana, sans-serif
  • 等宽(Monospace)： "Courier New", Courier, monospace
  • 草书(Cursive)： "Brush Script MT", cursive
  • 幻想(Fantasy)： Copperplate, Papyrus, fantasy

所有 CSS 字体属性

字体属性 说明
font 字体所有属性的简写
font-family 指定文本字体
font-size 指定文本字号大小
font-style 指定文本样式
font-variant 指示字体是否以小号的大写字母展示
font-weight 指示字体的粗细
CSS 文本 CSS 链接