字体样式

font-size 字号大小
font-family 字体
CSS Unicode 字体
font-weight 字体粗细
font-style 字体风格
font 综合设置字体样式（重要）

`font-size` 字号大小

相对的长度单位

单位	说明
em	相对于当前对象内文本的字体尺寸
px	像素，最常用，并且也推荐使用

绝对长度单位

单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

尽量使用偶数字号，ie6 等老版本的浏览器使用奇数字号会有问题

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>V5-字体大小</title>
    <style>
      h2 {
        font-size: 20px;
        color: pink;
      }

      h4 {
        font-size: 20px;
        color: orange;
      }

      p {
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <h2>企业简介</h2>
    <h4>公司由来</h4>
    <p>公司由来的一堆介绍文本</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
26
27

代码显示结果如下：

`font-family` 字体

字体基本介绍

网页中常用的字体有：微软雅黑、宋体、黑体等

可以同时指定多个字体，多个字体之间使用英文逗号 , 隔开，如果浏览器不支持前面的字体，会自动尝试后面的字体，直到找到合适的字体。
字体为汉字时需要加上英文双引号" ", 字体为英文时不需要引号。
设置字体时，英文字体通常在中文字体之前。
如果字体名称中有空格、#、$ 等符号时，该字体必须使用英文双引号括起来，比如 font-family:"Times New Roman"
尽量使用系统默认字体（宋体和微软雅黑），保证在任何用户的浏览器中都可以正确显示。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>V6-字体</title>
    <style>
      h2 {
        font-size: 20px;
        color: pink;
        font-family: sans-serif, 'Microsoft YaHei', '宋体';
      }
    </style>
  </head>
  <body>
    <h2>企业简介</h2>
  </body>
</html>

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

Unicode 字体

尽量使用 Unicode 字体，兼容性更好；
而且必须要有微软雅黑和宋体，因为大部分系统都支持这两种。

部分浏览器中直接使用字体的中文名称可能会有编码问题，为了避免这个情况，我们除了可以使用字体的英文名称以外，还可以使用该字体的 Unicode 编码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>V7-字体</title>
    <style>
      h4 {
        font-size: 20px;
        color: orange;
        font-family: '\5B8B\4F53', serif;
      }
    </style>
  </head>
  <body>
    <h2>企业简介</h2>
    <h4>公司由来</h4>
  </body>
</html>

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

CSS 的注释

CSS 的注释格式为：/* 注释内容*/

`font-weight` 字体粗细

字体加粗除了使用  和  标签之外，也可以使用 CSS 样式来实现。

font-weight 用于定义字体的粗细，属性值有:

normal 、
bold、
bolder、
lighter
或者 100-900 (需要是 100 的整数倍)，通常数字 400 等价于 normal , 700 等价于 bold

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>V9-字体大小</title>
    <style>
      p {
        font-weight: bold;
      }

      strong {
        /*将 strong 修改为普通粗细*/
        font-weight: normal;
      }

      b {
        /*将 b 修改为普通粗细*/
        font-weight: 400;
      }
    </style>
  </head>
  <body>
    <strong>企业简介</strong>
    <br />
    <b>公司由来</b>
    <p>公司由来的一堆介绍文本</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
26
27
28

显示效果如下：

`font-style` 字体风格

字体的倾斜可以用 、 之外，也可以使用 CSS 来实现

font-style 用于定义字体风格，如：斜体、倾斜、或正常字体，其属性值如下：

normal 默认值，标准字体样式
italic 斜体
oblique 倾斜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V9-字体大小</title>
    <style>
        p {
            /*设置倾斜字体*/
            font-style: italic;
        }

        em {
            /*将斜体变为正常字体*/
            font-style: normal;
        }

    </style>
</head>
<body>
</p><i>公司简介</i></p>
<p><em>公司由来</em></p>
<p>公司由来的一堆介绍文本</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` 字体综合设定

font 用于对字体样式进行综合设置，其基本语法如下：

选择器{ font: font-style  font-weight  font-size/line-height font-family;}

使用 font 时，必须按上面语法格式中的顺序书写，不能更换顺序，各属性之间以空格分开
不需要设置的属性可以省略，但 font-size font-family 必须要有，否则 font 属性无效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V9-字体大小</title>
    <style>
        p {
            /* font 中的固定顺序为：font-style  font-weight  字号  字体;
                多属性之间使用空格分开，顺序不能调整；不需要的内容可以省略，但
                字号和字体必须要有
            */
            font: italic normal 14px "Microsoft YaHei";
            color: red;
        }

        i {
            font: 16px "Microsoft YaHei";
            color: yellowgreen;
        }

    </style>
</head>
<body>
</p><i>公司简介</i></p>
<p><em>公司由来</em></p>
<p>公司由来的一堆介绍文本</p>

</body>
</html>