vue项目引入字体

1. 中文字体库下载

https://fonts.mobanwang.com/

英文字体库下载：https://www.fontsquirrel.com/fonts/list/language/english

2. 下载并使用

1）下载的 ttf 文件放入项目根目录 /public/fonts/ 路径下

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

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

3）main.ts 中引入 font.css

import '../public/fonts/font.css'

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

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

5）最后直接使用字体
若为主字体则最好在app.vue直接设置

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

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

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

3. 注意

如果使用了比如 antd 之类的组件库，可能由于外部定义的字体无法穿透到组件内部，
全局应用字体需要在 App.vue 添加如下样式：

* {font-family: 'NHZT', sans-serif;
}