# CSS3教程 - 10 字体

下面来介绍一下字体相关的样式。

# 10.1 字体颜色

color 属性用来设置 前景色 (foreground color)，通常指 文本的颜色。（但是前景色不仅仅限于字体颜色）

举个栗子：

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {  /* 设置p标签下的样式 */
        color: red;  /* 设置字体颜色 */
      }
    </style>
  </head>

  <body>
    <p>
      Welcome to Foooor, http://www.foooor.com <br/>
      Hello everyone, Are you OK?
    </p>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

上面通过 color 属性设置字体颜色。

显示如下：

# 10.2 字体大小

font-size 属性可以设置字体大小。

举个栗子：

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        color: red;  /* 字体颜色 */
        font-size: 24px;  /* 字体大小 */
      }
    </style>
  </head>

  <body>
    <p>
      Welcome to Foooor, http://www.foooor.com <br/>
      Hello everyone, Are you OK?
    </p>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

显示如下：

前面在介绍单位的时候，除了像素还有 em 和 rem 两个单位：

em ：当前元素的一个 font-size；
rem ：相当于根元素的一个 font-size；

一般浏览器的字体默认大小为 16px，也可以使用上面两种方式设置字体大小：

p {
  color: red;  /* 字体颜色 */
  font-size: 1.5em;  /* 1.5倍默认字体大小，可以是小数 */
}

1
2
3
4

# 10.3 字体

font-family 属性用于设置字体和字体族，是推荐浏览器使用哪种字体，如果用户电脑上没有这种字体，则浏览器会自己决定使用哪种字体。

# 1 设置字体

举个栗子：

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        color: red;  /* 字体颜色 */
        font-family: '华文宋体';  /* 设置字体 */
      }
    </style>
  </head>

  <body>
    <p>
      Welcome to Foooor, http://www.foooor.com <br/>
      Hello everyone, Are you OK?
    </p>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

上面通过 font-family 设置了字体为 华文宋体 ，一般在 Windows 系统上，默认字体是 微软雅黑 ，如果设置为 微软雅黑 应该是没有变化。

显示如下：

我们在设置字体的时候，是可以设置多个的。

举个栗子：

p {
  color: red;  
  font-family: '华文宋体', '华文彩云', '华文琥珀';  /* 设置字体 */
}

1
2
3
4

上面设置了三种字体，用户在访问网页的时候，浏览器会优先匹配并使用前面的字体，如果用户的电脑上没有安装指定的字体，那么会依次匹配后面的字体，如果都没有匹配到，那么使用默认的字体。

我们上面指定字体名称的时候，使用的是汉字，建议使用英文名称，避免浏览器存在兼容性问题，如果要知道字体的英文名称，可以搜索引擎搜索一下（例如Bing一下）：

p {
  color: red;  
  font-family: 'STSong', 'STCaiyun', 'STHupo';  /* 设置字体 */
}

1
2
3
4

字体的名称中如果包含空格，必须使用引号括起来，否则可以不使用引号。

# 2 设置字体系列

font-family 除了可以设置指定的具体的某一个字体，还可以设置字体类型。

字体是可以分不同的类型的，常用的有一下几种：

serif ：衬线字体，字形端点有装饰线条，适合印刷。如下图：
sans-serif ：非衬线字体，字形端点无装饰线条，更现代、简洁。如下图：
monospace ：等宽字体，每个字母，不管大写小写，占用相同宽度，适合代码显示。如下图：
cursive ：手写或花体字体，模拟手写风格。（下面用的少就不展示了）
fantasy ：装饰性字体，通常用于标题，效果独特。

serif 、sans-serif 、monospace 是字体的类型，不是一个固定的字体，例如微软雅黑、华文彩云都是非衬线字体。我们一般在指定字体的时候，会在前面指定具体字体，在最后面指定使用的字体类型，这样如果用户电脑上没有安装指定的字体，那么推荐浏览器使用哪种字体类型：

p {
  color: red;  
  font-family: 'STSong', 'STCaiyun', 'STHupo', sans-serif;  /* 设置字体 */
}

1
2
3
4

