欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue 引用自定義ttf、otf、在線字體的方法

 更新時(shí)間：2019年05月09日 10:07:00   作者：stu_yiliang  
這篇文章主要介紹了vue 引用自定義ttf、otf、在線字體的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

 1. 將下載好的字體放到本地目錄

分別是兩種字體


在這里插入圖片描述

放到項(xiàng)目的 assets 目錄中


在這里插入圖片描述

2. 引入字體文件

首先創(chuàng)建一個(gè) styles 文件夾，之后也可以用于存放一些公共的樣式文件。再新建一個(gè) 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. 在項(xiàng)目中（main.js）引入剛剛加載進(jìn)來(lái)的字體

在這里插入圖片描述

4. 測(cè)試

在這里插入圖片描述

效果圖：


在這里插入圖片描述

在這里插入圖片描述

效果圖：


在這里插入圖片描述

總結(jié)

以上所述是小編給大家介紹的vue 引用自定義ttf、otf、在線字體的方法,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

相關(guān)文章

最新評(píng)論