CSS字体属性

CSS Fonts（字体）属性用于定义：字体系列、大小、粗细、和 文字样式（如：斜体）。

字体族

font-family 字体族（字体的格式）

CSS 使用 font-family 属性定义文本的字体系列。

1
2
3
4
5
6
7
p {
	font-family: "Microsoft YaHei";
}

div {
	font-family: Arial, "Microsoft YaHei";
}
  • 各种字体之间必须使用英文状态下的逗号隔开
  • 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
  • 字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推
  • 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
  • 最常用的字体：body {font-family: "Microsoft YaHei", tahoma, arial, sans-serif, "Hiragino Sans GB";}

Apple 官网字体：

1
2
3
body {
	font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}

Instagram 官网字体：

1
2
3
body {
	font-family: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Helvetica, Arial, sans-serif
}

知乎官网字体：

1
2
3
>body {
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif
>}

爱奇艺官网字体：

1
2
3
body {
font-family: PingFangSC-Regular, Helvetica, Arial, Microsoft Yahei, sans-serif
}
1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
    /* 浏览器会从第一个字体开始进行适配，如果本机可以适配的话，那么就使用该字体，否则看下一个字体，
       如果都不可以，那么浏览器会使用自带的默认字体，所以实际开发中一般建议使用比较标准化的字体 */
    h2 {
        /* font-family: '微软雅黑'; 可以使用中文，但不建议 */
        font-family: "Microsoft YaHei", Arial, sans-serif;
    }

    p {
        font-family: "Times New Roman", Times, serif;
    }
</style>
1
2
3
4
5
6
<style type="text/css">
    /* 一些情况下，如果要全局设置字体可以直接在 body 标签选择器中指明 */
    body {
        font-family: "Microsoft YaHei", Arial, sans-serif;
    }
</style>

注意：浏览器字体是依据用户操作系统来调用的，所以这里介绍一种 Windows 系统安装字体的方法。

当然实际开发中通常浏览器请求时，会把字体文件随 HTML CSS JS 等一同传送到客服端。

image-20220720225059706

@font-face

我们除了可以使用系统自带的字体样式外，还可以在服务器端自定义字体位置

@font-face可以将服务器中的字体直接提供给用户去使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@font-face {
    /* 指定字体名字 */
    font-family: 'myFont1';
    /* 服务器中字体路径 */
    src: url('/font/ZCOOLKuaiLe-Regular.woff'),
        url('/font/ZCOOLKuaiLe-Regular.otf'),
        url('/font/ZCOOLKuaiLe-Regular.ttf') format('truetype');/* 指定字体格式，一般不写 */
}

p {
    font-size: 30px;
    color: salmon;
    font-family: myFont1;
}

问题

  1. 加载速度：受网络速度影响，可能会出现字体闪烁一下变成最终的字体

  2. 版权：有些字体是商用收费的，需要注意

  3. 字体格式：字体格式也有很多种（woff、otf、ttf），未必兼容，可能需要指定多个

字体大小

CSS 使用 font-size 属性定义字体大小。

1
2
3
p {
	font-size: 20px;
}
  • px（像素）大小是我们网页的最常用的单位
  • 谷歌浏览器默认的文字大小为：16px
  • 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
  • 可以给 body 指定整个页面文字的大小
1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
    /* 全局设置时，一般在 body 标签选择器中指定文字大小，谷歌浏览器默认 16px，
       但是最好还是指定一个明确值，以保证在不同浏览器中的效果是一样的 */
    body {
        font-size: 24px;
    }

    /* 标题标签比较特殊，body 中的设置对其是不生效的，需要单独指定文字大小 */
    h2 {
        font-size: 54px;
    }
</style>

字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细。

1
2
3
p {
	font-weight: bold;
}
属性值 描述
normal 默认值（不加粗的）
bold 定义粗体（加粗的）
100-900 400 等同于 normal，而 700 等同于 bold，其它值一般不使用，注意这个数字后面不跟单位
  • 学会让加粗标签（比如 h 和 strong 等）变为不加粗，或者让其他标签加粗
  • 实际开发时，我们更喜欢用数字表示粗细
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style type="text/css">
    .bold {
        /* font-weight: bold; */
        /* 实际开发中，我们更提倡使用数字来表示加粗的效果 */
        /* 这个 700 的后面不要跟单位 */
        font-weight: 700;
    }

    /* 使文字不加粗 */
    h2 {
        /* font-weight: normal; */
        font-weight: 400;
    }
</style>

文字样式

CSS 使用 font-style 属性设置文本的风格。

1
2
3
p {
	font-style: normal;
}
属性值 作用
normal 默认值，浏览器会显示标准的字体样式 font-style: normal;
italic 浏览器会显示斜体的字体样式

注意： 平时我们很少给文字加斜体，反而要给斜体标签 (em、i) 改为不倾斜字体。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style type="text/css">
    p {
        /* 让不倾斜的字体倾斜 */
        font-style: italic;
    }

    em {
        /* 让倾斜的字体不倾斜 */
        font-style: normal;
    }
</style>

<p>上课时候的你</p>
<em>下课时候的你</em>

字体复合属性

字体属性可以把以上文字样式综合来写，这样可以更节约代码。

1
2
3
4
5
6
7
body {
	font: font-style font-weight font-size/line-height font-family;
}

body {
	font: normal 400 font-size/line-height "Microsoft YaHei", Arial, sans-serif;
}
  • 使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
  • 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type="text/css">
    /* 想要 div 文字变倾斜、加粗、字号设置为 16 像素，并且是微软雅黑 */
    div {
        /* font-style: italic;
           font-weight: 700;
           font-size: 16px;
           font-family: 'Microsoft YaHei'; */

        /* 复合属性：简写的方式，里面的顺序不能打乱 以空格隔开 */
        /* font: font-style font-weight font-size/line-height font-family; */
        font: italic 700 16px 'Microsoft YaHei';
        /* 注意：不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用 */
        /* font: 20px 'Microsoft YaHei'； */
    }
</style>

<div>三生三世十里桃花，一心一意百行代码</div>

字体属性总结

属性 表示 注意点
font-size 字号 我们通常用的单位是 px 像素，一定要跟上单位
font-family 字体 实际工作中按照团队约定来写字体
font-weight 字体属性 记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位
font-style 字体样式 记住倾斜是 italic 不倾斜是 normal 工作中我们最常用 normal
font 字体连写 1、字体连写是有顺序的不能随意换位置，2、其中字号和字体必须同时出现
CSS的元素显示模式 CSS字体属性 CSS文本属性