国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

微信小程序引入字體圖標(biāo)

doodlewind / 1411人閱讀

摘要：小程序與平常開發(fā)中引入字體圖標(biāo)的方式不一樣，必須先轉(zhuǎn)為再引入，以阿里巴巴字體圖標(biāo)為例一去官網(wǎng)下載想要的圖標(biāo)將想要的圖標(biāo)添加入庫進(jìn)入購物車下載代碼下載成功后，將得到一個名為的文件，然后解壓得到這么一堆文件二轉(zhuǎn)換文件為推薦去轉(zhuǎn)換配置選項(xiàng)，將配置

小程序與平常web開發(fā)中引入字體圖標(biāo)的方式不一樣，必須先轉(zhuǎn)為base64再引入，以阿里巴巴字體圖標(biāo) http://iconfont.cn 為例：

一、去官網(wǎng) http://iconfont.cn 下載想要的圖標(biāo)

1.將想要的圖標(biāo)添加入庫：

2.進(jìn)入購物車

3.下載代碼

4.下載成功后，將得到一個名為 "download.zip" 的文件，然后解壓得到這么一堆文件：

二、轉(zhuǎn)換 ttf 文件為 base64

推薦去 https://transfonter.org 轉(zhuǎn)換

1.配置選項(xiàng)，將配置改為如下紅色框所示，并打開 Base64 encode 選項(xiàng)：

2.配置完選項(xiàng)，下一步就可以添加ttf文件開始轉(zhuǎn)換了：

3.選擇剛剛從阿里巴巴 http://iconfont.cn 下載后解壓出來一堆文件中的 ttf 文件：

4.轉(zhuǎn)換并下載：

5.下載成功后，得到一個名為 "transfonter.org" 開頭的壓縮包，解壓后得到三個文件，然后我們打開 "stylesheet.css" 文件:

三、在小程序中使用

1.新建一個小程序項(xiàng)目，成功后可以自己建一個 resource 文件夾用來放字體圖標(biāo)等資源，并在resource目錄下新建一個 "style.wxss" 的空白文件，這個wxss就是我們的字體圖標(biāo)文件：

2.打開新建的 style.wxss 空白文件，將轉(zhuǎn)換完成后下載下來的三個文件中 "stylesheet.css" 里面的內(nèi)容全部復(fù)制過來：

3.并將最開始從阿里巴巴下載下來解壓后的 "iconfont.css" 打開，把未打叉的部分全部復(fù)制到小程序新建的 "style.wxss" 中：

4.現(xiàn)在我們的 "style.wxss" 長這樣：

那現(xiàn)在可以直接使用了嗎？NO~ ，還需要添加如下一段代碼到 style.wxss 中：

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "iconfont" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: inherit;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

最終 style.wxss 如下 （注意兩個綠色框中的 font-family 要一致）：

5.全局引入字體圖標(biāo)，打開 "app.wxss" ，引入剛剛創(chuàng)建的 style.wxss，就可以全局使用了 :

6.全局使用

任意打開 pages 文件夾下的 .wxml 文件，像我們平常那樣使用就可以了（對應(yīng)的 class類名可以自定義，也可以在剛剛創(chuàng)建的 style.wxss 里面找，或者打開最開始從阿里巴巴下載的文件中，任意一個html文件，都有預(yù)覽和對應(yīng)的類名）：

自定義類名，先在剛剛創(chuàng)建的 style.wxss 修改為自定義的類名，然后在.wxml頁面中寫上對應(yīng)的類名即可：

style.wxss中：

.wxml頁面中：

style.wxss 中的類名：

打開任意一個html:

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/98431.html

相關(guān)文章

  • 微信小程序引入字體圖標(biāo)

    摘要：小程序與平常開發(fā)中引入字體圖標(biāo)的方式不一樣，必須先轉(zhuǎn)為再引入，以阿里巴巴字體圖標(biāo)為例一去官網(wǎng)下載想要的圖標(biāo)將想要的圖標(biāo)添加入庫進(jìn)入購物車下載代碼下載成功后，將得到一個名為的文件，然后解壓得到這么一堆文件二轉(zhuǎn)換文件為推薦去轉(zhuǎn)換配置選項(xiàng)，將配置 小程序與平常web開發(fā)中引入字體圖標(biāo)的方式不一樣，必須先轉(zhuǎn)為base64再引入，以阿里巴巴字體圖標(biāo) http://iconfont.cn 為例： ...

    mayaohua 評論0 收藏0

  • 微信小程序引入字體圖標(biāo)

    摘要：小程序與平常開發(fā)中引入字體圖標(biāo)的方式不一樣，必須先轉(zhuǎn)為再引入，以阿里巴巴字體圖標(biāo)為例一去官網(wǎng)下載想要的圖標(biāo)將想要的圖標(biāo)添加入庫進(jìn)入購物車下載代碼下載成功后，將得到一個名為的文件，然后解壓得到這么一堆文件二轉(zhuǎn)換文件為推薦去轉(zhuǎn)換配置選項(xiàng)，將配置 小程序與平常web開發(fā)中引入字體圖標(biāo)的方式不一樣，必須先轉(zhuǎn)為base64再引入，以阿里巴巴字體圖標(biāo) http://iconfont.cn 為例： ...

    hightopo 評論0 收藏0

  • 自己制作微信小程序使用base64字體圖標(biāo)

    摘要：問題微信小程序不能隨意使用網(wǎng)絡(luò)資源，如字體文件等不能在小程序中使用字體文件不能使用背景圖片定位來使用內(nèi)部圖片下面就介紹一下如何制作字體圖標(biāo)。簡易方式通過兩個在線工具，很容易地生成加密的字體圖標(biāo)。 問題： 1.微信小程序不能隨意使用網(wǎng)絡(luò)資源，如字體,css文件等 2.不能在小程序中使用字體文件 3.不能使用background-position背景圖片定位來使用內(nèi)部png圖片 下面就介紹...

    leon 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<