微信小程序中使用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_eggm11 小时前
微信小程序8
微信小程序·小程序
kyh10033811201 天前
Cocos Creator 《打螺丝消除游戏》源码+实现
游戏·微信小程序·小程序·打螺丝小游戏源码·微笑小游戏源码
PeanutSplsh1 天前
wx.setStorage 存的数据,没你以为的那么安全
微信小程序
帅次1 天前
讯飞与腾讯云:Android 实时语音识别服务对比选择
android·ios·微信小程序·小程序·android studio·android runtime
he___H1 天前
微信小程序实现两行交错功能
微信小程序·小程序
前端小木屋2 天前
uniapp与蓝牙设备连接详细步骤
前端·微信小程序
huang_jimei2 天前
【无标题】
微信小程序
Brave & Real3 天前
小程序 const 在js中以及与同类的var和let之间的差异
javascript·微信小程序·小程序
silvia_Anne3 天前
微信小程序商品列表
微信小程序·小程序
ze^03 天前
Day05 APP应用&微信小程序&原生态开发&H5+Vue技术&封装打包&反编译抓包点
vue.js·微信小程序·小程序