字体的名称中如果包含空格，必须使用引号括起来，否则可以不使用引号。通用字体系列如 serif、sans-serif、monospace 不应该使用引号。引号通常只用于具体字体名称。
上面指定了多种字体和字体类型，用户浏览网页，会在用户本地依次查询指定的字体，如果前面的字体都没有找到，最后会由浏览器自己选择一种 sans-serif 类型的字体。

# 3 自定义字体

我们在设置字体的时候，尽量设置一些比较常用的字体，大家的电脑里都有的。

如果你非要设置一个好看，但是不常用的字体，又希望大家能看到这么牛逼效果的字体，那么可以在项目中提供字体文件。这样用户在访问你网站的时候，会下载字体文件，从而实现字体的渲染。

首先你需要有一个你认为效果酷炫吊炸天的字体的字体文件，一般是 .ttf 结尾的文件，例如我在网上下载了一个字体文件（搜索字体下载），把它放到项目里（位置自己定义）：

然后在样式中使用 @font-face ，@font-face 可以将服务器中的字体直接提供给用户去使用。

举个栗子：

<!DOCTYPE html>
<html>
  <head>
    <style>

      /* 服务器提供字体 */
      @font-face {
        font-family: 'foooor-font';  /* 给字体起个名字，自定义 */
        src: url(./font/LeishenGBT-Flash-Bold.ttf);  /* 字体文件路径 */
      }

      p {
        color: red;
        font-size: 50px;
        font-family: 'foooor-font', '华文彩云', sans-serif;  /* 设置使用的字体 */
      }
    </style>
  </head>

  <body>
    <p>
      Hello For技术栈，http://www.foooor.com <br/>
    </p>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在上面的代码中首先使用 @font-face 定义字体，指定一个名称，后面使用的时候，就使用这个名称；并指定字体文件的路径；
然后使用字体，指定 @font-face 中定义的名称，就可以了。

显示效果：

吊！确实有点炸天...

自定义字体文件有多种格式，有时候可能存在浏览器不兼容的问题，我们可以设置多个字体文件进行匹配：

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
    	 url('myfont.ttf') format('truetype');
}

1
2
3
4
5
6

format 指定字体文件的格式，一般不写也可以，浏览器会自己识别。

自定义字体有几个问题需要注意一下：

版权问题，很多字体是有版权的，你商用需要别人授权，不然法院见；
在网页加载的时候，需要从服务器下载字体文件，如果网速比较慢，一开始可能显示默认的字体，下载完成才显示吊炸天的字体，会出现一瞬间的跳变。

# 10.4 字体风格

font-style 用于设置字体样式，如斜体。

font-style 常用值：normal、italic、oblique

normal：正常的字体样式，不倾斜；
italic ：使用字体设计者设计的斜体版本，如果该字体没有提供斜体版本，那么浏览器会根据正常字体自动生成一个斜体效果；（斜体推荐使用这个）
oblique ：直接根据正常字体生成一个斜体效果；

举个栗子：

p {
  color: red;
  font-style: italic;  /* 设置斜体 */
}

1
2
3
4

显示效果：

# 10.5 字体粗细

font-weight 属性用于设置字体的粗细。

常见的值有：normal、bold、lighter、bolder，或者也可以使用数字值（100 到 900，递增值为100）

lighter ：细的字体；
normal ：默认粗细；
bold ：加粗的字体，等同于 700；
bolder ：更粗的字体；

举个栗子：

p {
  color: red;
  font-weight: bold;  /* 设置加粗 */
}

1
2
3
4

显示效果：

很多字体并没有设计支持很多粗细的样式，例如微软雅黑字体，只支持三种：细的字体、默认粗细的字体、加粗字体。如果设置为 bolder 和 bold 效果是一样的。同样设置为 100/200/300效果也是一样的，等同于 lighter。所以设置字体的粗细，还需要看字体的支持情况。

# 10.6 图标字体

什么是图标字体？

在网页中经常需要使用一些图标，一般来说通过图片来当图标，但是图片可能比较大，另外放大图标的话，可能就比较模糊；还没发调整图标的颜色。

而图标字体就是将图标变成和文字一样，这个时候的图标你可以认为它就是一个文字，因为文字是矢量的，也就是你将文字不管设置成多大，文字都不会模糊。图标字体也一样，你还可以通过 color、font-size 等样式属性控制图标的颜色、大小和阴影。

