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

天马3798

已于 2022-09-17 09:44:43 修改

阅读量3.5k

点赞数 2

分类专栏：微信小程序文章标签：微信小程序前端小程序微信小程序中使用字体库小程序使用自定义字体库

于 2022-09-16 16:42:29 首次发布

本文链接：https://blog.csdn.net/u011127019/article/details/126893170

版权

31 篇文章 5 订阅

订阅专栏

一、使用前端字体库

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

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

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

使用步骤如下：

1.下载字体库

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

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

使用工具

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使用服务器连接,不使用本地连接。

关注