Firefox 上渲染不佳/抗锯齿的画布文本

【问题标题】：poorly rendered/antialased canvas text on firefoxFirefox 上渲染不佳/抗锯齿的画布文本
【发布时间】：2012-11-16 03:28:35
【问题描述】：

文本看起来像素化/别名（firefox和opera）

由于实际问题似乎没什么可做的，有没有什么怪癖/技巧可以减少这种影响？

谢谢 /A

context.textBaseline = 'top'
context.fillStyle = color
context.font = "16px gotham_htfregular"
context.fillText("HD", 15, 11)

【问题讨论】：

标签： javascript firefox text canvas fonts

【解决方案1】：

我不确定这是否有帮助，但它帮助我在 canvas 内的图像上消除锯齿边缘：

                canvas {
                  image-rendering: optimizeSpeed;
                  image-rendering: -moz-crisp-edges;
                  image-rendering: -webkit-optimize-contrast;
                  image-rendering: optimize-contrast;
                  -ms-interpolation-mode: nearest-neighbor;
}

注意：-ms-interpolation-mode 用于 IE，但包含在内是为了更好地衡量。

【讨论】：