小程序中引用icon-font

##簡(jiǎn)介

icon適量字體,能夠適應(yīng)各種尺寸而不失真,在小程序中使用icon-font字體。

font-family 外部字體引用,需要將ttf字體轉(zhuǎn)換

字體轉(zhuǎn)換地址:http://transfonter.org

字體下載地址:https://www.1001freefonts.com

圖片轉(zhuǎn)碼地址:http://tool.chinaz.com/tools/imgtobase

圖片壓縮地址:https://imagecompressor.com/zh

? ? ? ? ? ? ? ? ? ? ? ? ? ?https://tinypng.com

## 直奔主題

### 下載字體文件

使用 阿里?http://www.iconfont.cn 字體文件。下載后。


圖1-字體文件

###引用字體

將文件iconfont.css引入文件即可

```

<text class="confront icon-close-x"></text>

/* 引入的字體信息 ?*/

.iconfont {

? font-family:"iconfont" !important;

? font-size:16px;

? font-style:normal;

? -webkit-font-smoothing: antialiased;

? -moz-osx-font-smoothing: grayscale;

}

/* 引入的字體內(nèi)容 ?*/

@font-face {font-family: "iconfont";

? src: url('iconfont.eot?t=1528356536113'); /* IE9*/

? src: url('iconfont.eot?t=1528356536113#iefix') format('embedded-opentype'), /* IE6-IE8 */

? url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),

? url('iconfont.ttf?t=1528356536113') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/

? url('iconfont.svg?t=1528356536113#iconfont') format('svg'); /* iOS 4.1- */

}

```

說明,小程序中必須引用兩部分

```

@font-face {font-family: "iconfont";

? ? src: url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAABBwAAsAAAAAGOAAAQ......+NLSaQTBVHqDivVO3A=') format('woff'),

url('iconfont.svg?t=1528356536113#iconfont') format('svg'); /* iOS 4.1- */

```

###引用字體

```

```

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 學(xué)會(huì)使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握CSS三種顯示...
    七彩小鹿閱讀 6,445評(píng)論 2 66
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,125評(píng)論 1 92
  • FontAwesome經(jīng)歷了兩年的進(jìn)化,如今已成為不少工具性應(yīng)用開發(fā)者的首選。但FontAwesome的圖標(biāo)畢竟有...
    witmin閱讀 20,210評(píng)論 5 86
  • 懷二胎,我就已經(jīng)知道,跟懷第一個(gè)孩子的時(shí)候是完全不同的兩個(gè)狀態(tài),雖然都是在家里休息養(yǎng)胎,但是內(nèi)心活動(dòng)卻完全不...
    小小木哥閱讀 498評(píng)論 0 0
  • 我有一個(gè)弟弟 不愛讀書愛打游戲不愛學(xué)習(xí)愛去網(wǎng)吧 他小時(shí)候明明很乖很可愛很聽話的 可是長(zhǎng)大后卻越發(fā)叛逆了 我總覺得這...
    玻璃橘子閱讀 240評(píng)論 0 0

友情鏈接更多精彩內(nèi)容