自定義圖標(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蛉腌，還是限制了這些文件類型？
字體文件要放在網(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- */
}
