vue3中使用外部字体

首先要找一个免费网站，去下载你想用的字体，推荐 DaFont - Download fonts

或者问UI要，ui在设计图的时候也会下载对应的特殊字体的包，所以问她要方便快捷 ~~

如果是进入网站下载的话，操作步骤如下：

在官网的右上角输入你想下载的字体名称，点击后面的搜索按钮

 点击下载即可

 下载完事之后再解压，是对应字体的四种类型

在项目中使用：

在vue项目中的assets文件夹下，新建一个font文件夹，将这四个文件放进去

 然后再新建一个font.css文件，里面编写字体变量

@font-face {
      font-family: "DS-DIGI";
      src: url('./DS-DIGI.TTF');
      font-weight: normal;
      font-style: normal;
}

@font-face {
      font-family: "DS-DIGIB";
      src: url('./DS-DIGIB.TTF');
      font-weight: normal;
      font-style: normal;
}

@font-face {
      font-family: "DS-DIGII";
      src: url('./DS-DIGII.TTF');
      font-weight: normal;
      font-style: normal;
}

@font-face {
      font-family: "DS-DIGIT";
      src: url('./DS-DIGIT.TTF');
      font-weight: normal;
      font-style: normal;
}

 然后再main.js中引入font.css

import '@/assets/font/font.css'

在页面中使用，直接用font-family后面跟上你在font.css中定义的名称即可

 我们分别使用了这四种效果，就可以选择一个好看的来引入喽！