vue項(xiàng)目如何設(shè)置全局字體樣式font-family
更新時(shí)間：2023年11月16日 09:26:57 作者：前端攻城獅路飛
這篇文章主要介紹了vue項(xiàng)目如何設(shè)置全局字體樣式font-family問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue項(xiàng)目設(shè)置全局字體樣式font-family
直接在app.vue文件中加上一下代碼即可，這是我收集的比較全的字體樣式，從第一個(gè)向后找，系統(tǒng)有就默認(rèn)顯示第一個(gè)，
依次往后找：
<style lang="scss">
body {
font-family:”Microsoft YaHei”,Arial,Helvetica,sans-serif,”宋體”;
}
</style>
你學(xué)廢了嗎！
vue中替換全局字體
產(chǎn)品說(shuō)項(xiàng)目要拿去展會(huì)展示，但現(xiàn)在項(xiàng)目字體是微軟雅黑，不支持商用，需要全局替換思源字體。
下載字體
推薦一個(gè)網(wǎng)站，字體天下，好用
下載好的文件如下：
引入字體
1、在項(xiàng)目資源目錄下新建一個(gè)fonts文件夾，引入下載好的字體文件
2、編寫(xiě)css文件（我的是font.less）
@font-face{
font-family: HanSans;
src: url('../fonts/SourceHanSansCN-VF-2.otf')
}
3、main.js引入思源字體
import '@/assets/css/font.less' // 引入思源字體
使用
1、在App.vue中
2、搜索font-family，看有沒(méi)有被替換掉的字體，改過(guò)來(lái)
完事！
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
文章介紹了如何在Vue中設(shè)置頁(yè)面全屏,包括下載插件、全屏、退出全屏、全屏切換等操作,同時(shí),還分享了在若依框架中實(shí)現(xiàn)主頁(yè)面內(nèi)容全屏的方法,包括配置全局變量和在布局文件中進(jìn)行設(shè)置2025-02-02
Vue?Token過(guò)期問(wèn)題的2種解決方案小結(jié)
在使用token進(jìn)行登錄的過(guò)程中,如果token過(guò)期了,需要重新輸入用戶(hù)名和密碼登錄,這種體驗(yàn)肯定是不好的,下面這篇文章主要給大家介紹了關(guān)于Vue?Token過(guò)期問(wèn)題的2種解決方案,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue運(yùn)行環(huán)境搭建全過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了前端必知必會(huì)之Vue?$emit()方法的相關(guān)資料,Vue.js中的$emit()方法用于在子組件中創(chuàng)建自定義事件,并在父組件中捕獲這些事件,這在需要從子組件向父組件傳遞信息的大型項(xiàng)目中非常有用,需要的朋友可以參考下2025-02-02
使用Vue寫(xiě)一個(gè)datepicker的示例
這篇文章主要介紹了使用Vue寫(xiě)一個(gè)datepicker的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要介紹了vue3?使用defineExpose的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-03-03
Vue.js實(shí)現(xiàn)一個(gè)todo-list的上移下移刪除功能
這篇文章主要介紹了Vue.js實(shí)現(xiàn)一個(gè)todo-list的上移下移刪除功能,需要的朋友可以參考下2017-06-06
Vue源碼學(xué)習(xí)之?dāng)?shù)據(jù)初始化
這篇文章主要為大家介紹了Vue源碼學(xué)習(xí)之?dāng)?shù)據(jù)初始化實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了vue-cli使用rem,vue自適應(yīng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue自定義實(shí)現(xiàn)計(jì)算器組件(附完整代碼)
這篇文章主要為大家詳細(xì)介紹了如何使用Vue自定義實(shí)現(xiàn)一個(gè)計(jì)算器組件,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下2025-06-06