小程序如何引入外部字体（方法详解）

今天做app时，用到了外部字体，很简单的就是把TTF文件放在工程下，生出来个疑问，小程序如何引入外部字体呢？百度一下 发现比较好用的字体图标库，1.阿里巴巴矢量图标库，2.http://transfonter.org/

一.阿里巴巴矢量图标库
1.进入网站 登录，注册。
2.图标管理---->我的项目------>新建项目

新建项目
3.在首页选择需要的字体图标添加到购物车
4.在右上角购物车内,将所选图标添加到项目中 代码

5.接下来是关于小程序的了，我们先在小程序中建一个公共的.wxss文件，
a. 选择在线代码则.wxss文件代码为：

@font-face {
  font-family: 'iconfont';  /* project id 706844 */
  src: url('//at.alicdn.com/t/font_706844_l7ysdcmfr3e.eot');
  src: url('//at.alicdn.com/t/font_706844_l7ysdcmfr3e.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_706844_l7ysdcmfr3e.woff') format('woff'),
  url('//at.alicdn.com/t/font_706844_l7ysdcmfr3e.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_706844_l7ysdcmfr3e.svg#iconfont') format('svg');
}
.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

b. 下载至本地，打开下载后的文件如图

打开选中的文件

.wxss文件的代码

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1528889671378'); /* IE9*/
  src: url('iconfont.eot?t=1528889671378#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=1528889671378') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1528889671378#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;
}

.icon-Facetime:before { content: "\e659"; }

.icon-duanxin:before { content: "\e65c"; }

.icon-dianhua:before { content: "\e65d"; }//这三个代表图标

接下来就是引用文件了，如果你想在单独的某一页引用， 引用公共类.wxss

 @import "../../utils/font.wxss"; 

再通过引用的方式加载

<text class='iconfont icon-Facetime'>地址</text>

二.http://transfonter.org/

1. 先外部字体准备好.
2. http://transfonter.org/ 网站里 上传字体，选择base64 编吗 ，fotmat后下载 。

3. 下载包里有个 style文件 打开后 代码可以添加到WXSS里 。

   
   步奏

选中

终于实现了，效果如图

文字效果

方法三，微信提供了wx.loadFontFace(OBJECT)（动态加载字）如图：

官方文档

wx.loadFontFace({
  family: 'Bitstream Vera Serif Bold',
  source: 'url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf")',
  success: function(res) {
    console.log(res.status) //  loaded
  },
  fail: function(res) {
    console.log(res.status) //  error
  },
  complete: function(res) {
    console.log(res.status);
  }
});

如有疑问，错误 ，请共同交流学习.