最近接到一个需求，需要实现微信小程序中用户可自定义缩放旋转图片以及文字自定义功能，我用uni-app进行了开发，下面是开发过程中遇到的一些问题。

1. 字体大小的值必须是整数

当使用渲染的文本时，需要设置文本的字体。

let ctx = uni.createCanvasContext('canvas') ctx.font = '16px Arial' // 设置成功 ctx.font = '16.66px Arial' // 这样写会触发警告，不生效

2. 字体兼容性问题

在微信小程序中，文本字体集的兼容性很差。

目前iOS端仅能设置成功三种字体（''、'New'、''）。

客户端只有两种字体（'', 'noto'），并且这两种字体只在浏览器端有效，直接在DOM中的文本上设置这两种字体不会改变任何东西。另外在老款手机上（不是近一年内发布的新机型），只有英文有效。

解决上述问题的方法有两种：

一种是直接重写一个H5页面嵌入到小程序里面（重写太麻烦）；

二是继续沿着原有的路径，进行更多兼容的操作。

博主选择了第二种方式，iOS版本可以不用管，系统基本都兼容这三种字体（英文版）。

但对于客户端，博主首先使用uni.尝试引入''和'noto'两种字体进行DOM渲染，但即便将字体挂在自己的OSS存储系统上进行加载，依然没有效果。

无奈之下，只好导入.ttf字体文件，并且只加载英文后面的两种字体，整个包的大小只增加了60KB。

参考链接：

系统字体规格

（）

Noto 字体下载

Noto sans 字体免费下载和在线预览 - Font

字体文件转换

@font-face —

在线字体提取网站

在线字体提取工具，字体子集生成器 - 在线工具 -

把处理好的需要导入的字体放到CSS文件中，等系统确定后再导入：

judgeSystem() { let system = uni.getSystemInfoSync().system // 系统信息 this.judgeTextHasCN() // 判断文字中是否存在中文（因设置字体只对英文生效） if (system.includes('Android')) { require('@/common/css/android-font.css') this.textFamilyList = ['serif', 'noto'] this.fontFamily = 'serif' } else { // 其他平台其实还包括windows this.textFamilyList = ['Arial', 'Courier New', 'Georgia'] this.fontFamily = 'Arial' } }

处理后的字体CSS如下所示：

@font-face { font-family: 'serif'; src: url('data:font/truetype;charset=utf-8;base64,AAEAAAAQAQAABAAARkZUTVq0Nk4AAG...') font-weight: normal; font-style: normal; font-display: swap; }

总结

不同平台对字体的兼容性不一样，其实最完美的方法就是使用它。

如果需要兼容中文，需要导入对应的中文字体集，但全部导入会让包体积过大。不过也有对应的方法，就是动态提取需要的文字，只导入需要的文字。有机会下次再讲。

下一期我会继续和大家分享uni-app的详细内容，敬请期待~

欢迎大家关注和留言，你们的支持就是我的动力！