UniApp 中 iOS 端 Canvas 字体加粗失效问题解析

问题背景

在 UniApp 开发中，当使用 Canvas API 绘制文本时，开发者可能会遇到一个特定于 iOS 平台的问题：通过 ctx.font 属性设置的字体加粗（bold）样式在 iOS 设备上无法正常生效。这个问题不仅存在于 UniApp 的 iOS 端，在 Safari 浏览器中也有相同的表现。

问题现象

当开发者尝试使用以下代码设置 Canvas 文本样式时：

ctx.font = 'bold 20px Arial';
ctx.fillText(`测试文本 ${ctx.font}`);

在 iOS 设备上，实际绘制的文本不会显示加粗效果，而且通过 ctx.font 读取的属性值会丢失 bold 声明，变成 20px Arial。

技术原理分析

这个问题的根源在于 WebKit 内核（特别是 Safari 浏览器）对 Canvas 字体属性的处理方式存在特殊性：

1. 字体属性解析差异：在大多数浏览器中，ctx.font 属性会忠实地保留开发者设置的所有样式信息，包括 font-weight、font-style 等。但在 Safari 中，当读取 ctx.font 时，浏览器会过滤掉 font-weight 信息。

2. UniApp 的内部处理：UniApp 在绘制文本时会重新读取 ctx.font 属性来确保绘制质量（特别是在高 DPI 设备上）。由于 Safari 的这个特性，导致加粗信息在绘制过程中丢失。

3. 平台一致性挑战：这个问题凸显了跨平台开发中的一个常见挑战——不同平台对相同 API 的实现可能存在细微但重要的差异。

解决方案

针对这个问题，开发者可以采用以下几种解决方案：

1. 使用备用字体名称

// 直接使用加粗版本的字体名称
ctx.font = '20px Arial-BoldMT';

2. 保存原始字体设置

// 保存原始字体设置
const originalFont = 'bold 20px Arial';
ctx.font = originalFont;

// 绘制时使用保存的原始设置
ctx.fillText('测试文本', 10, 30, { font: originalFont });

3. 使用 UniApp 提供的补丁方案

UniApp 团队已经提供了一个临时解决方案，通过比较 font 和 __font__ 属性来判断是否需要恢复原始字体设置：

// 在设置字体后
ctx.font = 'bold 20px Arial';

// 绘制前检查
if (ctx.__font__ && ctx.__font__ !== ctx.font) {
    ctx.font = ctx.__font__;
}

最佳实践建议

1. 平台检测：对于需要精确控制字体样式的场景，建议进行平台检测，在 iOS 设备上采用特殊的处理逻辑。

2. 字体回退：考虑为不同平台准备不同的字体设置方案，确保在所有平台上都能获得最佳显示效果。

3. 测试覆盖：在开发过程中，务必在 iOS 设备和 Safari 浏览器上进行充分的测试验证。

4. 关注更新：这个问题可能会随着浏览器引擎的更新而改变，建议关注 UniApp 的更新日志和 WebKit 的版本变化。

总结

Canvas 字体加粗在 iOS 平台的失效问题是一个典型的跨平台兼容性问题，理解其背后的技术原理有助于开发者在遇到类似问题时快速定位和解决。通过合理的编码策略和平台特定的处理，可以确保应用在所有平台上都能提供一致的用户体验。