CSS 字体系列

简介

CSS 字体系列定义了文本元素的字体和样式。它包括了以下属性：

• font-family：设置文本字体
• font-size：设置文本字号
• font-weight：设置文本粗细
• font-style：设置文本样式（斜体、倾斜等）
• font-variant：设置字体变体（小型大写字母等）
• font-stretch：设置字体拉伸（压缩或扩张）

CSS字体系列是设计师和前端开发者必须掌握的重要知识。

font-family

简介

font-family 属性用于指定文本的字体，多个字体名称用逗号分隔。如果字体名称中包含空格或是非 ASCII 字符，需要用引号将字体名称括起来。

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

• Arial 和 Helvetica 是字体名称。
• sans-serif 是通用字体系列名称，用于指定英文字体。

示例

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

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

p.monospace {
  font-family: "Courier New", Courier, monospace;
}

p.cursive {
  font-family: cursive;
}

p.fantasy {
  font-family: fantasy;
}

font-size

简介

font-size 属性用于设置文本字号。

p {
  font-size: 16px;
}

示例

p {
  font-size: 12px;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 20px;
}

h3 {
  font-size: 18px;
}

h4 {
  font-size: 16px;
}

h5 {
  font-size: 14px;
}

h6 {
  font-size: 12px;
}

font-weight

简介

font-weight 属性用于设置文本的粗细程度。可选值包括：

• normal：正常粗细程度
• bold：较粗的粗细程度
• bolder：更粗的粗细程度
• lighter：较细的粗细程度
• 100-900：设置粗细值（100为最细，900为最粗）

p {
  font-weight: normal;
}

h1 {
  font-weight: bold;
}

示例

p.normal {
  font-weight: normal;
}

p.bold {
  font-weight: bold;
}

p.bolder {
  font-weight: bolder;
}

p.lighter {
  font-weight: lighter;
}

p.thin {
  font-weight: 100;
}

p.bold-700 {
  font-weight: 700;
}

font-style

简介

font-style 属性用于设置文本的样式，可选值包括：

• normal：正常样式
• italic：斜体样式
• oblique：倾斜样式（有些字体没有斜体，会自动模拟）

p {
  font-style: normal;
}

i {
  font-style: italic;
}

示例

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

font-variant

简介

font-variant 属性用于设置字体变体，可选值包括：

• normal：正常字体
• small-caps：小型大写字母

p {
  font-variant: normal;
}

span {
  font-variant: small-caps;
}

示例

p.normal {
  font-variant: normal;
}

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

font-stretch

简介

font-stretch 属性用于设置字体拉伸效果，可选值包括：

• normal：正常拉伸效果
• ultra-condensed：超级压缩拉伸效果
• extra-condensed：额外压缩拉伸效果
• condensed：压缩拉伸效果
• semi-condensed：半压缩拉伸效果
• semi-expanded：半扩展拉伸效果
• expanded：扩展拉伸效果
• extra-expanded：额外扩展拉伸效果
• ultra-expanded：超级扩展拉伸效果

p {
  font-stretch: normal;
}

h1 {
  font-stretch: expanded;
}

示例

p.normal {
  font-stretch: normal;
}

p.ultra-condensed {
  font-stretch: ultra-condensed;
}

p.condensed {
  font-stretch: condensed;
}

p.expanded {
  font-stretch: expanded;
}

p.ultra-expanded {
  font-stretch: ultra-expanded;
}

以上就是 CSS 字体系列的主要内容。通过设置这些属性，可以实现丰富多彩的文本效果。