前端引入第三方字体

常用字体文件格式

ttf

TTF 是 TrueType Font 的缩写，它是一种常见的字体文件格式。TrueType 是由苹果公司在 1980 年代末开发的，后来被微软公司采用并进行了一些扩展。TTF 字体是一种可以在多种操作系统（包括 Windows、Mac OS 和许多 Linux 发行版）上使用的字体格式。

woff2

WOFF2，全称 Web Open Font Format 2，是一种用于在网页上使用的字体格式。它是 WOFF 的升级版本，由 W3C（万维网联盟）标准化。

otf

OTF 是 OpenType Font 的缩写，它是一种字体文件格式。OpenType 是由微软公司和 Adobe 共同开发的，旨在替代早期的 TrueType 和 PostScript Type 1 字体格式。

引入使用

1. 首先我们在assets文件夹中创建fonts文件夹，将下载好的字体放入fonts文件夹中；

2. 在assets文件夹中创建style文件夹（我们把重置网页样式，覆盖样式或通用样式都放在style文件夹下），新建一个font.scss文件,如下图

3. 在font.scss文件中写入如下代码

@font-face
{
    font-family: 'ZDYZT';
    src: url('../fonts/font-17630386922.ttf');
    font-weight: normal;  
    font-style: normal;  
}
@font-face
{
    font-family: 'XXXX';
    src: url('../fonts/font-XXXX.ttf');
    font-weight: normal;  
    font-style: normal;  
}

4. 然后在main.js(Vue)或index.tsx(React)中引入

import './assets/style/font.less';

5. 页面组件中使用

.item_container {
    font-size: 14px;
    font-family: 'ZDYZT';
    color: #F99;
}

.item_container {
    font-family: 'XXXX';
    color: #F99;
}