Vue項(xiàng)目中使用自定義字體樣式方式
更新時(shí)間：2022年09月19日 09:33:12 作者：duyanke888
這篇文章主要介紹了Vue項(xiàng)目中使用自定義字體樣式方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
Vue使用自定義字體樣式
步驟一
拿到自定義字體包
首先要得到自定義字體包（后綴名為.ttf, .otf, .eot等格式的字體包），可自行下載也可以問UI要字體包。
步驟二
在項(xiàng)目文件夾中進(jìn)行放置自定義字體包的配置
在項(xiàng)目assets文件夾下新建font文件夾，將拿到的字體包放在font文件夾中；
新建一個(gè)font.css文件
步驟三
font.css文件配置
在font.css文件中定義所用字體
@font-face {
? ? font-family: 'ZI DING YI'; /* 重命名字體名 */
? ? src: url('ZI DING YI.TTF');
? ? font-weight: normal;
? ? font-style: normal;
}步驟四
在app.vue中引入font.css
<style lang="scss">
? @import './assets/font/font.css';
? #app {
? ? font-family: 'PingFang-RE';
? ? font-weight: 400;
? }
</style>全局自定義字體,提高項(xiàng)目字體美化
我們?cè)陧?xiàng)目開發(fā)時(shí).或多或少 會(huì)給項(xiàng)目 添加全局字體;
添加字體的最佳方案,請(qǐng)看 ?? ?? ?? 四步成功引入
1、創(chuàng)建font文件夾
在assets 靜態(tài)資源文件夾中,新建font 文件夾
//目錄結(jié)構(gòu) ├──node_modules ├──public ├──src ├?? ?├──api? ├?? ?├──assets ? ?//靜態(tài)資源 ├ ? ??? ?├──images? ├ ? ??? ?├──font ? //存放 公共字體的文件夾 ├ ? ??? ??? ?├──common ?//存放字體的文件夾 ├ ? ??? ??? ??? ?├──weiruan.ttf ├ ? ??? ??? ??? ?├──changcheng.ttf ├ ? ??? ??? ??? ?├──songti.ttf ├ ? ??? ??? ??? ?└── ...... ├ ? ??? ??? ?└──index.css ├ ? ??? ?└── css? ├?? ?├──components ├?? ?└── views ├ ......
2、創(chuàng)建index.css
在剛剛創(chuàng)建好的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、全局注冊(cè)
在腳手架中找到main.js 文件，引入我們需要全局使用的 index.css 文件
//main.js import './assets/font/index.css' //全局使用
4、頁(yè)面使用
在需要使用字體的頁(yè)面，引入全局字體
?? ?div {
?? ? ??? ?font-family: weiruan; //使用字體
? ?? ?}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue提供了豐富的API和組件，可以幫助開發(fā)者快速地構(gòu)建現(xiàn)代化的Web應(yīng)用程序，本文介紹了Vue如何實(shí)現(xiàn)分頁(yè)功能，包括數(shù)據(jù)的獲取、分頁(yè)器的實(shí)現(xiàn)和頁(yè)面的渲染2023-09-09
這篇文章主要介紹了vite+vue3全局定義less變量在單文件中使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue3 根據(jù)路由動(dòng)態(tài)生成側(cè)邊菜單的方法
本文介紹了如何在Vue3項(xiàng)目中根據(jù)路由動(dòng)態(tài)生成側(cè)邊菜單,包括準(zhǔn)備工作、路由配置基礎(chǔ)、組件搭建和優(yōu)化與拓展,通過這些步驟,可以實(shí)現(xiàn)一個(gè)靈活且可擴(kuò)展的側(cè)邊菜單系統(tǒng),提升用戶體驗(yàn),感興趣的朋友一起看看吧2025-01-01
本篇文章主要介紹了解析Vue2.0雙向綁定實(shí)現(xiàn)原理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-02-02
Vue中的請(qǐng)求攔截器和響應(yīng)攔截器用法及說明
這篇文章主要介紹了Vue中的請(qǐng)求攔截器和響應(yīng)攔截器用法及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue中v-mode詳解以及具體的使用示例,在組件中使用?v-model?時(shí),需要定義model選項(xiàng),指定綁定的prop和事件,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
這篇文章主要介紹了vue中計(jì)算屬性和方法的區(qū)別及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要給大家介紹了關(guān)于vue使用Echarts繪制地圖的相關(guān)資料,Apache ECharts一個(gè)基于JavaScript的開源可視化圖表庫(kù),提供了常規(guī)的折線圖、柱狀圖、散點(diǎn)圖、餅圖、K線圖,用于統(tǒng)計(jì)的盒形圖,需要的朋友可以參考下2023-09-09
這篇文章給大家介紹了vue中本地靜態(tài)圖片路徑寫法及Vue.js中引用圖片路徑的方式，需要的朋友參考下吧2018-03-03
這篇文章主要介紹了Vue2.x 的雙向綁定原理，Vue 是利用的 Object.defineProperty() 方法進(jìn)行的數(shù)據(jù)劫持，利用 set、get 來(lái)檢測(cè)數(shù)據(jù)的讀寫。需要的朋友可以參考下面文章的具體內(nèi)容2021-09-09