How to antialias SVG text in Firefox

2019-03-16 09:45发布

Does anyone know the best way to anti-alias svg text that will work in Firefox?

I tried text-antialias:true but this has no effect, and also I tried using a stroke paint but this just thickens up the font and is not what I like.

Example:

<!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>

I have uploaded this to http://jsfiddle.net/KJhrY/

This example appears antialiased in IE9 on my PC (Windows)

2条回答
贼婆χ
2楼-- · 2019-03-16 10:14

Firefox 25 will have support for the mox-osx-font-smoothing attribute!

So for firefox 25 you can use:

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

Firefox 25 will probably be released somewhere at the end of Oktober was released on 2013-10-29.
Nightly builds can be found at http://nightly.mozilla.org/

查看更多
别忘想泡老子
3楼-- · 2019-03-16 10:32

Try "text-rendering" attribute.
text-rendering = "optimizeLegibility"

查看更多
登录 后发表回答