CSS font-family 属性

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

font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。请以您需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔。

注释：如果字体名称不止一个单词，则必须用引号引起来，例如："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;
}

CSS 字体样式

字体样式

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

此属性可设置三个值：

              normal - 文字正常显示

              italic - 文本以斜体显示

              oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

实例

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

CSS 字体大小

字体大小

font-size 属性设置文本的大小。

在网页设计中，能够管理文本大小很重要。但是，不应使用调整字体大小来使段落看起来像标题，或是使标题看起来像段落。

请始终使用正确的 HTML 标签，例如 <h1> - <h6> 用于标题，而 <p> 仅用于段落。

font-size 值可以是绝对或相对大小。

绝对尺寸：

           将文本设置为指定大小

           不允许用户在所有浏览器中更改文本大小（可访问性不佳）

           当输出的物理尺寸已知时，绝对尺寸很有用

相对尺寸：

           设置相对于周围元素的大小

           允许用户在浏览器中更改文本大小

注释：如果您没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）。

以像素设置字体大小

使用像素设置文本大小可以完全控制文本大小：

实例

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

CSS 字体属性

字体属性

为了缩短代码，也可以在一个属性中指定所有单个字体属性。

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

               font-style

               font-variant

               font-weight

               font-size/line-height

               font-family

实例

使用简写声明设置一些字体属性：

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

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

CSS 文字间距

文字缩进

text-indent 属性用于指定文本第一行的缩进：

实例

p {
  text-indent: 50px;
}

CSS 文本阴影

文本阴影

text-shadow 属性为文本添加阴影。

最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）：

实例

h1 {
  text-shadow: 2px 2px;
}