【微信小程序】——wxss引用外部CSS文件及iconfont

小程序引入外部文件的方式是：@import "*/*.wxss";

由於業務須要，正在開發的小程序中須要使用iconfont，很容易想到了H5的引入方式：

````

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

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

````

由於此段css樣式是通用的，就把它放在了lib/style/font.wxss中，此時文件目錄以下：

經過@import 的方式引入到須要用到的文件裏，可是並無效果。

緣由：小程序的wxss文件font-face的url不接受http地址做爲參數,能夠接受base64,所以能夠先將字體文件下載後,轉換爲base64，而後引用。

解決方案以下：

1、先到阿里巴巴矢量圖標庫(http://iconfont.cn/)生成本身的字體圖標，並下載下來，找到ttf格式文件

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

3、在lib文件中引入

4、在wxss加入字體

5、顯示效果