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