下面讲解一下如何使用图标字体。

# 10.6.1 使用fontawesome

首先需要制作图标字体，但这不是我们的工作，我们可以通过一些制作的网站来制作或下载。

举个栗子：

百度一下：fontawesome，fontawesome 是国外的一个字体库，官方网站：https://fontawesome.com/ (opens new window)

登录网站后：

然后找到下载：

然后选择网页的免费版本：

下载完成，解压，里面有很多文件，直接将 css 和 webfonts 复制到项目中， css 和 webfonts 需要在项目的同一个目录下，然后就可以使用了，里面包含了很多的字体图标。

# 1 通过样式类使用

举个栗子：

<!DOCTYPE html>
<html>
  <head>
    <!-- 引入图标字体 -->
    <link rel="stylesheet" href="./fontawesome/css/all.min.css" />
    <style>
      p {
        font-size: 40px;
        color: red;
      }
    </style>
  </head>

  <body>
    <p>
      <i class="fas fa-user"></i> 
      <span class="fas fa-bell"></span>
    </p>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

首先引入样式文件；
使用 <i> 或 <span> 标签，添加指定的样式类就可以了，可以像调节字体一样设置样式；
fas 和 fab 相关的类是免费的；

显示如下：

# 2 通过伪元素使用

在使用的时候，还可以通过伪元素来设置。

举个栗子：

<!DOCTYPE html>
<html>
  <head>
    <!-- 引入图标字体 -->
    <link rel="stylesheet" href="./fontawesome/css/all.min.css" />
    <style>
      span::before {
        content: "\e4cf";
        /* font-family: 'Font Awesome 5 Brands'; */
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        margin-right: 10px;
        color: red;
      }
    </style>
  </head>

  <body>
    <p>
      <span>Hello</span> <br/>
      <span>www.foooor.com</span>
    </p>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

上面给所有的 span 的伪类都设置了图标，\e4cf 这个是图标的编号；
还需要设置 font-family 和 font-weight 属性，否则显示不出来。

可以在 all.css 中查找图标的编号：

查找字体族：

fab 对应 font-family: 'Font Awesome 6 Brands';

fas 对应 font-family: 'Font Awesome 6 Free'; font-weight：900; 显示不出来挨个可以试试。

# 3 通过实体设置

还可以通过实体来使用图标字体：&#x图标编码;

举个栗子：

<!DOCTYPE html>
<html>
  <head>
    <!-- 引入图标字体 -->
    <link rel="stylesheet" href="./fontawesome/css/all.min.css" />
    <style>
      span {
        color: red;
        font-size: 30px;
      }
    </style>
  </head>

  <body>
    <p>
      <span class="fas">&#xe4cf;</span>
    </p>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

首先在元素上添加 class，然后通过 &#编号; 来实现。
然后可以设置 span 的样式来调整样式；

显示如下：

# 10.6.2 使用iconfont

iconfont 是阿里巴巴提供的一个图标库，官方网站：https://www.iconfont.cn/ (opens new window)。

但是版权有点模横两可，也没说可以免费使用，如果需要商用，最好联系作者。

# 1 首先登录网站

访问 https://www.iconfont.cn/ (opens new window)，注册一个账号并登录。

# 2 选择图标

然后搜索图标，选择自己想要集成到自己项目的字体图标。注意选择图标要选择单色的，不要选择带颜色的，字体图标都是通过 CSS 来设置样式的。

你可以选择将很多的图标添加到购物车。图标都是很多作者设计的，他们都是设计一套的，你也可以将一套图标都添加到购物车。

总之添加图标到购物车。

注意：这里不是下载，这里当然也可以下载单个图标，如果下载图标进行使用，就是和普通的图片图标是一样的。

# 3 添加到项目

点击右上角的购物车图标，将选择的图标添加到项目。

如果没有项目，会提示创建。

# 4 下载资源

添加到项目中后，在我的项目中可以看到选择的图标。

然后将项目的图标下载至本地，下载完成，并解压，可以看到很多的文件：

# 5 使用

使用方法和前面使用 fontawesome 使用方式类似，也有三种方式。

打开下载文件中的 demo_index.html ，里面也有使用方法：

演示一下如何使用：

