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. 在页面中应用

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

到此这篇关于Vue项目中引用本地字体的完整指南的文章就介绍到这了,更多相关Vue引用本地字体内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！