什麼是html5 canvas文本中字體大小的有效粒度？

Question

我已經詳盡搜索了一個答案，我希望stackoverflow將再次來拯救。

如果我們設置上下文的字體大小，它似乎允許任意精度：

fontSize = 11.654321; 
context.font = 'bold ' + fontSize + 'px sans-serif '; 

檢查上下文對象將顯示字體大小已設置極其精確。但是，我注意到上下文對象的measureText()方法總是返回一個整數值（推測爲上限值）。有誰知道顯示文本時使用的實際精度（使用基於像素的字體大小時）？

包含這些信息的文檔鏈接就足夠了（只要它實際上通知精度）。

如果有人問起，我試圖調整字體做這樣的事情，以適應文本到指定寬度：

var fontSize = 12; 
context.font = 'bold ' + fontSize + 'px sans-serif '; 

var text = "whatever"; 
var maxWidth = 200; 

var currentWidth = context.measureText(text).width; 
var adjustment = maxWidth/currentWidth; 
fontSize *= adjustment; 
context.font = 'bold ' + fontSize " 'px sans-serif '; 

Answer 1

鉻和Firefox，看來有效的精度在整數級別（我沒有測試過Internet Explorer）。我創建了this jsFiddle來研究這個問題，從我的研究中可以看出，在Chromium和Firefox中，用子整數精度指定的字體大小有效地四捨五入到最接近的整數。

我所做的測試假定measureText()方法運行正常（這可能是一個錯誤的假設）。測試顯示這種方法有一些奇怪的行爲（在Chromium中比在Firefox中更明顯）。

使用重複字符（'m'）的固定長度字符串，我繪製了字符串的測量大小作爲其字體大小的函數。對字體大小輸入步長使用0.1時，對於步長爲1.0的輸出字符串寬度保持不變。這些「步驟」以整數字體大小爲中心，跳躍發生在整數之間的中點處。

在Chromium中觀察到的奇怪行爲是，有時輸入字體大小可以變化多達2個像素，而且字符串的測量寬度沒有變化。這種行爲是意想不到的，但是以固定間隔發生（從零偏移）。以下輸入值的間隔導致測量寬度沒有變化：[3.5,5.5），[12.5,14.5），[21.5,23.5），[30.5,32.5]等等。這些「大平臺」的中心看起來相距9個像素（4.5,13.5,22.5,31.5）。如果這確實是一個錯誤，那麼第一個中心與其餘中間間隔的一半之間的中心可能是一條線索。

在Firefox中，奇怪的行爲更加微妙。如果將輸入步長更改爲1，則圖形幾乎是線性的（如預期的那樣），但是週期性地，圖形在間隔1中稍微更陡峭。例如，這發生在[11.5,12.5）和[35.5,36.5 ）。

如果我忽視了某些內容，或者如果我的方法中存在某些錯誤，請發表評論並告訴我。我並不太在意Firefox的行爲，但截至目前，我認爲Chromium的行爲是一個錯誤。我可能會提交錯誤報告，如果是這樣，我會更新我的答案以包含鏈接。