首先将除了 demo_index.html 和 demo.css 之外的文件都拷贝到项目下，位置自己定义：

然后就可以使用了：

方式一：使用样式类设置

<!DOCTYPE html>
<html>
  <head>
    <!-- 引入图标字体 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <style>
      span.iconfont {
        color: red;
        font-size: 40px;
      }
    </style>
  </head>

  <body>
    <p>
      <span class="iconfont icon-dianhua"></span>
    </p>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

上面通过类来设置，需要设置 iconfont 类和图标对应的类。
上面通过 span.iconfont 选择器选择图标进行设置，如果单独通过 span 标签选择器来选择，优先级比较低，会导致设置图标大小失效。

图标的样式类在 demo_index.html 有说明：

显示效果如下：

方式二：使用实体设置

<!DOCTYPE html>
<html>
  <head>
    <!-- 引入图标字体 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <style>
      span.iconfont {
        color: red;
        font-size: 40px;
      }
    </style>
  </head>

  <body>
    <p>
      <span class="iconfont">&#xe649;</span>
    </p>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

实体的代码在 demo_index.html 中有说明。

方式三：使用伪元素设置

<!DOCTYPE html>
<html>
  <head>
    <!-- 引入图标字体 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <style>
      span::before {
        content: '\e649';
        color: red;
        font-size: 40px;
        font-family: 'iconfont';
      }
    </style>
  </head>

  <body>
    <p>
      <span></span>
    </p>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

上面对 <span> 标签设置伪元素，content 为图标的代码，代码和上面实体使用方式的代码对应的。
font-family 值为 iconfont 。

# 10.7 行高

什么是行高，看一下下面的图：

字体在设计的时候，每个字是设计在一个框中的，也就是字体框，如上图。我们在设置 font-size 的时候，设置的是字体框的高度。每一行的行高是比字体框大的，字体框和行高之前有一定的间距，如上图。我们可以粗略的认为上面的间距等于下面的间距，文字是在行中居中的。通过上图可以看到行与行之间的距离，也就是 行间距 = 行高 - 字体大小 。

行高可以通过 line-height 来设置，有如下设置方法：

line-height: 40px;  /* 设置行高为40像素 */
line-height: 1.5;   /* 设置行高为字体大小的1.5倍 */
line-height: 150%;  /* 设置行高为字体大小的150%，也就是1.5倍 */
line-height: normal;  /* 默认值 */

1
2
3
4

默认值。通常为 1.2 到 1.5 之间，取决于用户代理（浏览器）的默认设置和字体。

举个栗子：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        line-height: 1;
        border: 1px red solid;
      }
    </style>
  </head>

  <body>
    <div>Hello For技术栈，www.fooooor.com</div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

上面设置了 div 行高为字体的1倍。
给 div 设置了一个 boder；

显示如下：

如果想要单行文字在 div 中垂直居中，只需要设置行高和 div 的高度一样就可以了：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        height: 200px;
        line-height: 200px;
        border: 1px red solid;
      }
    </style>
  </head>

  <body>
    <div>Hello For技术栈，www.fooooor.com</div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

上面设置 div 高度为200，行高也是200；

显示如下：

上面说了 行间距 = 行高 - 字体大小 ，所以如果要调整行间距，可以通过行高和字体大小来调整。

# 10.8 字体的复合属性

前面设置字体样式，都是通过一个一个属性设置的。CSS 还提供了一个 font 属性，可以设置字体相关的所有属性：

举个栗子：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        line-height: 100px;
        font: bold italic 40px '华文彩云', '华文琥珀', sans-serif;
      }
    </style>
  </head>

  <body>
    <div>Hello For技术栈，www.fooooor.com</div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这里需要注意，字体大小和字体族必须设置，字体大小必须放在倒数第二个，字体族必须放在倒数第一个；其他的属性必须放在前面没有顺序要求。
另外需要注意，一旦使用 font 属性会覆盖前面所有单独设置的字体属性。因为 font 属性会为所有字体属性提供默认值，上面在 font 属性中没有设置 line-height，是会提供默认行高的，所以会覆盖上面单个属性 line-height: 100px 设置的行高，你可以将单个属性写在 font 属性后面就可以了。

显示如下：

使用 font 复合属性设置行高可以像下面这样设置：

