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

今天做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 条评论
登录 后参与评论

相关文章

来自专栏程序员互动联盟

【编程入门】互联网的本质技术

首先要知道网站访问大概是什么个过程: 假设你在浏览器地址栏输入这个问题的地址 http://www.zhihu.com/question/22689579 访问...

482110
来自专栏知晓程序

开发 | 如何为你的微信小程序体积瘦身?

众所周知,微信小程序在发布的时候,对提交的代码有 2 MB 大小的限制。所以,如果你正在写一个功能稍微复杂一点的小程序,就必须得时刻小心注意你的代码是不是快触及...

11920
来自专栏速成应用小程序开发平台

新手教程|速成应用教你如何制作搭建自己的微信小程序

微信小程序已经迈入了爆发阶段,很多中小企业和商户正在不断涌入这个市场。但是很多不懂技术不懂代码的小白却不知道去哪里制作微信小程序,现在就以可视化小程序开发工具「...

2.5K50
来自专栏Web 开发

Deploy WordPress On SAE

也没怎么刻意去选择,从各种cPanel主机,到VPS,再到AppFog等Pass,基本上都玩了一遍了。

10100
来自专栏DeveWork

为WordPress 评论框添加HTML5 表单验证

WordPress 中最常用到的表单莫过于评论框了,但现在不少的WordPress 主题(包括WordPress官方的主题),其表单验证其实是借助javascr...

404100
来自专栏QQ会员技术团队的专栏

一起脱去小程序的外套和内衣:微信小程序架构解析

微信小程序的公测掀起了学习小程序开发的浪潮,天生跨平台,即用即走、媲美原生体验、完善的文档、高效的开发框架,小程序给开发者带来了很多惊喜。通过这篇文章和大家一起...

5.9K30
来自专栏知晓程序

想在小程序中快速部署富文本?这个插件让你一步搞定

23830
来自专栏FD的专栏

React 中引入 Angular 组件

为了在我的编辑器中使用 Angular,我用 Angular 编写了一个重命名功能。而为了使用它,我得再次使用一次 customEvent,而在这个微前端架构的...

10830
来自专栏Albert陈凯

如何复制 Intellij idea 的错误提示信息

IDEA的错误提示问题,鼠标移动上去后会有黄色/红色框提示,如何固定这个框,像Eclipse那样可以复制错误提示? 很明显,这是非常不容易做到的,因为鼠标一移动...

48430
来自专栏编程

Python2下载单张图片和爬取网页图片

昨天用Python2爬取了一首歌的热评和评论总数,今天用Python2来下载图片。 一、需求分析 1、知道图片的url地址,将图片下载到本地。 2、知道网页地址...

28890

扫码关注云+社区

领取腾讯云代金券