Vue项目中引用本地字体的完整指南
更新时间：2026年03月19日 08:51:21 作者：予你@。
在前端开发中,我们经常会遇到需要使用自定义字体的场景,比如品牌字体、设计稿还原等,在 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 项目中引入本地字体的核心步骤只有三步：
- 放入字体文件
- 使用
@font-face声明 - 在页面中应用
掌握这套流程后，你可以轻松实现设计稿中的各种字体效果，让项目更加专业和精致。
到此这篇关于Vue项目中引用本地字体的完整指南的文章就介绍到这了,更多相关Vue引用本地字体内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue中点击按钮下载文件的实现方式,具有很的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要为大家详细介绍了vue实现评论列表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue.js+boostrap项目实践(案例详解)的相关资料,本文图文并茂介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
这篇文章主要给大家介绍了关于Vue项目打包为exe可安装程序操作步骤的相关资料,Vue是一种流行的JavaScript框架,用于构建单页面应用程序(SPA),需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue+axios全局添加请求头和参数操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了关于Vue中的watch监视属性,Vue中的watch默认不监视对象内部值的改变,当被监视的属性变化时，回调函数自动调用，进行相关操作,需要的朋友可以参考下2023-04-04
vue router进行路由跳转并携带参数的实例详解(params/query)
在使用`router.push`进行路由跳转到另一个组件时，可以通过`params`或`query`来传递参数，这篇文章主要介绍了vue router进行路由跳转并携带参数（params/query）,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue3+ts+MicroApp实战教程,分别在主应用项目(main)和子应用(childrenOne,childrenTwo)项目中安装microApp，本文给大家详细讲解，需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue使用微信扫一扫功能的实现代码,需要的朋友可以参考下2020-04-04
在 Vue.js 单页应用（SPA）中,vue-router 提供了三种不同的 历史模式 来管理路由导航和 URL 显示方式,每种模式适用于不同场景,下面小编就和大家简单介绍一下吧2025-10-10
最新评论