Canvas fillText() и пары кернинга в Chrome

Question

Я пытаюсь создать достойный кросс-браузер механизм рендеринга текста холста. Но я заметил, что пары кернинга не отображаются должным образом в Chrome, но в Safari и Firefox они работают нормально.

Chrome:

Firefox:

Safari:

Попробуйте скрипку здесь: http://jsfiddle.net/o1n5014u/

Пример кода:

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

Кто-нибудь есть обходной путь? Я искал отчеты об ошибках, но я не могу найти что-либо.

Answer 1

От W3 CSS3 Fonts:

Чтобы явно включить на font-kerning вам необходимо установить font-kerning свойство normal,

canvas{ 
    font-kerning : normal; 
} 

Проверить это JSFiddle

На основании этой статьи на Cross-browser kerning pairs & ligatures, Или же вы могут использовать optimizeLegibility, как это,

canvas{ 
    text-rendering: optimizeLegibility; 
} 

Проверить это JSFiddle

Декларация в настоящее время поддерживается: Safari 5, Webkit Nightlies & Chrome.

Firefox уже использует optimizeLegibility по умолчанию для текстовых размеров выше 20px.