CSS添加新字体

• 本文以实际案例讲解如何在网页中使用系统未安装的新字体

准备工作

1. 在网络中下载你想要的的字体
2. 在字体转换器网站将字体转换为多种格式
3. 学习一下转换器网站自带的demo示例（可选）

Html 文件

• 在标签内添加你的.css样式表

<link rel="stylesheet" type="text/css" href="./site.css">
1

Css样式表

• 添加自定义字体
• 注意为了更好的兼容性，需要添加多种格式的字体文件(eot, woff, woff2 等）

@font-face {
    font-family: 'Merriweather';
    src: url('./Merriweather/Merriweather-Regular.eot');
    src: url('./Merriweather/Merriweather-Regular.eot?#iefix') format('embedded-opentype'),
        url('./Merriweather/Merriweather-Regular.woff2') format('woff2'),
        url('./Merriweather/Merriweather-Regular.woff') format('woff'),
        url('./Merriweather/Merriweather-Regular.svg#Merriweather-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('./Roboto/Roboto-Regular.eot');
    src: url('./Roboto/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
        url('./Roboto/Roboto-Regular.woff2') format('woff2'),
        url('./Roboto/Roboto-Regular.woff') format('woff'),
        url('./Roboto/Roboto-Regular.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

• 给你想要的的字段，例如一级标题应用之前设置的字体

h1 {
    font-family: "Merriweather", sans-serif;
    font-size: 50px;
    font-weight: 700;
    line-height: 1.25;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 25px
}
1
2
3
4
5
6
7
8

这样你的html页面一级标题就可以应用新的字体了。