自定義圖標(biāo)及自定義字體，一直是很多小程序開(kāi)發(fā)者的心病，其實(shí)本站是很多解決方案的，為了集中起來(lái)，方便直接跳過(guò)此坑，我特別做了這次針對(duì)字體及字體圖標(biāo)的跳坑；

相關(guān)文章：
微信小程序添加并使用外部字體（成功添加到維吾爾語(yǔ)了...
新手跳坑指南《六十七》字體文件無(wú)法找到報(bào)404錯(cuò)誤
在微信小程序中使用字體圖標(biāo)/自定義字體/外部字體

相關(guān)插件：
微信小程序?qū)嵱媒M件：使用font-awesome字體，真機(jī)可用
微信小程序demo：bootstrap字體樣式使用

相關(guān)帖子：
小程序里面能用阿里字體圖標(biāo)嗎
微信小程序中怎么使用字體圖標(biāo)

相關(guān)討論：
Q：小程序開(kāi)發(fā)時(shí)能否使用我們自定義的字體圖標(biāo)。
A：自定義字體是支持的，但是需要使用線上字體，并且存放字體的服務(wù)器需要允許跨域。

相關(guān)討論一：字體文件無(wú)法加載，確認(rèn)文件是存在的

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('/assets/fonts/glyphicons-halflings-regular.eot');
  src: url('/assets/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('/assets/fonts/glyphicons-halflings-regular.woff') format('woff'), url('/assets/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('/assets/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

控制臺(tái)報(bào)錯(cuò)

VM884:2 Failed to load font http://1701630871.debug.open.wei ... flings-regular.woff : the server responded with a status of 404 (HTTP/1.1 404 Not Found)
From server 127.0.0.1

文件確實(shí)存在的，其他jpg/png圖片文件都沒(méi)問(wèn)題是bug，還是限制了這些文件類(lèi)型？
字體文件要放在網(wǎng)絡(luò)上請(qǐng)求。

相關(guān)討論二：小程序使用字體圖標(biāo)的方法分享原文鏈接

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

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

三、在wxss文件中引入!

四、在wxml加入字體!

相關(guān)討論二：直接引用不行，本地遠(yuǎn)程的都不行!

相關(guān)討論三：input更改字體無(wú)效第一個(gè)是textarea 第二個(gè)是input 第三個(gè)是text 用的是緬文, 已經(jīng)在app.wxss設(shè)置了@font-face 結(jié)果發(fā)現(xiàn)input無(wú)法設(shè)置字體

input 組件是一個(gè) native 組件，字體是系統(tǒng)字體，所以無(wú)法設(shè)置 font-family；

官方文檔有說(shuō)明

相關(guān)討論四：小程序里使用 iconfont，font-face的src能使用網(wǎng)絡(luò)地址嗎？

@font-face {
   font-family: 'fontello';
   src: url('http://cdn.example.com/iconfont.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
   line-height: 1;
}

發(fā)現(xiàn)src如果用網(wǎng)絡(luò)地址就不能在iOS上顯示，Android和開(kāi)發(fā)工具上是可以的。src用base64值則都是可以顯示的。
iOS要使用https的連接的

相關(guān)討論五：小程序可以使用font-awesome來(lái)做icon么？能不能用icon-font來(lái)做icon，如果不能話有什么好的方案來(lái)做icon？
可以， 字體放入到服務(wù)器， 遠(yuǎn)程地址引用就可以了， 例如：

@font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/xxx.eot?t=1482899691162'); /* IE9*/
  src: url('//at.alicdn.com/t/xxx.eot?t=1482899691162#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('//at.alicdn.com/t/xxx.woff?t=1482899691162') format('woff'), /* chrome, firefox */
  url('//at.alicdn.com/t/xxx.ttf?t=1482899691162') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/xxx.svg?t=1482899691162#iconfont') format('svg'); /* iOS 4.1- */
}