資訊專欄INFORMATION COLUMN
摘要：小程序與平常開(kāi)發(fā)中引入字體圖標(biāo)的方式不一樣，必須先轉(zhuǎn)為再引入，以阿里巴巴字體圖標(biāo)為例一去官網(wǎng)下載想要的圖標(biāo)將想要的圖標(biāo)添加入庫(kù)進(jìn)入購(gòu)物車下載代碼下載成功后，將得到一個(gè)名為的文件，然后解壓得到這么一堆文件二轉(zhuǎn)換文件為推薦去轉(zhuǎn)換配置選項(xiàng)，將配置
小程序與平常web開(kāi)發(fā)中引入字體圖標(biāo)的方式不一樣，必須先轉(zhuǎn)為base64再引入，以阿里巴巴字體圖標(biāo) http://iconfont.cn 為例：
一、去官網(wǎng) http://iconfont.cn 下載想要的圖標(biāo)
1.將想要的圖標(biāo)添加入庫(kù)：
2.進(jìn)入購(gòu)物車
3.下載代碼
4.下載成功后，將得到一個(gè)名為 "download.zip" 的文件，然后解壓得到這么一堆文件：
二、轉(zhuǎn)換 ttf 文件為 base64
推薦去 https://transfonter.org 轉(zhuǎn)換
1.配置選項(xiàng)，將配置改為如下紅色框所示，并打開(kāi) Base64 encode 選項(xiàng)：
2.配置完選項(xiàng)，下一步就可以添加ttf文件開(kāi)始轉(zhuǎn)換了：
3.選擇剛剛從阿里巴巴 http://iconfont.cn 下載后解壓出來(lái)一堆文件中的 ttf 文件：
4.轉(zhuǎn)換并下載：
5.下載成功后，得到一個(gè)名為 "transfonter.org" 開(kāi)頭的壓縮包，解壓后得到三個(gè)文件，然后我們打開(kāi) "stylesheet.css" 文件:
三、在小程序中使用
1.新建一個(gè)小程序項(xiàng)目，成功后可以自己建一個(gè) resource 文件夾用來(lái)放字體圖標(biāo)等資源，并在resource目錄下新建一個(gè) "style.wxss" 的空白文件，這個(gè)wxss就是我們的字體圖標(biāo)文件：
2.打開(kāi)新建的 style.wxss 空白文件，將轉(zhuǎn)換完成后下載下來(lái)的三個(gè)文件中 "stylesheet.css" 里面的內(nèi)容全部復(fù)制過(guò)來(lái)：
3.并將最開(kāi)始從阿里巴巴下載下來(lái)解壓后的 "iconfont.css" 打開(kāi)，把未打叉的部分全部復(fù)制到小程序新建的 "style.wxss" 中：
4.現(xiàn)在我們的 "style.wxss" 長(zhǎng)這樣：
那現(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 如下 （注意兩個(gè)綠色框中的 font-family 要一致）：
5.全局引入字體圖標(biāo)，打開(kāi) "app.wxss" ，引入剛剛創(chuàng)建的 style.wxss，就可以全局使用了 :
6.全局使用
任意打開(kāi) pages 文件夾下的 .wxml 文件，像我們平常那樣使用就可以了（對(duì)應(yīng)的 class類名可以自定義，也可以在剛剛創(chuàng)建的 style.wxss 里面找，或者打開(kāi)最開(kāi)始從阿里巴巴下載的文件中，任意一個(gè)html文件，都有預(yù)覽和對(duì)應(yīng)的類名）：
自定義類名，先在剛剛創(chuàng)建的 style.wxss 修改為自定義的類名，然后在.wxml頁(yè)面中寫上對(duì)應(yīng)的類名即可：
style.wxss中：
.wxml頁(yè)面中：
style.wxss 中的類名：
打開(kāi)任意一個(gè)html:
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/53076.html
摘要：小程序與平常開(kāi)發(fā)中引入字體圖標(biāo)的方式不一樣，必須先轉(zhuǎn)為再引入，以阿里巴巴字體圖標(biāo)為例一去官網(wǎng)下載想要的圖標(biāo)將想要的圖標(biāo)添加入庫(kù)進(jìn)入購(gòu)物車下載代碼下載成功后，將得到一個(gè)名為的文件，然后解壓得到這么一堆文件二轉(zhuǎn)換文件為推薦去轉(zhuǎn)換配置選項(xiàng)，將配置 小程序與平常web開(kāi)發(fā)中引入字體圖標(biāo)的方式不一樣，必須先轉(zhuǎn)為base64再引入，以阿里巴巴字體圖標(biāo) http://iconfont.cn 為例： ...
摘要：小程序與平常開(kāi)發(fā)中引入字體圖標(biāo)的方式不一樣，必須先轉(zhuǎn)為再引入，以阿里巴巴字體圖標(biāo)為例一去官網(wǎng)下載想要的圖標(biāo)將想要的圖標(biāo)添加入庫(kù)進(jìn)入購(gòu)物車下載代碼下載成功后，將得到一個(gè)名為的文件，然后解壓得到這么一堆文件二轉(zhuǎn)換文件為推薦去轉(zhuǎn)換配置選項(xiàng)，將配置 小程序與平常web開(kāi)發(fā)中引入字體圖標(biāo)的方式不一樣，必須先轉(zhuǎn)為base64再引入，以阿里巴巴字體圖標(biāo) http://iconfont.cn 為例： ...
摘要：?jiǎn)栴}微信小程序不能隨意使用網(wǎng)絡(luò)資源，如字體文件等不能在小程序中使用字體文件不能使用背景圖片定位來(lái)使用內(nèi)部圖片下面就介紹一下如何制作字體圖標(biāo)。簡(jiǎn)易方式通過(guò)兩個(gè)在線工具，很容易地生成加密的字體圖標(biāo)。 問(wèn)題： 1.微信小程序不能隨意使用網(wǎng)絡(luò)資源，如字體,css文件等 2.不能在小程序中使用字體文件 3.不能使用background-position背景圖片定位來(lái)使用內(nèi)部png圖片 下面就介紹...
閱讀 1007·2021-11-15 18:06
閱讀 2371·2021-10-08 10:04
閱讀 2657·2019-08-28 18:03
閱讀 906·2019-08-26 13:42
閱讀 1924·2019-08-26 11:31
閱讀 2432·2019-08-23 17:13
閱讀 934·2019-08-23 16:45
閱讀 2060·2019-08-23 14:11
