微信小程序使用自定义字体的三种方法

2024-06-04 08:52:36

一、loadFontFace接口

小程序官方提供的接口，最便捷的加载字体的方法，不过限制颇多。必须https且同源，canvas等原生组件不支持。注意！！使用本地文件无效，必须使用网络地址。

官方文档

演示代码：

js:

wx.loadFontFace({family: 'FZSuXSLSJW',source: 'url("https://static.heytea.com/taro_trial/v1/font/WenYue-XinQingNianTi-NC-W8_1.otf")',success: res => {console.log('font load success', res)},fail: err => {console.log('font load fail', err)}
})

wxss:

/* 使用 */
.main-title {font-family: 'FZSuXSLSJW';font-size: 55rpx;padding-bottom: 20rpx;
}

wxml:

<view class="main-title">店内自取</view>

二、face-font url

传统的css规则，跟loadFontFace限制一样，必须https且同源，不支持canvas等原生组件，不支持本地文件。

菜鸟教程

演示代码：

wxss:

@font-face {font-family: 'FZSuXSLSJW';src: url("https://static.heytea.com/taro_trial/v1/font/WenYue-XinQingNianTi-NC-W8_1.otf")
}/* 使用 */
.main-title {font-family: 'FZSuXSLSJW';font-size: 55rpx;padding-bottom: 20rpx;
}

wxml:

<view class="main-title">店内自取</view>

效果图:

三、face-font base64

网上教程常介绍的方法，到transfonter上传文件，formats只勾选ttf就行。可以将字体转换成base64的face-font，复制到wxss里面就可以使用。但是缺点也很明显，小程序最大体积限制只能2m，随便一个中文字体就超过了。

四、总结

原本计划是使用canvas实现图片编辑，并且添加可自定义文字，然后就尝试一下能否更换字体，无奈尝试了上面的三种方法都不和我意。前两种方法在工具上预览是可以的，但是在安卓和iOS真机上，canvas上都无效。而第三种方法太浪费空间资源，2m的包大小限制直接淘汰了。

工具上的预览：

Android真机预览：

所以真的没办法了吗？？

如果你感觉有收获，欢迎给我打赏 ———— 以激励我输出更多优质内容

微信小程序使用自定义字体的三种方法相关推荐

微信小程序使用特殊字体的两种方法
微信小程序中如何使用特殊字体我有两种方法: 1. 转base64格式下载要使用的字体,建议TTF格式打开网站 https://transfonter.org/ 转换格式,得到压缩包将压缩包解压 ...
微信小程序更新webview页面的三种方法
场景在小程序其它页面做了操作,数据发生改变,回到webview页面时需要更新webview里面的数据.由于小程序没有提供与webview的实时通信能力,因此刷新页面是个可考虑的做法. 方法一最常见 ...
微信小程序可以加服务器上的字体,微信小程序中自定义字体
微信小程序支持自定义字体开放出来也有段时间,这边整理下使用自定义字体中,容易忽略的一些问题,和简便的全局自定义方式.如果是同时加载两种字体包,先下载下来的会被后下载下来的字体包给覆盖. 官网接口文档 ...
详解微信小程序页面间传递信息的三种方式
详解微信小程序页面间传递信息的三种方式在开发微信小程序的时候,经常会遇到在页面间传递信息的情况,有三种方法可以实现. 1. 使用数据缓存将要存储的数据使用以下方法放入缓存 wx.setStorag ...
微信小程序如何导入文件的一种方法
微信小程序如何导入文件的一种方法,前三条才是有用的信息 1 环境 2 当你看到好的demo想在自己的小程序试试的时候 3 解决方式,进入本地文件夹直接复制新的改变功能快捷键合理的创建标题,有助于 ...
微信小程序转二维码两种方法
话不多说,直接上干货第一种方法: 首先,你需要在电脑上打开https://mp.weixin.qq.com注册一个个人微信订阅号, 其次,登陆微信电脑版,微信号关注你注册的订阅号,这是重点注册好了 ...
微信小程序如何自定义字体wx.loadFontFace
1.加载网络字体资源 Page({/*** 页面的初始数据*/data: {loaded :false},// 字体loadFontFace() {wx.loadFontFace({global:tr ...
微信小程序使用和天气图标的一种方法
和天气官方文档上介绍的npm导入后使用<i class="qi-xxx"></i>的方式在微信小程序上并不能使用.网上搜的博客大多也是将icon图标下载到本 ...
微信小程序实现比较功能的五种方法
首先在index.wxml页面写一个测试页面如图: 代码如下接下来就是比较功能的实现第一种方法首先在两个input组件中用bindchange方法绑定事件处理函数,在button组件中用bin ...

最新文章

热门文章