Vue 引入字体库

开发项目中，我们偶尔会遇到这么个问题，UI同学为了凸显某些标题或者文案，使用了特定的字体样式，那么前端如何去实现呢？

首页我们都会想到设置font-family，但是并没有什么用，那是因为我们没有引入当前的字体，那么如何引入了，一起来了解一下：

首先去 下载字体

字体很多，就不一一展示了，大家根据需求自行下载即可。

创建fonts.css 文件

//fonts.css 引入刚才下载的字体 ttf 文件，我的放在了一起，所以用./引入
//Playfair Display SC  是我定义的字体名称
@font-face {
  font-family: "Playfair Display SC";
  src: url('./***.ttf');
}

在 vue.config.js 引入 fonts.css文件

对vue.config.js不了解，请移步这里~

// vue.config.js
css: [
    // css 重置文件表
    '@/assets/css/fonts.css'
],

使用字体

// index.vue

.title{
	font-size:30px;
	font-family:"Playfair Display SC"
}

效果