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

相关推荐
lpfasd12313 小时前
微信小程序虚拟支付(道具直购)踩坑全记录:从-15005到支付成功
微信小程序·小程序
crazy_wsp17 小时前
使用AI从0到1上线微信小程序
人工智能·微信小程序·小程序
m0_462803882 天前
培训分组与记分操作指南
微信小程序
浩冉学编程2 天前
微信小程序中基于java后端实现官方的文本内容安全识别msgSecCheck
java·前端·安全·微信小程序·小程序·微信公众平台·内容安全审核
ZC跨境爬虫2 天前
Python Django开发者转向微信小程序:从架构理解到第一行代码的完整准备指南
开发语言·python·ui·微信小程序·django
阿豪啊3 天前
微信小程序订阅消息实战:从模板配置到发送全流程
微信小程序
云起SAAS3 天前
私域直播系统UniApp源码 多商户商城+直播带货 微信小程序+H5+安卓iOS
android·微信小程序·uni-app·私域直播系统
斯班奇的好朋友阿法法4 天前
鸿蒙 vs iOS vs 微信小程序:开发平台全面对比
ios·微信小程序·harmonyos
Greg_Zhong6 天前
微信小程序如何关闭:当前渲染模式为webview?
微信小程序·微信小程序渲染引擎·渲染引擎需搭配更高基础库
橘子海全栈攻城狮6 天前
【最新源码】养老院系统管理A013
java·spring boot·后端·web安全·微信小程序