微信小程序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í)文件目錄如下：
通過(guò)@import 的方式引入到需要用到的文件里，但是并沒(méi)有效果。
原因：小程序的wxss文件font-face的url不接受http地址作為參數(shù),可以接受base64,因此可以先將字體文件下載后,轉(zhuǎn)換為base64，然后引用。
解決方案如下：
一、先到阿里巴巴矢量圖標(biāo)庫(kù)(http://iconfont.cn/)生成自己的字體圖標(biāo)，并下載下來(lái)，找到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)文章
這篇文章主要給大家深入的介紹了JavaScript中的for循環(huán)，其中包括ES5中的三種for循環(huán)，分別是簡(jiǎn)單for循環(huán)、for-in以及forEach，另外還詳細(xì)介紹了ES6新增的一種循環(huán)：for-of ，有需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-02-02
激活 ActiveX 控件...2006-10-10
JS實(shí)現(xiàn)點(diǎn)擊鏈接取消跳轉(zhuǎn)效果的方法
有時(shí)候我們僅僅希望將鏈接<a>作為一個(gè)按鈕使用，但是在默認(rèn)狀態(tài)下，點(diǎn)擊鏈接會(huì)出現(xiàn)跳轉(zhuǎn)效果，下面就通過(guò)代碼實(shí)例，介紹一下如何實(shí)現(xiàn)此效果2014-01-01
js利用canvas制作一個(gè)實(shí)時(shí)時(shí)鐘
Canvas是HTML5中強(qiáng)大的繪圖工具,它讓我們能夠在網(wǎng)頁(yè)上創(chuàng)建各種精美的圖形和動(dòng)畫效果,本文將向您展示如何使用Canvas制作一個(gè)實(shí)時(shí)時(shí)鐘,感興趣的可以了解下2023-08-08
javascript面向?qū)ο笕筇卣髦庋b實(shí)例詳解
這篇文章主要介紹了javascript面向?qū)ο笕筇卣髦庋b,簡(jiǎn)單描述了封裝的基本概念、原理,并結(jié)合實(shí)例形式詳細(xì)分析了javascript面向?qū)ο蟪绦蛟O(shè)計(jì)中封裝的用法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-07-07
js合并兩個(gè)數(shù)組生成合并后的key：value數(shù)組
這篇文章主要是介紹了js將兩個(gè)數(shù)組合并為類json方式,需要的朋友可以參考下2018-05-05
本文主要介紹了TypeScript數(shù)據(jù)類型，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
詳解微信小程序input標(biāo)簽正則初體驗(yàn)
這篇文章主要介紹了詳解微信小程序input標(biāo)簽正則初體驗(yàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
javascript和php使用ajax通信傳遞JSON的實(shí)例
今天小編就為大家分享一篇javascript和php使用ajax通信傳遞JSON的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了JS 實(shí)現(xiàn)微信掃一掃功能,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09