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