Vue項目導入字體文件的方法步驟
要想實現(xiàn)UI設計師設計的原型效果，有時候需要用到一些特殊的字體，在項目中就需要導入相關的字體文件。本文章以平方字體為例。
1、導入字體文件
1、下載相應的字體文件，或者找UI設計師要一份（如果UI設計師有的話）。一般字體文件使用 .ttf 格式的即可。將準備好的字體文件，放在項目中，文件目錄示例如下：
2、創(chuàng)建一個.css 文件，以上面文件目錄示例中 font.css 文件為例，在該文件中聲明字體：
@font-face {
font-family: "PingFangSC-Medium";
src: url('./PingFang\ SC\ Medium.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "PingFangSC-Regular";
src: url('./PingFang\ SC\ Regular.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "PingFangSC-Semibold";
src: url('./PingFang\ SC\ Semibold.ttf');
font-weight: normal;
font-style: normal;
}3、全局引入 font.css 文件:
// 在 main.js 中引入 import '@/assets/iconfont/iconfont.css'
4、在需要的地方使用即可:
.container {
width: 100vw;
height: 100vh;
font-family: 'PingFangSC-Regular';
}2、項目字體包過大？
一般的的字體文件（以 .ttf 格式為例）都在10M 往上，當項目中引入過多的字體文件，可能導致項目加載緩慢，影響用戶體驗。這個時候就應該考慮給字體包來個“瘦身”。
附：vue 項目引入字體圖標報錯、不顯示等問題
問題：在項目開發(fā)時使用字體圖標，發(fā)現(xiàn)兩個問題；
1、出現(xiàn)報錯：
解決方法為：把字體引入方式改為絕對路徑
2、不報錯，但是不顯示圖標字體，出現(xiàn)方框
原因可能有兩種：①沒在用到的地方引入字體的樣式文件②你使用的是后綴名為 .styl 文件
①的解決辦法是在用到的地方引入字體的樣式文件（全局引入的話需要從app.vue里引入）
②這個就是我遇到的問題，浪費了我好幾分鐘?。?！
解決辦法是把font.styl改為font.css
記得在用到圖標的地方引入
問題原理后續(xù)再寫
總結(jié)
到此這篇關于Vue項目導入字體文件的文章就介紹到這了,更多相關Vue導入字體文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue?element?ui表格相同數(shù)據(jù)合并單元格效果實例
工作中遇到需要根據(jù)單元格某個屬性合并,特此記錄下,下面這篇文章主要給大家介紹了關于vue?element?ui表格相同數(shù)據(jù)合并單元格效果的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-11-11
Vue實戰(zhàn)之項目開發(fā)時常見的幾個錯誤匯總
vue作為前端主流的3大框架之一,目前在國內(nèi)有著非常廣泛的應用,下面這篇文章主要給大家介紹了關于Vue實戰(zhàn)之項目開發(fā)時常見的幾個錯誤匯總的相關資料,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue和React有哪些區(qū)別，幫助大家更好的理解和學習JavaScript框架，感興趣的朋友可以了解下2020-09-09
這篇文章主要介紹是八種vue實現(xiàn)組建通信的方式，包括、props 父組件與子組件通信、$emit 子組件父組件傳遞、$emit與props結(jié)合 兄弟組件傳值等等，想具體了解的朋友可以參考下面文章的具體內(nèi)容2021-09-09
在Vue.js的開發(fā)過程中,組件方法的定義和調(diào)用是非常常見的,有時候,為了響應事件或其他操作,我們需要在組件的方法中使用匿名函數(shù),本文將深入探討如何在Vue組件的方法中加載和使用匿名函數(shù),并提供詳細的代碼示例和解釋,幫助開發(fā)者更好地理解和應用這些技術2024-09-09
今天小編就為大家分享一篇對vue中v-on綁定自定事件的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue 開發(fā)之路由配置方法,結(jié)合實例形式詳細分析了了vue.js路由原理、配置方法及相關操作注意事項,需要的朋友可以參考下2019-12-12
Vue.js結(jié)合SortableJS實現(xiàn)樹形數(shù)據(jù)拖拽
本文主要介紹了Vue.js結(jié)合SortableJS實現(xiàn)樹形數(shù)據(jù)拖拽，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
這篇文章主要為大家介紹了vue shallowRef作用及引發(fā)問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
在vue.js項目中使用vue-router，可以使用路由進行界面或路徑跳轉(zhuǎn),下面這篇文章主要給大家介紹了關于Vue3使用路由VueRouter4的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-07-07