vue3 使用字体 阿里巴巴矢量库字体

下载相关文件

• 1 输入iocnfont 找到阿里巴巴矢量库官网
  

• 2 进入字体库 选择字体
  

• 3 点击下载字体包
  

• 4 解压后
  

• 5 将下载包解压后将里面的文件一起 放到 assets 文件夹 自己创建的 字体包下面。 我这里放在了 assets/typeface/number 文件夹下(你那里没有 font.css 不用着急，接下来就说它。我这里是下载的数字字体 所以文件夹是number 对于我的文件夹长typeface\number这样，不要去纠结，这个编辑器当 文件夹里只有一个文件就是这样的。)
  

• 6 在 number 文件夹里新建 font.css 加入以下代码

@font-face {
  font-family: 'fontNumber';
  src: url('AlimamaShuHeiTi-Bold.ttf'); 
  font-weight: normal;
  font-style: normal;
}

说明

• 7 引入 css
  
• 8 使用
  

<div class="font" style="font-family: fontNumber;">11,565.640</div>