vue中引入字体

前言： 做大屏 项目需要引入字体做个记录

一、先看看效果

二、实现

1、下载字体文件

分享一个下载开源字体网站： https://www.dafont.com/theme.php

2、文件放到项目中

可以在src下的assets目录下新建一个font的目录（放在其他目录下一样可以），然后把下载的字体文件放入其中

3、创建css文件， 引入添加font-family

在font目录下创建一个css文件，自己随便取个名字，我用得是font.css:

@font-face {
  font-family: "Open24DisplaySt";
  src: url('Open 24 Display St.ttf');
  font-weight: normal;
  font-style: normal;
}

// 可以引入添加多个字体
1
2
3
4
5
6
7
8

4、vue中全局引入字体

在main.js中引入刚才创建的css文件：

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

1
2

5、在页面中使用字体

.font-text {
	font-family: "Open24DisplaySt";
}
1
2
3

这就搞定了