如何在 Firefox 中对 SVG 文本进行抗锯齿处理答案

【问题标题】：How to antialias SVG text in Firefox如何在 Firefox 中对 SVG 文本进行抗锯齿处理
【发布时间】：2013-11-14 23:49:39
【问题描述】：

有谁知道在 Firefox 中有效的消除锯齿 svg 文本的最佳方法？

我尝试了 text-antialias:true 但这没有效果，我也尝试使用描边颜料，但这只会使字体变粗，不是我喜欢的。

例子：

<!DOCTYPE html>
<html>
<body>
<svg height="100" width="500">
<text y="50" x="250" text-anchor="middle" style="font-size: 40px" >Hello</text>
</svg>
</body>
</html>

我已经上传到http://jsfiddle.net/KJhrY/

此示例在我的 PC (Windows) 上的 IE9 中显示为抗锯齿

【问题讨论】：

这在 Firefox 17/Vista 上看起来抗锯齿效果很好
@Michael - 是的，它在另一台装有 Firefox 的 PC 上运行良好。虽然我在它不起作用的机器上使用了 v18。也许抗锯齿是我不能假设对所有观众都有效的东西，至少目前是这样。
哎呀——是的，我在 FF18/OSX 上看到了。我会用 Mozilla 提交一个错误。
我知道我想准确控制用户看到的唯一方法是使用服务器上生成的图像，或者画布是要走的路。

标签： firefox svg antialiasing

【解决方案1】：

Firefox 25 will have support 用于 mox-osx-font-smoothing 属性！

所以对于 Firefox 25 你可以使用：

.yourclass{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Firefox 25 ~~可能会在 end of Oktober~~ 的某个地方发布，它于 2013 年 10 月 29 日发布。
每晚构建可以在http://nightly.mozilla.org/找到。

【讨论】：

至少在 OSX 10.7.5 和 Firefox 25 公开版本上工作。

【解决方案2】：

尝试“文本渲染”属性。
text-rendering = "optimizeLegibility"

【讨论】：

Firedox 目前不支持此功能。
试过了：看不出，这有什么影响。