前言:
因为目前是一个canvas生成的一个画布,画布内的文字需要配置切换字体效果,因为小程序中自带的几种系统字体很有限,且肉眼也看不出切换后的变化,所以需要使用自定义第三方字体切换字体的时候进行加载渲染...
补充:
免费可商用字体的下载,可见另一篇文字有详细描述https://blog.csdn.net/qq_41930094/article/details/160137482?spm=1001.2014.3001.5502
一、Canvas绘制页面,字体的引入
第一种:本地直接存放字体,进行引入
结论:【不支持】,如果实在需要使用本地方式引入可以去参考间接实现:将字体文件转base64后在css通过伪类方式去使用...(劣势:小程序主包空间有限,压缩成base64后字体大小会提升,初次渲染字体会白屏等效果)
第二种:通过cdn的方式去实现字体切换切换
我去找可免费商用可使用的阿里巴巴或站酷字体,直接代码中去使用发现都无法成功,后面查询资料:国内大部分字体暴露出来的字体cdn都属于临时链接,所以无法在小程序中访问(其中还涉及跨域问题,临时链接失效等其他...)
第三种:将字体文件上传到阿里云或腾讯云的文件存储器,然后使用文件的https链接进行本地代码配置访问加载
这里说下选服务器,本来是优先选择阿里云的,奈何我是老用户进行开通文件存储,引导需要计费我不知道是不是我操作有误,然后百度没找到方案就放弃了,直接使用腾讯云的文件存储,下面以腾讯云为例,概述腾讯云注册到配置、字体上传、跨域配置、单字体文件的https链接、到代码中的使用链接显示对应字体的整个过程(若有遗漏,可帮忙指出,初次使用记录),
- 注册腾讯云账户(微信协助注册就是便捷)
- 选择-产品-找到主角【对象存储】

- 基于上一步,直接进入右上角控制台
- 创建仓库:存储桶,我记得只有三步,注意下存储桶的命名规范即可(后续单字体上传后文件的域名前面就是这个存储桶的命名),其余直接下一步完成;
- 直接点击存储桶列表,刚才创建的桶在这,点击配置管理进入存储仓库内
- 将从第三方免费商用平台下载,转换好的字体格式,进行上传(注意我这使用的woff2的格式,体积更小,更推荐在小程序中使用)
- 上传字体文件成功后,直接点击文件右上角详情,将字体文件设置为公开,且复制字体文件在存储文件中的https链接地址(这个地址就是小程序中可直接使用,访问该字体的链接)
- 回头配置这个存储桶支持跨域配置,
A:先说下为什么需要配置,像一般图片上传后,使用设置公开和复制链接直接可以使用,而字体为什么需要多配置一遍跨域?
B:答:
结论:【腾讯云 COS 上的字体文件,即使设为公开、能直接下载,不配置 CORS 请求头,则小程序无法正常渲染字体。】
图片:img src="https://..." 属于浏览器资源加载,不受 CORS 限制,公开即可用。
字体:小程序用 wx.loadFontFace / @font-face 加载,属于 JS 层面的网络请求(网络请求,必须跨域配置),严格受 CORS 跨域策略限制。
C:跨域配置
为什么使用:https://servicewechat.com 地址,是因为这是微信官方指定的小程序 "跨域身份"
- 到这一步,算是给字体文件配置完毕,拿到7里面复制的https开头的字体地址,直接在代码中使用wx.loadFontFace去实现文字字体的切换渲染...
10.代码实现
二、折腾点:
本来最开始使用站酷字体,比较有特色和灵动空间,但是下载的字体只有ett格式,我使用在线转格式工具后,在代码中请求成功,但是返回是乱码,但是给链接单独放到浏览器地址栏,可以直接下载,很郁闷找不到解决方案,折腾很久没成功后,便尝试用阿里巴巴字体下载后,因为包内自带woff2格式,直接上传服务器后,按照上面配置取地址在代码中次就成功了,怀疑前者我使用转woff2格式有问题,我自己也找不出有啥问题,这个问题只能后面在次尝试下,,,









