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弹窗里面使用echarts不显示的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
在本篇文章里小编给大家整理的是关于vue实现百度语音合成的实例内容，以及相关代码，需要的朋友们参考下。2019-10-10
vue开发chrome插件，实现获取界面数据和保存到数据库功能
这篇文章主要介绍了vue开发chrome插件，实现获取界面数据和保存到数据库功能的示例，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了vue 鼠标移入移出(hover)切换显示图片问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
在项目开发中，我们经常会遇到表单保存的功能，本文主要介绍了v-for中动态校验el-form表单项的实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧<BR>2022-05-05
这篇文章主要介绍了Vue 401配合Vuex防止多次弹框的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
为了实现全屏滚动效果,我们首先需要使用Vue.js框架搭建项目,这篇文章主要给大家介绍了关于VUE屏幕整体滚动(滑动或滚轮)原生方法的相关资料,需要的朋友可以参考下2024-01-01
最近开始入坑前端mapbox地图,跟大家一起慢慢深入学习,下面这篇文章主要给大家介绍了关于vue项目中使用mapbox地图切换底图的详细教程,文中给出了详细的实例代码,需要的朋友可以参考下2023-04-04
这篇文章主要给大家介绍了关于vue中实现div可编辑并插入指定元素与样式的相关资料,文中通过代码以及图文将实现的方法介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
vue emit之Property or method “$$v“ i
这篇文章主要介绍了vue emit之Property or method “$$v“ is not defined的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
最新评论