vue项目引入字体

真的想不出名儿2025-09-29 23:38

1. 中文字体库下载

https://fonts.mobanwang.com/

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

2. 下载并使用

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

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

css 复制代码

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

3）main.ts 中引入 font.css

ts 复制代码

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

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

ts 复制代码

<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直接设置

css 复制代码

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

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

css 复制代码

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

3. 注意

如果使用了比如 antd 之类的组件库，可能由于外部定义的字体无法穿透到组件内部，

全局应用字体需要在 App.vue 添加如下样式：

css 复制代码

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