微信小程序wxss如何引用外部CSS文件以及iconfont
起因
小程序引入外部文件的方式是：@import "*/*.wxss";
因?yàn)闃I(yè)務(wù)需要，正在開發(fā)的小程序中需要使用iconfont，很容易想到了H5的引入方式：
````
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1485242349767'); /* IE9*/
src: url('iconfont.eot?t=1485242349767#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff?t=1485242349767') format('woff'), /* chrome, firefox */
url('iconfont.ttf?t=1485242349767') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1485242349767#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
````
因?yàn)榇硕蝐ss樣式是通用的，就把它放在了lib/style/font.wxss中，此時(shí)文件目錄如下：
通過@import 的方式引入到需要用到的文件里，但是并沒有效果。
原因：小程序的wxss文件font-face的url不接受http地址作為參數(shù),可以接受base64,因此可以先將字體文件下載后,轉(zhuǎn)換為base64，然后引用。
解決方案如下：
一、先到阿里巴巴矢量圖標(biāo)庫(http://iconfont.cn/)生成自己的字體圖標(biāo)，并下載下來，找到ttf格式文件
二、到這個(gè)平臺(tái)https://transfonter.org/，把字體文件轉(zhuǎn)化成base64格式
三、在lib文件中引入
四、在wxss加入字體
五、顯示效果
總結(jié)
到此這篇關(guān)于微信小程序wxss如何引用外部CSS文件以及iconfont的文章就介紹到這了,更多相關(guān)小程序wxss引用外部文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js中settimeout方法加參數(shù)的使用實(shí)例
這篇文章主要介紹了js中settimeout方法加參數(shù)的使用,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了JavaScript獲取瀏覽器信息及獲取瀏覽器地址和參數(shù)的方法的相關(guān)資料,需要的朋友可以參考下2015-11-11
淺談如何優(yōu)雅處理JavaScript異步錯(cuò)誤
這篇文章主要介紹了淺談如何優(yōu)雅處理JavaScript異步錯(cuò)誤，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了微信小程序模板template簡單用法,結(jié)合實(shí)例形式分析了微信小程序模板template的功能、簡單使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-12-12
js判斷iframe內(nèi)的網(wǎng)頁是否滾動(dòng)到底部觸發(fā)事件
這篇文章主要介紹了js判斷iframe內(nèi)的網(wǎng)頁是否滾動(dòng)到底部觸發(fā)事件,需要的朋友可以參考下2014-03-03
使用原生的javascript來實(shí)現(xiàn)輪播圖
這篇文章主要介紹了使用原生的javascript來實(shí)現(xiàn)輪播圖,在代碼底部給大家補(bǔ)充了原生javascript實(shí)現(xiàn)banner圖自動(dòng)輪播切換 ，需要的朋友可以參考下2017-02-02
JS實(shí)現(xiàn)將人民幣金額轉(zhuǎn)換為大寫的示例代碼
本篇文章主要是對(duì)使用JS實(shí)現(xiàn)將人民幣金額轉(zhuǎn)換為大寫的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-02-02
這篇文章主要介紹了原生JS與JQ獲取元素的區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
laydate 顯示結(jié)束時(shí)間不小于開始時(shí)間的實(shí)例
下面小編就為大家?guī)硪黄猯aydate 顯示結(jié)束時(shí)間不小于開始時(shí)間的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
關(guān)于 byval 與 byref 的區(qū)別分析總結(jié)
關(guān)于 byval 與 byref 的區(qū)別分析總結(jié)...2007-10-10