开发项目中,我们偶尔会遇到这么个问题,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"
}

效果

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201201114909348.png

Logo

前往低代码交流专区

更多推荐