Vue 项目中如何引用本地字体（完整指南）

在前端开发中，我们经常会遇到需要使用自定义字体的场景，比如品牌字体、设计稿还原等。在 Vue 项目中引入本地字体其实非常简单，本文将一步步带你完整实现。

一、准备字体文件

首先，你需要下载好字体文件（常见格式）：

• .ttf

• .woff

• .woff2（推荐，体积更小）

然后将字体文件放到项目目录中，例如：

src
 ├─ assets
 │   └─ fonts
 │       └─ myfont.woff2

---

二、在 CSS 中声明字体

在全局样式文件中（如 main.css、index.css 或 App.vue），使用 @font-face 声明字体：

@font-face {
  font-family: "MyFont";
  src: url("@/assets/fonts/myfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

推荐写法（兼容性更好）

@font-face {
  font-family: "MyFont";
  src: url("@/assets/fonts/myfont.woff2") format("woff2"),
       url("@/assets/fonts/myfont.woff") format("woff"),
       url("@/assets/fonts/myfont.ttf") format("truetype");
}

---

三、使用自定义字体

1. 全局使用

body {
  font-family: "MyFont", sans-serif;
}

这样整个项目都会使用该字体。

---

2. 局部使用

.title {
  font-family: "MyFont";
}

<div class="title">这是自定义字体</div>

---

---

四、常见问题及解决方案

1. 字体不生效

请检查以下几点：

• 路径是否正确（推荐使用 @/assets/...）

• font-family 名称是否一致

• 是否被其他样式覆盖

---

2. 打包后字体 404

如果生产环境找不到字体，可以尝试以下方式：

方式一：使用相对路径

src: url("../assets/fonts/myfont.ttf");

方式二：放入 public 目录

目录结构：

public/fonts/myfont.ttf

引用方式：

src: url("/fonts/myfont.ttf");

---

五、建议

在实际项目中，推荐：

• 字体目录：src/assets/fonts

• 字体格式优先级：

  woff2 > woff > ttf

原因：

• woff2 体积最小，加载最快

• woff 兼容性良好

• ttf 作为兜底方案

---

六、总结

在 Vue 项目中引入本地字体的核心步骤只有三步：

1. 放入字体文件

2. 使用 @font-face 声明

3. 在页面中应用

掌握这套流程后，你可以轻松实现设计稿中的各种字体效果，让项目更加专业和精致。