CSS-字体属性详解CSS-字体属性详解：详细介绍了font-size、font-family、font-weight、

1. font-size

font-size决定文字的大小（浏览器默认字体是16px）
常用的设置
- 具体数值+单位
- 比如100px
- 也可以使用em单位(父元素的字体的尺寸)：1em代表100%，2em代表200%，0.5em代表50%
百分比（相对于父元素的字体大小）
- 基于父元素的font-size计算，比如50%表示等于父元素font-size的一半

2. font-family

font-family用于设置文字的字体名称
- 可以设置1个或者多个字体名称;
- 浏览器会选择列表中第一个该计算机上有安装的字体（读取操作系统）;
- 或者是通过 @font-face 指定的可以直接下载的字体。
```
/* 一般只设置一次 */
body {
  font-family: "Microsoft YaHei", "Heiti SC", tahoma, arial, "Hiragino Sans GB", "\5B8B\4F53", sans-serif;
}
```
多个单词或者特殊字符加引号

3. font-weight

font-weight用于设置文字的粗细（重量）
常见的取值:
- 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：每一个数字表示一个重量
- normal：等于400
- bold：等于700
strong、b、h1~h6等标签的font-weight默认就是bold

4. font-style

font-style用于设置文字的常规、斜体显示
- normal：常规显示
- italic(斜体)：用字体的斜体显示(通常会有专门的字体)
- oblique(倾斜)：文本倾斜显示(仅仅是让文字倾斜)
```
/* 斜体: 字体本身支持斜体时, 显示的斜体 */
font-style: italic;
/* 倾斜: 让文本进行倾斜 */
font-style: oblique;
```
em、i、cite、address、var、dfn等元素的font-style默认就是italic

5. font-varient

font-variant可以影响小写字母的显示形式
- variant是变形的意思

可以设置的值如下

normal：常规显示
small-caps：小写字母以大写显示, 但是高度保持小写的高度

<style>
.box {
  font-variant: small-caps;
}
</style>

<div class="box">A Great Man Is Always Willing To Be Little.</div>

6. line-height

line-height用于设置文本的行高
- 行高可以先简单理解为一行文字所占据的高度

行高的严格定义是：两行文字基线（baseline） 之间的间距
基线（baseline）：与小写字母x最底部对齐的线

行高 - 文本高度 = 行距

取值(参考官网)
- normal,取决于用户端。桌面浏览器（包括Firefox）使用默认值，约为1.2，这取决于元素的 font-family。
- <数字>,该属性的应用值是这个无单位数字<数字>乘以该元素的字体大小。计算值与指定值相同。大多数情况下，这是设置line-height的推荐方法，不会在继承时产生不确定的结果。
- <长度>,指定<长度>用于计算 line box 的高度。以 em 为单位的值可能会产生不确定的结果。
- <百分比>,与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小
注意区分height和line-height的区别
- height：元素的整体高度
- line-height：元素中每一行文字所占据的高度

应用实例：假设div中只有一行文字，如何让这行文字在div内部垂直居中

让line-height等同于height

<style>
 .box {
   height: 100px;
   background-color: skyblue;

   line-height: 100px;
 }
</style>
<div class="box">我是div内部的一行文字</div>

文本居中.png

补充：line-height对于行内非替换元素有特殊效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 500px;
      height: 100px;
      background-color: #ff0;
    }

    .inline {
      background-color: #f90;
      text-indent: 2em;
      line-height: 2;
    }

    .content {
      background-color: skyblue;
      text-indent: 2em;
      line-height: 2;
    }
  </style>
</head>
<body>
  <div class="container">
    <span class="inline">风雨过后，眼前会是鸥翔鱼游的天水一色。</span>
    <p class="content">风雨过后，眼前会是鸥翔鱼游的天水一色。</p>
  </div>
</body>
</html>

7. font缩写属性

font是一个缩写属性
- font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写;
- font-style font-variant font-weight font-size/line-height font-family

规则:

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

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

      /* 缩写属性 */
      /* 1.5的行高是相对于font-size的 */
      font: italic small-caps 700 30px/1.5 serif;
    }
  </style>
</head>
<body>

  <div class="box">我是div元素</div>

</body>
</html>

效果