微信小程序中使用字体库_小程序使用自定义字体库

一、使用前端字体库

小程序前端默认不支持woff2/woff文件加载。但浏览器支持base64编码图片解析。

处理方案蒋woff2转码成base64编码即可。

自定义前端库使用阿里iconfont的即可：

iconfont-阿里巴巴矢量图标库

使用步骤如下：

1.下载字体库

2.引入css，文件名改成wxss

3.修改字体文件编码，添加到wxss文件中

使用工具

图片文件转Base64字符串，图片文件转DataURL - 微工具集
任意文件转base64-直接拖进来

4.项目中使用

app.wxss中引入：

@import "./style/common.wxss";
@import "./style/iconfont.wxss";
 
 
page{
	font-size:15px;
}
 

wxml中使用：

<view class="container">
 
 
	<text class="iconfont icon-play">text>
	
	<view>
		<icon class="iconfont icon-add">icon>
	view>
	
view>

预览效果：

二、使用服务器端字体库

使用服务器端的woff2/woff字体库，加载有延迟。

将woff2/woff文件，上传到自己的服务器上；

或者使用阿里iconfont的在线连接。

重点：

@font-face 的 url使用服务器连接,不使用本地连接。

更多：

小程序消息推送配置 Token校验失败，请检查确认

小程序支付管理-新版支付对接流程

小程序IOS安全区问题处理整理