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、在線字體的方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關文章
Vue3+Three.js實現(xiàn)為模型添加點擊事件
本文主要介紹了如何在Vue3和Three.js環(huán)境中為模型添加點擊事件監(jiān)聽,具體方法是利用Three.js的Vector2和Raycaster,首先,創(chuàng)建一個Vector2對象來獲取鼠標位置；然后,創(chuàng)建一個Raycaster對象來投射光線2024-10-10
Element UI是一個基于Vue 2.0的桌面端組件庫,旨在構建簡潔、快速的用戶界面,這篇文章主要介紹了Vue如何引入ElementUI并使用,需要的朋友可以參考下2024-06-06
本文通過實例代碼給大家介紹了vue中的無限循環(huán)，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09
vue基于Echarts的拖拽數(shù)據(jù)可視化功能實現(xiàn)
這篇文章主要給大家介紹了關于vue基于Echars的拖拽數(shù)據(jù)可視化功能實現(xiàn)的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
這篇文章主要給大家介紹了在Vue組件化中利用axios處理ajax請求的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面跟著小編來一起學習學習吧。2017-08-08
基于Vue組件化的日期聯(lián)動選擇器功能的實現(xiàn)代碼
這篇文章主要介紹了基于Vue組件化的日期聯(lián)動選擇器的實現(xiàn)代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
vue3 element-plus el-tree自定義圖標方式
這篇文章主要介紹了vue3 element-plus el-tree自定義圖標方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue項目中禁用瀏覽器緩存配置案例,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09
碰到一個問題,選擇框的數(shù)據(jù)是后端傳過來的,下拉框的數(shù)據(jù)也是后端傳過來的,但是打開下拉框時,發(fā)現(xiàn)數(shù)據(jù)沒有高亮,最后通過只要選擇框v-model給的值和option的value綁定的值一致,就可以高亮,感興趣的朋友一起看看吧2023-12-12
vue自定義組件實現(xiàn)v-model雙向綁定數(shù)據(jù)的實例代碼
vue中父子組件通信,都是單項的,直接在子組件中修改prop傳的值vue也會給出一個警告,接下來就用一個小列子一步一步實現(xiàn)了vue自定義的組件實現(xiàn)v-model雙向綁定,需要的朋友可以參考下2021-10-10