微信小程序自定義字體及自定義圖標問題說明

自定義圖標及自定義字體，一直是不少小程序開發者的心病，其實本站是不少解決方案的，爲了集中起來，方便直接跳過此坑，我特別作了此次針對字體及字體圖標的跳坑；

相關文章：
微信小程序添加並使用外部字體（成功添加到維吾爾語了...
新手跳坑指南《六十七》字體文件沒法找到報404錯誤
在微信小程序中使用字體圖標/自定義字體/外部字體

相關插件：
微信小程序實用組件：使用font-awesome字體，真機可用
微信小程序demo：bootstrap字體樣式使用

相關帖子：
小程序裏面能用阿里字體圖標嗎
微信小程序中怎麼使用字體圖標

相關討論：
Q：小程序開發時可否使用咱們自定義的字體圖標。
A：自定義字體是支持的，可是須要使用線上字體，而且存放字體的服務器須要容許跨域。

相關討論一：
字體文件沒法加載，確認文件是存在的

@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');
}

控制檯報錯

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

文件確實存在的，其餘jpg/png圖片文件都沒問題
是bug，仍是限制了這些文件類型？

字體文件要放在網絡上請求。

相關討論二：
小程序使用字體圖標的方法分享：原文連接
1、先到阿里巴巴矢量圖標庫(http://iconfont.cn/)生成本身的字體圖標，並下載下來，找到ttf格式文件

2、到這個平臺https://transfonter.org/，把字體文件轉化成base64格式

3、在wxss文件中引入

4、在wxml加入字體

5、顯示效果

相關討論二：
直接引用不行，本地遠程的都不行

相關討論三：input更改字體無效第一個是textarea 第二個是input 第三個是text 用的是緬文, 已經在app.wxss設置了@font-face 結果發現input沒法設置字體

input 組件是一個 native 組件，字體是系統字體，因此沒法設置 font-family；

官方文檔有說明

相關討論四：
小程序裏使用 iconfont，font-face的src能使用網絡地址嗎？

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

發現src若是用網絡地址就不能在iOS上顯示，Android和開發工具上是能夠的。src用base64值則都是能夠顯示的。

iOS要使用https的鏈接的

相關討論五：
小程序可使用font-awesome來作icon麼？能不能用icon-font來作icon，若是不能話有什麼好的方案來作icon？

能夠， 字體放入到服務器， 遠程地址引用就能夠了， 例如：

@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- */
}