javascriptgoogle-chromecanvasfontskerning

How to control the font kerning for Canvas fillText() in Chrome?

I'm trying to create a decent cross-browser rendering engine of canvas text. I have noticed that kerning pairs don't render properly in Chrome, but in Safari and Firefox they work fine.

Chrome:

enter image description here

Firefox:

enter image description here

Safari:

enter image description here

Try the fiddle here: http://jsfiddle.net/o1n5014u/

Code sample:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "40px Arial";
ctx.fillText("VAVA Te", 10, 50);

Does anyone have any workaround? I have looked for bug reports, but I can't find anything.

Solution

  • From W3 CSS3 Fonts:

    To explicitly turn on the font-kerning you need to set the font-kerning property to normal,

    canvas{
    font-kerning : normal;
}

    Check this JSFiddle

    Based on this article on Cross-browser kerning pairs & ligatures, Alternatively you can use the optimizeLegibility like this,

    canvas{
     text-rendering: optimizeLegibility;
}

    Check this JSFiddle

    The declaration is currently supported by: Safari 5, The Webkit Nightlies & Chrome.

    Firefox already uses optimizeLegibility by default for text sizes above 20px.