Vue3引用外部TTF字体，其实很简单！

一、下载字体

这里推荐一个网站
字体天下

二、引入TTF字体

1. 将已有的xx.ttf按照如下示例放入assets文件夹下
2. 并且同级目录创建fonts.css写入以下内容

language-bash

@font-face {
   
    font-family: 'my-self-font';
    src: url('./XiangJiaoDaJiangJunLingGanTi-2.ttf');
    font-weight: normal;
    font-style: normal;
}

其中font-family: 'my-self-font';就是你自定义字体的名字

3. 在main.js引入fonts.css

language-bash

import './assets/fonts/fonts.css'

三、使用字体

language-html

<span style="font-family: my-self-font">你好啊</span>