Firefox中canvas小于15px字体被四舍五入，如何解决该兼容问题？

这个问题是Windows平台下Firefox的默认字体渲染策略导致的：Arial、sans-serif等字体内置了小于15px的点阵字库，Firefox渲染小字号时会优先调用点阵字体而非矢量字体，点阵字体仅支持整数字号，因此会自动将字号四舍五入到最近的整数值；大于等于15px后Firefox会切换为矢量渲染，就不会出现该问题。

以下是可落地的解决方案：

方案1：缩放Canvas（最通用，兼容所有字体） #

通过将Canvas画布尺寸放大N倍（通常取2倍即可覆盖所有小于15px的场景），再通过CSS缩放到原始显示尺寸，同时将所有绘图参数同步放大N倍，即可绕过小字号点阵渲染限制：

const text = "Life is not a problem to be solved, but a reality to be experienced.";
const scale = 2; // 缩放系数，可根据实际需要调整
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

// 画布实际尺寸放大scale倍
canvas.width = canvas.offsetWidth * scale;
canvas.height = canvas.offsetHeight * scale;

// 要渲染14.6px字号，同步放大scale倍
ctx.font = `${14.6 * scale}px Arial`;
// 绘图坐标同步放大scale倍
ctx.fillText(text, 10 * scale, 20 * scale);

如果现有项目绘图逻辑较多，也可以直接调用上下文的scale方法统一处理缩放，后续绘图逻辑不需要逐一调整参数：

ctx.scale(scale, scale);
// 后续绘图直接按原始值书写即可
ctx.font = "14.6px Arial";
ctx.fillText(text, 10, 20);

注意：使用缩放方案时，若调用getImageData、measureText等API，返回的结果也会对应缩放，需要自行除以缩放系数得到实际值。

方案2：替换兼容字体 #

如果业务允许调整字体，可直接替换为无小字号点阵的字体，比如Segoe UI、Noto Sans、思源黑体等，这类字体所有字号均采用矢量渲染，不会触发四舍五入问题，改造成本最低。

方案3：修改Firefox本地配置（仅适用于测试，不推荐生产环境） #

本地测试时可手动修改Firefox配置：地址栏输入about:config进入配置页，搜索gfx.font_rendering.cleartype.force_gdi_classic_for_families，删除配置项中的Arial、sans-serif等异常字体，即可强制小字号采用矢量渲染。该方案需要用户手动修改浏览器配置，不适用于面向公网的项目。

内容的提问来源于stack exchange，提问作者Bero