在Chrome中Canvas fillText（）和字距對

Question

我正在嘗試創建一個體面的跨瀏覽器渲染引擎的畫布文本。但我已經注意到，字距對在Chrome中無法正確顯示，但在Safari和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版&鉻。

Firefox默認使用optimizeLegibility，文本大小爲 ，大於20px。