微信小程序中设置字体的坑

「爱情、让人受尽委屈。」 2022-12-25 02:57 573阅读 0赞

最近接到一个需求，需要在微信小程序中做出用户可自定义缩放旋转图片和文字的定制功能，开发使用uni-app，这里记录几个问题。

# 一、canvas设置字体大小的数值需为整数 #

使用`canvas`渲染文字时，需要设置文字的字体

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

# 二、字体集font-family兼容的问题 #

微信小程序中，对于文字字体集的兼容性很差。  
IOS端目前发现只有三种字体能设置成功`（'Arial', 'Courier New', 'Georgia'）`；  
而Android端只有两种字体`（'serif', 'noto'）`，且Android端设置这两种字体只会在`canvas`中生效，在DOM中直接对文本设置这两种字体，没有任何变化；还有在旧手机（非近一年内发布的新型号）上只会对英文生效。  
针对以上问题，有两条路可以走，一个是直接重写一个H5页面，使用`webview`内嵌到小程序中（需重写太繁琐）；另外一条路就是按原路继续走，多做些兼容操作。  
博主选了第二条路。IOS端可以不理，系统对那三种字体基本兼容（针对英文）；但是对Android端，博主首先是使用`uni.loadFontFace`尝试去引入`'serif', 'noto'`这两种字体供DOM渲染使用，但是即便将字体挂到自己的`OSS`存储系统上去加载，仍然没有效果。  
![loadFontFace][]

无奈，只能将`.ttf`字体文件转为`base64`引入，只保留英文后的两种字体加载下来，整个包大小只增加了60KB。

#### 参考链接： ####

[Android系统字体规范][Android]  
[Noto字体下载][Noto]  
[字体文件转base64][base64]  
[在线字体提取网站][Link 1]

将处理完需导入的字体放到`CSS`文件中，判断系统为Android时导入

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'
      }
    }

经过`base64`后的字体`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;
    }

# 总结 #

不同平台对于字体的兼容都不同，其实最完美的方法还是使用`webview`。如果至此还需对中文也兼容的话，那还需引入相应的中文字体集，不过全部引入的话会导致包体积过大，但是也有相应的方法，就是动态地对需要的文字做抽离，只引需要的文字（这里不做展开）。

[loadFontFace]: /images/20221120/ea08a18878354e40bee4f1ba33e9ad0d.png
[Android]: http://www.xueui.cn/download/font-download/android-font-down.html
[Noto]: http://www.fonts.net.cn/font-37240492745.html
[base64]: https://transfonter.org/
[Link 1]: https://www.fontke.com/tool/subfont/