HTML + CSS 连载 | 07 - CSS 字体属性

一、CSS 字体属性

CSS 字体属性包含以下几个常用的属性，包含了：

font-size：设置文字的大小
font-family：设置字体形式
font-weight：设置字体的宽度
font-style：设置字体常规、斜体的显示形式
font-variant：设置小写字母的显示形式
line-height：设置一行文本的行高
font：缩写形式

font-size 属性

font-size 决定文字的大小，常用的设置为具体的数值+单位，如 100px，单位也可以使用 em，1em 表示 100%，2em 表示 200%。

也可以使用百分比的形式，百分比是基于父元素的 font-size 计算，比如 50% 就等于父元素 font-size 的一半。

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .home {
      font-size: 20px;
    }
    .box {
      /* em 表示父元素字体的尺寸 */
      font-size: 2em;
      /* 50%是相对于父元素的大小 */
      /* font-size: 50%; */
    }
  </style>
</head>
<body>
  <div class="home">
    <div class="box">我是div</div>
  </div>
  <div class="box1">我是div</div>
</body>
</html>

CSS 的某些样式是具有继承特性的，这其中就包括 font-size，子元素和继承父元素的 font-size，如果子元素没有单独设置就是用父元素的 font-size，否则就是用自己设置的 font-size。

如果没有父元素就是用浏览器默认的大小，即16px。

font-family 属性

font-family 属性用于设置文字的字体，可以设置一个或者多个字体，浏览器会在多个字体中选择第一个在该计算机上安装的字体，也可以通过 @font-face 指定的可以直接下载的字体。

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      /* 设置 div 元素的字体 */
      font-family: 'Courier New', Courier, monospace;
    }
  </style>
</head>
<body>
  <div>This is DIV element</div>
  <p>This is P element</p>
</body>
</html>

在浏览器上打开该页面，可以看到设置的字体样式生效了，与默认的字体样式是不一样的；

font-weight 属性

font-weight 用于设置文字的粗细或重量，常见的取值有 100|200|300|400 等，每一个数字都表示一个重量，除此也可以使用文字值，如 normal 相当于 400，bold 相当于 700。

strong、h1~h6 元素的 font-weight 值默认都是 bold。

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      font-weight: 400;
    }

    .box2 {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>我是h元素</h1>
  <div class="box1">我是div1元素</div>
  <div class="box2">我是div2元素</div> 
</body>
</html>

设置字体样式后，效果如下：

font-style 属性

font-style 属性用于设置文字的常规、斜体显示，该属性可以设置以下几个值：

normal：常规显示
italic：用字体的斜体显示
oblique：文本的倾斜显示

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      font-style: normal;
    }
    .box2 {
      font-style: italic;
    }
    .box3 {
      font-style: oblique;
    }
  </style>
</head>
<body>
  <div class="box1">我是box1</div>
  <div class="box2">我是box2</div>
  <div class="box3">我是box3</div>
</body>
</html>

em、i、cite、address、var 等元素的 font-style 属性默认值都是 italic 样式。

font-variant 属性

font-variant 属性可以影响小写字母的显示形式，单词 variant 就是变形的意思；该属性可以设置以下几个值：

normal：常规显示
small-caps：将小写字母替换为缩小过的大写字母

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      font-variant: small-caps;
    }
  </style>
</head>
<body>
  <div>Yankee Tango Zulu Vicktor</div>
</body>
</html>

设置 font-variant 形变样式后的效果如下：

line-height 属性

line-height 属性是 CSS 字体属性中一个非常常用的属性，用于设置文本的行高，行高可以理解为 一行文字所占据的高度

要注意 文本 所占据的高度与 line-height 即 一行 文字所占据的高度是两个不同的概念；

行高的存在有利于用户的阅读，尤其是大段的文字内容。

在基本了解了 line-height 行高之后，我们来看看 行高 的严格定义，即两行文字基线(baseline)之间的间距，而基线则指的是与小写字母x最底部对齐的线。

line-height 属性的属性值可以使用 px、em、% 或者是直接使用数字以及 normal 等；其中 em、% 以及具体的数字都是倍数的形式；px 和关键字则是具体的高度。

line-height 属性最常见的应用场景就是使文字在div内部居中，只需要设置 height 和 line-height 两个属性的值一致即可。

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      height: 100px;
      color: white;
    }
    .box {
      background-color: #f00;
      line-height: 100px;
    }
    .box2 {
      background-color: rebeccapurple;
    }
  </style>
</head>
<body>
  <div class="box">我是div</div>
  <div class="box2">我是div</div>
</body>
</html>

可以看到设置了 height 的值等于 line-height 之后，文本居中了。

二、font 缩写属性规则

font 是一个简写属性，可以用来作为 font-style、font-variant、font-weight、font-size、line-height 和 font-family 属性的简写。

font 简写属性的使用规则如下：

font-style、font-variant、font-weight 可以随意调换顺序，也可以省略
line-height 可以省略，如果不省略，必须要放在 font-size 后面
font-size、font-family 不介意随意调换顺序，不可以省略

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      /* 关于字体属性 */
      font-style: italic;
      font-variant: small-caps;
      font-weight: 700;
      font-size: 30px;
      line-height: 30px;
      font-family: sans-serif;
    }

    .box2 {
      /* font 简写形式 */
      font: italic small-caps 700 30px/30px small-caption;
    }
  </style>
</head>
<body>
  <div class="box1">我是div</div>
  <div class="box2">我是div</div>
</body>
</html>

实行简写形式与一个个定义字体属性的效果是一致的；

需要注意的是：

font 简写形式多个属性值之间使用空格，否则的话不生效
font-size 和 line-height 都设置时，必须是这种形式 font-size/line-height，否则不生效