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