微信小程序中使用canvas中绘制的页面,切换字体的几种实践方式

前言:

因为目前是一个canvas生成的一个画布,画布内的文字需要配置切换字体效果,因为小程序中自带的几种系统字体很有限,且肉眼也看不出切换后的变化,所以需要使用自定义第三方字体切换字体的时候进行加载渲染...

补充:

免费可商用字体的下载,可见另一篇文字有详细描述https://blog.csdn.net/qq_41930094/article/details/160137482?spm=1001.2014.3001.5502

一、Canvas绘制页面,字体的引入
第一种:本地直接存放字体,进行引入

结论:【不支持】,如果实在需要使用本地方式引入可以去参考间接实现:将字体文件转base64后在css通过伪类方式去使用...(劣势:小程序主包空间有限,压缩成base64后字体大小会提升,初次渲染字体会白屏等效果)

第二种:通过cdn的方式去实现字体切换切换

我去找可免费商用可使用的阿里巴巴或站酷字体,直接代码中去使用发现都无法成功,后面查询资料:国内大部分字体暴露出来的字体cdn都属于临时链接,所以无法在小程序中访问(其中还涉及跨域问题,临时链接失效等其他...)

第三种:将字体文件上传到阿里云或腾讯云的文件存储器,然后使用文件的https链接进行本地代码配置访问加载

这里说下选服务器,本来是优先选择阿里云的,奈何我是老用户进行开通文件存储,引导需要计费我不知道是不是我操作有误,然后百度没找到方案就放弃了,直接使用腾讯云的文件存储,下面以腾讯云为例,概述腾讯云注册到配置、字体上传、跨域配置、单字体文件的https链接、到代码中的使用链接显示对应字体的整个过程(若有遗漏,可帮忙指出,初次使用记录),

  1. 注册腾讯云账户(微信协助注册就是便捷)
  2. 选择-产品-找到主角【对象存储】
  3. 基于上一步,直接进入右上角控制台
  1. 创建仓库:存储桶,我记得只有三步,注意下存储桶的命名规范即可(后续单字体上传后文件的域名前面就是这个存储桶的命名),其余直接下一步完成;
  1. 直接点击存储桶列表,刚才创建的桶在这,点击配置管理进入存储仓库内
  1. 将从第三方免费商用平台下载,转换好的字体格式,进行上传(注意我这使用的woff2的格式,体积更小,更推荐在小程序中使用)
  2. 上传字体文件成功后,直接点击文件右上角详情,将字体文件设置为公开,且复制字体文件在存储文件中的https链接地址(这个地址就是小程序中可直接使用,访问该字体的链接)


  1. 回头配置这个存储桶支持跨域配置,
    A:先说下为什么需要配置,像一般图片上传后,使用设置公开和复制链接直接可以使用,而字体为什么需要多配置一遍跨域?
    B:答:
    结论:【腾讯云 COS 上的字体文件,即使设为公开、能直接下载,不配置 CORS 请求头,则小程序无法正常渲染字体。】
    图片:img src="https://..." 属于浏览器资源加载,不受 CORS 限制,公开即可用。
    字体:小程序用 wx.loadFontFace / @font-face 加载,属于 JS 层面的网络请求(网络请求,必须跨域配置),严格受 CORS 跨域策略限制。
    C:跨域配置


为什么使用:https://servicewechat.com 地址,是因为这是微信官方指定的小程序 "跨域身份"

  1. 到这一步,算是给字体文件配置完毕,拿到7里面复制的https开头的字体地址,直接在代码中使用wx.loadFontFace去实现文字字体的切换渲染...
    10.代码实现
二、折腾点:

本来最开始使用站酷字体,比较有特色和灵动空间,但是下载的字体只有ett格式,我使用在线转格式工具后,在代码中请求成功,但是返回是乱码,但是给链接单独放到浏览器地址栏,可以直接下载,很郁闷找不到解决方案,折腾很久没成功后,便尝试用阿里巴巴字体下载后,因为包内自带woff2格式,直接上传服务器后,按照上面配置取地址在代码中次就成功了,怀疑前者我使用转woff2格式有问题,我自己也找不出有啥问题,这个问题只能后面在次尝试下,,,

相关推荐
double_eggm1 天前
微信小程序2
微信小程序·小程序
是江迪呀2 天前
实时看大家都在干嘛?我靠一行监听函数,做了个轻互动小程序
前端·微信小程序
打瞌睡的朱尤2 天前
微信小程序1~25
微信小程序·小程序
拖孩2 天前
我用 AI 搓了一个"比谁更持久"的微信小游戏,AI实现只用了一天,微信审核却用了一个月!!!
微信小程序·ai编程·游戏开发
碎像3 天前
掌握uniapp发布微信小程序、App(Android)
微信小程序·小程序·uni-app
程序媛徐师姐3 天前
Java基于SSM的实验室管理微信小程序,附源码+文档说明
java·微信小程序·实验室管理·实验室管理微信小程序·java实验室管理微信小程序·java实验室管理小程序·实验室管理小程序
自然 醒5 天前
uni-app开发微信小程序,如何使用towxml去渲染md格式和html标签格式的内容?
微信小程序·uni-app·html
竟未曾年少轻狂5 天前
微信小程序-组件开发
微信小程序·小程序
想七想八不如114085 天前
【GitHub开源】一款极简跨平台 Todo 应用:微信小程序 + Windows 桌面挂件 + 实时同步
微信小程序·开源·github