2011-06-10 112 views
4

我在canvas實例上渲染小文本,並且它在Firefox 4上按預期工作,但在Chrome和Safari上,字體使用這些瀏覽器中設置的最小字體大小進行渲染,該大小已經在最小值且不能降低通過UI(它看起來像6px字體大小),但對於我想要完成的任務來說,它仍然太大。有沒有辦法在Webkit瀏覽器中覆蓋最小字體大小?

我使用的打印字體的代碼是類似於以下,在情況下,它可能是有用的:

ctx.font = '4px Monospace'; 
ctx.fillText("Any text", 0, 10); 

那麼,是不是可以在所有覆蓋最小字體大小的設置?

更新:我知道文本在4px處不可讀,但這不是問題的關鍵。事實上,我根本不需要它是可讀的。

更新2:在Safari this solution工程,但它仍然無法在Chrome中工作。

謝謝。

+0

4px?沒有人使用這樣的小字體... – atlavis 2011-06-10 09:57:35

+0

的想法是,如果你有一個文本是可見的,它應該是用戶可讀 – Teneff 2011-06-10 10:01:01

+0

一個4px幾乎是不會在任何機器上可讀 – 2011-06-10 10:05:47

回答

2

你可以嘗試使用更大的字體和scaling the context

ctx.font = '8px Monospace'; 
ctx.save(); 
ctx.scale(0.5, 0.5); 
ctx.fillText("Any text", 0, 20); 
ctx.restore(); 

記住指定文本的位置時保持縮放記在心裏。

這可能會很容易降低文本的圖形質量,但是在這個尺寸下它無論如何都是很難讀的。

+0

這是一個好主意,我會嘗試。雖然我對性能問題保持警惕,因爲我在可以輕鬆運行數千次迭代的循環上繪製文本。 – GiantSquid 2011-06-10 16:45:17

相關問題