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

微信小程序wxss如何引用外部CSS文件以及iconfont

 更新時間：2021年03月10日 10:57:45   作者：iaofy  
這篇文章主要給大家介紹了關(guān)于微信小程序wxss如何引用外部CSS文件以及iconfont的相關(guān)資料，文中通過圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

起因

小程序引入外部文件的方式是：@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中，此時文件目錄如下：

通過@import 的方式引入到需要用到的文件里，但是并沒有效果。

原因：小程序的wxss文件font-face的url不接受http地址作為參數(shù),可以接受base64,因此可以先將字體文件下載后,轉(zhuǎn)換為base64，然后引用。

解決方案如下：

一、先到阿里巴巴矢量圖標(biāo)庫(http://iconfont.cn/)生成自己的字體圖標(biāo)，并下載下來，找到ttf格式文件

二、到這個平臺https://transfonter.org/，把字體文件轉(zhuǎn)化成base64格式

三、在lib文件中引入

四、在wxss加入字體

五、顯示效果

總結(jié)

到此這篇關(guān)于微信小程序wxss如何引用外部CSS文件以及iconfont的文章就介紹到這了,更多相關(guān)小程序wxss引用外部文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • 深入理解JavaScript中的for循環(huán)

    深入理解JavaScript中的for循環(huán)

    這篇文章主要給大家深入的介紹了JavaScript中的for循環(huán)，其中包括ES5中的三種for循環(huán)，分別是簡單for循環(huán)、for-in以及forEach，另外還詳細(xì)介紹了ES6新增的一種循環(huán)：for-of ，有需要的朋友可以參考借鑒，下面來一起看看吧。
    2017-02-02
  • 激活 ActiveX 控件

    激活 ActiveX 控件

    激活 ActiveX 控件...
    2006-10-10
  • JS實(shí)現(xiàn)點(diǎn)擊鏈接取消跳轉(zhuǎn)效果的方法

    JS實(shí)現(xiàn)點(diǎn)擊鏈接取消跳轉(zhuǎn)效果的方法

    有時候我們僅僅希望將鏈接<a>作為一個按鈕使用，但是在默認(rèn)狀態(tài)下，點(diǎn)擊鏈接會出現(xiàn)跳轉(zhuǎn)效果，下面就通過代碼實(shí)例，介紹一下如何實(shí)現(xiàn)此效果
    2014-01-01
  • js利用canvas制作一個實(shí)時時鐘

    js利用canvas制作一個實(shí)時時鐘

    Canvas是HTML5中強(qiáng)大的繪圖工具,它讓我們能夠在網(wǎng)頁上創(chuàng)建各種精美的圖形和動畫效果,本文將向您展示如何使用Canvas制作一個實(shí)時時鐘,感興趣的可以了解下
    2023-08-08
  • javascript面向?qū)ο笕筇卣髦庋b實(shí)例詳解

    javascript面向?qū)ο笕筇卣髦庋b實(shí)例詳解

    這篇文章主要介紹了javascript面向?qū)ο笕筇卣髦庋b,簡單描述了封裝的基本概念、原理,并結(jié)合實(shí)例形式詳細(xì)分析了javascript面向?qū)ο蟪绦蛟O(shè)計(jì)中封裝的用法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
    2019-07-07
  • js合并兩個數(shù)組生成合并后的key：value數(shù)組

    js合并兩個數(shù)組生成合并后的key：value數(shù)組

    這篇文章主要是介紹了js將兩個數(shù)組合并為類json方式,需要的朋友可以參考下
    2018-05-05
  • 一文了解TypeScript數(shù)據(jù)類型

    一文了解TypeScript數(shù)據(jù)類型

    本文主要介紹了TypeScript數(shù)據(jù)類型，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-07-07
  • 詳解微信小程序input標(biāo)簽正則初體驗(yàn)

    詳解微信小程序input標(biāo)簽正則初體驗(yàn)

    這篇文章主要介紹了詳解微信小程序input標(biāo)簽正則初體驗(yàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • javascript和php使用ajax通信傳遞JSON的實(shí)例

    javascript和php使用ajax通信傳遞JSON的實(shí)例

    今天小編就為大家分享一篇javascript和php使用ajax通信傳遞JSON的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • JS 實(shí)現(xiàn)微信掃一掃功能

    JS 實(shí)現(xiàn)微信掃一掃功能

    這篇文章主要介紹了JS 實(shí)現(xiàn)微信掃一掃功能,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
    2018-09-09

最新評論