前言: 做大屏 项目需要引入字体做个记录
一、先看看效果
二、实现
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;
}
// 可以引入添加多个字体
4、vue中全局引入字体
在main.js中引入刚才创建的css文件:
import '@/assets/font/font.css'
5、在页面中使用字体
.font-text {
font-family: "Open24DisplaySt";
}
这就搞定了