font: bold italic 40px/2 '华文彩云', '华文琥珀', sans-serif;  /* 40px后面的2表示行高为字体的两倍 */
font: bold italic 40px/100px '华文彩云', '华文琥珀', sans-serif;  /* 100px表示行高为100像素 */

1
2

# 10.9 文本对齐方式

# 1 水平对齐

text-align 属性用于文本的水平对齐，取值有：

left ：左侧对齐
right ：右侧对齐
center ：居中对齐
justify ：两端对齐

举个栗子：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        font-size: 16px;
        text-align: left;
      }
    </style>
  </head>

  <body>
    <div>
      We accept the choice the country made. I've said many time you can't love your country only when you win.
      You can't love you neighbor only when you agree. Setbacks are unavoidable but giving up is unforgivable.
    </div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

上面设置了文字水平对齐方式为居左对齐，默认就是居左。

显示如下：

right 右侧对齐，显示如下：

center 居中对齐，显示如下：

justify 两端对齐，显示如下：

# 2 垂直对齐

vertical-align 设置元素在单行文本上的垂直对齐的方式，取值有：

baseline ：基线对齐
top ：顶部对齐
bottom ：底部对齐
middle ：居中对齐

举个栗子：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        font-size: 60px;
        border: 1px red solid;
      }

      .span1 {
        vertical-align: baseline;  /* 基线对齐 */
        font-size: 20px;
        border: 1px red solid;
      }
      .span2 {
        vertical-align: top;   /* 顶部对齐 */
        font-size: 20px;
        border: 1px red solid;
      }
      .span3 {
        vertical-align: bottom;   /* 底部对齐 */
        font-size: 20px;
        border: 1px red solid;
      }
      .span4 {
        vertical-align: middle;   /* 居中对齐 */
        font-size: 20px;
        border: 1px red solid;
      }
    </style>
  </head>

  <body>
    <div>
      www.foooor.com
      <span class="span1">xyz</span>
      <span class="span2">xyz</span>
      <span class="span3">xyz</span>
      <span class="span4">xyz</span>
    </div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

上面用 4 个 span，分别设置了不同的对齐方式。

显示如下：

居中对齐看上去有点迷惑啊，这也也不居中啊，这里的 居中对齐 = 基线高度 + x 的高度 / 2 ，也就是和小写的 x 的中心对齐。

vertical-align 还可以设置 px 值设置垂直对齐方式：

vertical-align: 0px;  /* 0表示与基线对齐 */
vertical-align: 10px;  /* 10px表示相对于基线，向上偏移10像素 */
vertical-align: 10px;  /* -10px表示相对于基线，向下偏移10像素 */

1
2
3

举个栗子：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        font-size: 60px;
        border: 1px red solid;
      }

      .span1 {
        vertical-align: 0px;  /* 基线对齐 */
        font-size: 20px;
        border: 1px red solid;
      }
      .span2 {
        vertical-align: 30px;   /* 顶部对齐 */
        font-size: 20px;
        border: 1px red solid;
      }
      .span3 {
        vertical-align: -10px;   /* 底部对齐 */
        font-size: 20px;
        border: 1px red solid;
      }
    </style>
  </head>

  <body>
    <div>
      www.foooor.com, x
      <span class="span1">xyz</span>
      <span class="span2">xyz</span>
      <span class="span3">xyz</span>
    </div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

上面设置了 3 个 span 的 vertical-align 。

显示如下：

# 3 图片的垂直对齐问题

下面在 div 中添加一张图片：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: 1px red solid;
      }

      img {
        height: 120px;
      }
    </style>
  </head>

  <body>
    <div>
      <img src="./image/css3.webp" />
    </div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

显示如下：

可以看到图片底部有一定缝隙，这是因为图片也是以基线进行对齐的。

所以只需要将图片的 vertical-align属性值设置为不是基线就可以了：

img {
  height: 120px;
  vertical-align: top;  /* bottom、middle都可以 */
}

1
2
3
4

修改后空隙没有了，显示如下：

需要注意：vertical-align 是设置单行文本上的对齐方式，不是元素在父元素中的垂直对齐方式。另外 vertical-align 不能控制块元素的对齐方式。

← 09-定位2 11-背景 →