---

💌 作者簡介

📖 個人介紹：小伙伴們，大家好！我是水香木魚，【前端領域創作者】😜

📜 CSDN主頁：水香木魚

📑 個人博客：陳春波

🎨 系列專欄：后臺管理系統

🌹 一鍵四連：關注💋+點贊👍+收藏?+留言📝

📢 人生箴言：即使沒有萬全準備，也要勇敢邁出第一步。

---

📢: 我們在項目開發時.或多或少 會給項目 添加全局字體;
添加字體的最佳方案,請看 👇 👇 👇 四步成功引入

1、創建font文件夾

在assets 靜態資源文件夾中,新建font 文件夾

//目錄結構 ├──node_modules ├──public ├──src ├ ├──api ├ ├──assets //靜態資源 ├ ├──images ├ ├──font //存放 公共字體的文件夾 ├ ├──common //存放字體的文件夾 ├ ├──weiruan.ttf ├ ├──changcheng.ttf ├ ├──songti.ttf ├ └── ...... ├ └──index.css ├ └── css ├ ├──components ├ └── views ├ ......

2、 創建index.css

在剛剛創建好的font 文件夾中新建index.css 存放字體樣式

/*公共字體的樣式 */@font-face {font-family: 'weiruan';src:url('./weiruan.otf') format('otf'), url('./changcheng.woff') format('woff'), /* Modern Browsers */url('./songti.ttf') format('truetype'); /* Safari, Android, iOS */}

3、全局注冊

在腳手架中找到main.js 文件，引入我們需要全局使用的 index.css 文件

//main.js import './assets/font/index.css' //全局使用

4、頁面使用

在需要使用字體的頁面，引入全局字體

div {font-family: weiruan; //使用字體}

---

📖 博主致謝

感謝大家閱讀到結尾，本次的文章就分享到這里，總結了【vue全局自定義字體，提高項目字體美化】，希望可以幫到大家，謝謝。

如果您覺得這篇文章有幫助到您的的話不妨【關注+點贊+收藏+評論+轉發 】支持一下喲~~😛您的支持就是我更新的最大動力。👇👇👇👇👇👇

---

🛩往期精彩：

一文圖解前端WebSocket 實時通信

vue 重置刷新頁面數據（最快捷 簡單的方式，全局定義）

vue如何通過url攜帶token，并且打開新頁面

vue拖拽功能，提高你的開發效率

vue實現隱藏瀏覽器右側滾動條功能

總結

以上是生活随笔為你收集整理的vue全局自定义字体，提高项目字体美化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。