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)目字體包過大？
一般的的字體文件（以 .ttf 格式為例）都在10M 往上，當(dāng)項(xiàng)目中引入過多的字體文件，可能導(dǎo)致項(xiàng)目加載緩慢，影響用戶體驗(yàn)。這個(gè)時(shí)候就應(yīng)該考慮給字體包來個(gè)“瘦身”。
附：vue 項(xiàng)目引入字體圖標(biāo)報(bào)錯(cuò)、不顯示等問題
問題：在項(xiàng)目開發(fā)時(shí)使用字體圖標(biāo)，發(fā)現(xiàn)兩個(gè)問題；
1、出現(xiàn)報(bào)錯(cuò)：
解決方法為：把字體引入方式改為絕對路徑
2、不報(bào)錯(cuò)，但是不顯示圖標(biāo)字體，出現(xiàn)方框
原因可能有兩種：①?zèng)]在用到的地方引入字體的樣式文件②你使用的是后綴名為 .styl 文件
①的解決辦法是在用到的地方引入字體的樣式文件（全局引入的話需要從app.vue里引入）
②這個(gè)就是我遇到的問題，浪費(fèi)了我好幾分鐘?。?！
解決辦法是把font.styl改為font.css
記得在用到圖標(biāo)的地方引入
問題原理后續(xù)再寫
總結(jié)
到此這篇關(guān)于Vue項(xiàng)目導(dǎo)入字體文件的文章就介紹到這了,更多相關(guān)Vue導(dǎo)入字體文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue實(shí)現(xiàn)點(diǎn)擊出現(xiàn)操作彈出框的示例
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊出現(xiàn)操作彈出框的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了Vue3之事件綁定的實(shí)現(xiàn)邏輯,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue實(shí)現(xiàn)的請求服務(wù)器端API接口示例
這篇文章主要介紹了vue實(shí)現(xiàn)的請求服務(wù)器端API接口,結(jié)合實(shí)例形式分析了vue針對post、get、patch、put等請求的封裝與調(diào)用相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
本篇文章主要介紹了Vue打包后出現(xiàn)一些map文件的解決方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
今天被vue中proxy配置困擾了一天,記錄一下,下面這篇文章主要給大家介紹了關(guān)于Vue配置文件中的proxy配置方式的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
vue動(dòng)態(tài)的 BreadCrumb 組件el-breadcrumb ElementUI詳解
這篇文章主要介紹了vue如何做一個(gè)動(dòng)態(tài)的 BreadCrumb 組件,el-breadcrumb ElementUI2024-07-07
,本文通過圖文示例代碼相結(jié)合給大家介紹的非常詳細(xì),需要的朋友可以參考下
element-ui Upload上傳組件動(dòng)態(tài)配置action方式
這篇文章主要介紹了element-ui Upload上傳組件動(dòng)態(tài)配置action方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue?響應(yīng)式系統(tǒng)依賴收集過程原理解析
Vue 初始化時(shí)就會(huì)通過 Object.defineProperty 攔截屬性的 getter 和 setter ，為對象的每個(gè)值創(chuàng)建一個(gè) dep 并用 Dep.addSub() 來存儲(chǔ)該屬性值的 watcher 列表，這篇文章主要介紹了Vue?響應(yīng)式系統(tǒng)依賴收集過程分析,需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細(xì)介紹了vue.js中指令Directives，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
如何通過Vue自定義指令實(shí)現(xiàn)前端埋點(diǎn)詳析
埋點(diǎn)分析是網(wǎng)站分析的一種常用的數(shù)據(jù)采集方法,下面這篇文章主要給大家介紹了關(guān)于如何通過Vue自定義指令實(shí)現(xiàn)前端埋點(diǎn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07