笔记 vue3 如何引入第三方字体

本次采用的免费字体是阿里巴巴的iconfont，商用免费的，废话不多说，开始今天的教程

1、打开iconfont 官网

2、选择符合你要求的字体，字体包下载

3、如何使用

1、解压，然后到项目的assets中创建font文件夹，把解压包中你要用的字体放进font文件夹中

例如：我选的字体是 Alibaba_PuHuiTi_2.0_55_Regular_55_Regular

2、创建font.css文件并引入

font-family对应你用的字体名称

@font-face {
    font-family: "Alibaba_PuHuiTi_2.0_55_Regular_55_Regular";
    src: url('./Alibaba_PuHuiTi_2.0_55_Regular_55_Regular.ttf');
    font-weight: normal;
    font-style: normal;
  }
1
2
3
4
5
6
7

3、进入App.vue

给根标签app使用，代表整个项目都用这个字体

#app {
  font-family: "Source_Han_Serif_CN_VF_Regular";
}
1
2
3

4、实践验证

ok，轻松拿下。