vue 引用自定義ttf、otf、在線字體的方法
更新時間：2019年05月09日 10:07:00 作者：stu_yiliang
這篇文章主要介紹了vue 引用自定義ttf、otf、在線字體的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
1. 將下載好的字體放到本地目錄
分別是兩種字體
放到項目的 assets 目錄中
2. 引入字體文件
首先創(chuàng)建一個 styles 文件夾，之后也可以用于存放一些公共的樣式文件。再新建一個 index.less 文件，引入字體。
@font-face {
font-family: Snickles;
src: url('../assets/Snickles-webfont.ttf');
}
@font-face {
font-family: Ronda;
src: url('../assets/RondaITCbyBT-Roman.otf');
}
3. 在項目中（main.js）引入剛剛加載進來的字體
4. 測試
效果圖：
效果圖：
總結(jié)
以上所述是小編給大家介紹的vue 引用自定義ttf、otf、在線字體的方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
在本篇文章里小編給大家整理了一篇關(guān)于Vue首屏性能優(yōu)化組件知識點總結(jié)，有需要的朋友們可以跟著學(xué)習(xí)下。2021-11-11
vue中的el-form表單rule校驗問題(特殊字符、中文、數(shù)字等)
這篇文章主要介紹了vue中的el-form表單rule校驗問題(特殊字符、中文、數(shù)字等)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue3組合API中setup、 ref、reactive的使用大全
本文給大家介紹vue3組合API中setup、 ref、reactive的用法，初步了解reactive的使用及具體用法，通過示例代碼給大家介紹的非常詳細，需要的朋友參考下吧2021-06-06
淺談Vue3.0新版API之composition-api入坑指南
這篇文章主要介紹了Vue3.0新版API之composition-api入坑指南，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Vue.js 2.0 移動端拍照壓縮圖片預(yù)覽及上傳實例
這篇文章主要介紹了Vue.js 2.0 移動端拍照壓縮圖片預(yù)覽及上傳實例，本來移動端開發(fā)H5應(yīng)用，準備將mui框架和Vue.js+vue-router+vuex 全家桶結(jié)合起來使用2017-04-04
vue中keep-alive組件實現(xiàn)多級嵌套路由的緩存
本文主要介紹了vue中keep-alive組件實現(xiàn)多級嵌套路由的緩存，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue中Layout內(nèi)部布局el-row、el-col的實現(xiàn)
layout是一種非常方便的布局方式,本文主要介紹了Vue中Layout內(nèi)部布局el-row、el-col的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-07-07
vue.js數(shù)據(jù)響應(yīng)式原理解析
這篇文章主要介紹了vue.js數(shù)據(jù)響應(yīng)式原理解析，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-08-08
這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)文章評論和回復(fù)評論功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單的分頁功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03