微信小程序中使用字体库_小程序使用自定义字体库-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序中使用字体库_小程序使用自定义字体库。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、使用前端字体库

小程序前端默认不支持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使用服务器连接,不使用本地连接。

更多：文章来源地址https://www.toymoban.com/news/detail-491045.html

到了这里，关于微信小程序中使用字体库_小程序使用自定义字体库的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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