小程序如何引入外部字体（方法详解）
今天做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/ 网站里 上传字体，选择base64 编吗 ，fotmat后下载 。
- 下载包里有个 style文件 打开后 代码可以添加到WXSS里 。
步奏
选中
终于实现了，效果如图
文字效果
如有疑问，错误 ，请共同交流学习.
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.06.13 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读