前端工程配置字体库下载使用详细介绍

详细介绍"/>

前端工程配置字体库下载使用详细介绍

1.字体库下载

中文字体库推荐

英文 字体推荐库

2.下载并使用

1）下载的ttf文件放入指定文件夹下

文件最好改为英文命名

2）在fonts文件夹中新建font.css文件进行配置

@font-face {font-family: "HYXJ";src: url("./mnhyxj.ttf") format("truetype");
}

3）main.js中引入font.css

import './assets/fonts/font.css'

4）或在需要的文件中引入

<style  src=''../../assets/fonts/font.css'></style>
<style>@import '../../assets/fonts/font.css';
</style>
<style>@import url('../../assets/fonts/font.css');
</style>

5）最后直接使用字体

若为主字体则最好在app.vue直接设置

html, body {font-family:"HYXJ";
}

若为个别页面需要单独配置即可

.headTitle {font-family:"HYXJ";
}