在JavaScript中獲取字體指標？

我目前正在使用HTML5畫布作爲渲染目標的JavaScript項目。爲了使我的代碼能夠很好地與我提供的（嚴格指定的）接口配合使用，我需要能夠獲取字體並提取該字體的上升和下降高度。這將使客戶能夠更準確地定位文本。我知道我可以通過設置textBaseline屬性來更改文本的繪製位置，但實際上我需要描述這些不同高度的數字值。有沒有簡單的方法來做到這一點？如果沒有，是否有一個（希望輕量級）庫可以爲我處理？我發現的大多數建議的解決方案都是重量級的字體渲染庫，這對於這個問題似乎是巨大的矯枉過正。在JavaScript中獲取字體指標？

來源

2011-05-28 templatetypedef

Mozillas貝斯平試圖解決這一問題，終於碰上與結論帆布結束的說法：文本的寬度可以與測量曾經並將永遠不會爲文本編輯器設計。因此，要麼依靠具有相同高度和寬度的'm'，要麼使用Bespin的來源或下面描述的像素測試方法，或者使用相同的文本/字體或任何其他不可靠的近似來測量關閉div。對不起，也不喜歡幻想破滅。但是你確定你爲這條道路選擇了正確的馬？ – noiv 2011-05-29 23:10:40

我目前正在研究JavaScript中的JVM實現，並將畫布作爲渲染目標。我需要實現Java字體庫，這就是爲什麼我需要這些精確的值。我在想，我會用西蒙的答案去解決問題，並通過寫出屏幕外像素和像素刮取結果來僞造實現。 :-( – templatetypedef 2011-05-29 23:53:19

我希望，你已經考慮了字體平滑處理...... – noiv 2011-05-30 00:05:41

HTML5的印刷度量This article討論的問題和part solution using CSS - 雖然的offsetTop等的整數四捨五入是一個問題（可能可以使用getBoundingClientRect()得到正確的浮點值，一些瀏覽器）。

來源

2012-06-29 03:52:48 robocat

簡短的回答是，沒有內置的方式，你是自己排序。

因此，大多數人只是簡單地估計它們。有些人會預先計算所有的值，如果您只使用幾種字體，那麼這些值不會太多。

第三種方法是在內存中製作一個畫布並打印一些字母（例如，Q和O）並以編程方式嘗試使用每像素碰撞來確定上升和下降。這是一種痛苦，可能會很慢，具體取決於字體的數量和想要的準確度，但如果您不想預先計算這些值，則它是最準確的方法。

來源

2011-05-29 16:46:37

就像這裏一個參考：

ctx.measureText(txt).width

http://www.w3schools.com/tags/canvas_measuretext.asp

來源

2015-11-07 06:27:49 Damocles

在JavaScript中獲取字體指標？

回答

相關問題