小程序如何引入外部字体(方法详解)

今天做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里 。

步奏

选中

终于实现了,效果如图

文字效果

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏帘卷西风的专栏

使用Cmake生成跨平台项目编译解决方案

    项目最近有需求在windows下面运行,我花了几周时间将linux的服务器移植到windows下面,目前已经能够正常运行服务器,目前又有了新需求,两边的...

1852
来自专栏FreeBuf

浅谈一下mshta在CVE-2017-11882里的命令构造

Evi1cg同学前不久放出CVE-2017-11882的一个 python利用脚本,地址在https://github.com/Ridter/CVE-2017-...

2088
来自专栏Hadoop实操

7.如何在RedHat7的OpenLDAP中实现将一个用户添加到多个组

温馨提示:要看高清无码套图,请使用手机打开并单击图片放大查看。 Fayson的github:https://github.com/fayson/cdhproje...

3346
来自专栏计算机视觉

ubuntu命令以及深度学习的应用好文分享

深度学习在图像处理中的应用探讨 20个令人惊叹的深度学习应用(Demo+Paper+Code) 神经网络理解和入门 推荐~~~ ubuntu命令大全 创建...

3308

Web服务器压力测试工具Siege

Siege是一款HTTP压力测试和基准测试的实用工具,可用于在压力条件下对Web服务器的性能进行测量。它的评估依据包括传输数据量、服务器的响应时间、事务处理速率...

943
来自专栏前端儿

Webpack打包构建太慢了?试试几个方法

webpack支持监听模式,此时需要重新编译时就可以进行增量构建,增量构建是很快的,基本不到一秒或几秒之内就能重新编译好

1542
来自专栏木制robot技术杂谈

Tmux入门指南

前言 很多时候我们需要通过SSH连接服务器进行一些操作,费了好长时间调好了程序,一顿饭的功夫SSH超时了(broken pipe),重新连上去正在运行的程序也都...

3667
来自专栏漫漫深度学习路

tensorflow学习笔记(四十三):使用 tfdbg 来 debug

tensorflow学习笔记(四十三):使用 tfdbg 来 debug 由于 tensorflow 在训练的时候是在后台运行的,所以使用 python 的 d...

2515
来自专栏编程之旅

Vim——使用NerdTree来畅快的打开文件吧

在上一章我介绍完用Vundle来管理Vim中所有的插件后,今天我又要强推一个Vim的文件管理插件Nerdtree,相信所有使用Vim的同学都知道文件管理插件Ne...

1052
来自专栏卡少编程之旅

webpack4配置入门和进阶

1K12

扫码关注云+社区