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. 測試
效果圖：
效果圖：
總結
以上所述是小編給大家介紹的vue 引用自定義ttf、otf、在線字體的方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
在本篇文章里小編給大家整理了一篇關于Vue首屏性能優(yōu)化組件知識點總結，有需要的朋友們可以跟著學習下。2021-11-11
vue中的el-form表單rule校驗問題(特殊字符、中文、數字等)
這篇文章主要介紹了vue中的el-form表單rule校驗問題(特殊字符、中文、數字等)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教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入坑指南，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要介紹了Vue.js 2.0 移動端拍照壓縮圖片預覽及上傳實例，本來移動端開發(fā)H5應用，準備將mui框架和Vue.js+vue-router+vuex 全家桶結合起來使用2017-04-04
本文主要介紹了vue中keep-alive組件實現多級嵌套路由的緩存，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue中Layout內部布局el-row、el-col的實現
layout是一種非常方便的布局方式,本文主要介紹了Vue中Layout內部布局el-row、el-col的實現,具有一定的參考價值,感興趣的可以了解一下2024-07-07
這篇文章主要介紹了vue.js數據響應式原理解析，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-08-08
這篇文章主要為大家詳細介紹了Vue.js實現文章評論和回復評論功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要為大家詳細介紹了vue實現簡單的分頁功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03