微信小程序中使用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格式有问题,我自己也找不出有啥问题,这个问题只能后面在次尝试下,,,

相关推荐
前端小万3 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
拖孩3 天前
代码我能全交给 AI,流量主这 500 个访客它一个都替不了我
前端·后端·微信小程序
甜到心里的蛋糕3 天前
如何用企业微信实现让微信收到通知实时通知
服务器·python·微信小程序·fastapi
2601_963870203 天前
基于springboot的综合网上购物商场系统
微信小程序·小程序·课程设计
2601_963869954 天前
力序健身房管理系统
微信小程序·小程序
拖孩4 天前
给小程序加「一键发公众号贴图」,我把 wx.shareToOfficialAccount 的三个坑趟了一遍
前端·后端·微信小程序
StevenLdh5 天前
第四期 · 云端同步与冲突仲裁:离线可写、多端一致的工程解法
java·微信小程序
m0_462803885 天前
会议签到如何设置手写签名?从创建签到到导出签名 PDF 的完整流程
微信小程序
AI工具人PM产品经理6 天前
零基础微信小程序入门:一个真实项目的里程碑路线图
微信小程序·云开发·学习路线·零基础入门·ai 编程
拖孩7 天前
这个小程序是 AI 帮我写的,可它里面一个 AI 功能都没有
前端·后端·微信小程序