Vue項目中引用本地字體的完整指南
更新時間：2026年03月19日 08:51:21 作者：予你@。
在前端開發(fā)中,我們經(jīng)常會遇到需要使用自定義字體的場景,比如品牌字體、設(shè)計稿還原等,在 Vue 項目中引入本地字體其實非常簡單,本文將一步步帶你完整實現(xiàn),需要的朋友可以參考下
一、準(zhǔn)備字體文件
首先，你需要下載好字體文件（常見格式）：
.ttf.woff.woff2（推薦，體積更?。?/li>
然后將字體文件放到項目目錄中，例如：
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
如果生產(chǎn)環(huán)境找不到字體，可以嘗試以下方式：
方式一：使用相對路徑
src: url("../assets/fonts/myfont.ttf");方式二：放入 public 目錄
目錄結(jié)構(gòu)：
public/fonts/myfont.ttf
引用方式：
src: url("/fonts/myfont.ttf");五、建議
在實際項目中，推薦：
- 字體目錄：
src/assets/fonts - 字體格式優(yōu)先級：
woff2 > woff > ttf原因：
woff2體積最小，加載最快woff兼容性良好ttf作為兜底方案
六、總結(jié)
在 Vue 項目中引入本地字體的核心步驟只有三步：
- 放入字體文件
- 使用
@font-face聲明 - 在頁面中應(yīng)用
掌握這套流程后，你可以輕松實現(xiàn)設(shè)計稿中的各種字體效果，讓項目更加專業(yè)和精致。
到此這篇關(guān)于Vue項目中引用本地字體的完整指南的文章就介紹到這了,更多相關(guān)Vue引用本地字體內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中點擊按鈕下載文件的實現(xiàn)方式,具有很的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細介紹了vue實現(xiàn)評論列表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue.js+boostrap項目實踐(案例詳解)的相關(guān)資料,本文圖文并茂介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
這篇文章主要給大家介紹了關(guān)于Vue項目打包為exe可安裝程序操作步驟的相關(guān)資料,Vue是一種流行的JavaScript框架,用于構(gòu)建單頁面應(yīng)用程序(SPA),需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue+axios全局添加請求頭和參數(shù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了關(guān)于Vue中的watch監(jiān)視屬性,Vue中的watch默認(rèn)不監(jiān)視對象內(nèi)部值的改變,當(dāng)被監(jiān)視的屬性變化時，回調(diào)函數(shù)自動調(diào)用，進行相關(guān)操作,需要的朋友可以參考下2023-04-04
vue?router進行路由跳轉(zhuǎn)并攜帶參數(shù)的實例詳解(params/query)
在使用`router.push`進行路由跳轉(zhuǎn)到另一個組件時，可以通過`params`或`query`來傳遞參數(shù)，這篇文章主要介紹了vue?router進行路由跳轉(zhuǎn)并攜帶參數(shù)（params/query）,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue3+ts+MicroApp實戰(zhàn)教程,分別在主應(yīng)用項目(main)和子應(yīng)用(childrenOne,childrenTwo)項目中安裝microApp，本文給大家詳細講解，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue使用微信掃一掃功能的實現(xiàn)代碼,需要的朋友可以參考下2020-04-04
Vue Router的三種歷史模式應(yīng)用與對比詳解
在 Vue.js 單頁應(yīng)用（SPA）中,vue-router 提供了三種不同的 歷史模式 來管理路由導(dǎo)航和 URL 顯示方式,每種模式適用于不同場景,下面小編就和大家簡單介紹一下吧2025-10-10