在JavaScript中获取字体指标？ [英] Getting font metrics in JavaScript?

问题描述

我目前正在开发一个使用HTML5画布作为渲染目标的JavaScript项目。为了让我的代码与我提供的（刚性指定的）接口很好地玩，我需要能够采取一种字体，并提取该字体的上升和下降的高度。这将允许客户端更准确地定位文本。我知道我可以通过设置 textBaseline 属性改变文本的绘制位置，但我实际上需要描述这些不同的高度的数值。有没有简单的方法来做到这一点？如果没有，是否有一个（希望是轻量级的）库可以为我处理它？大多数建议的解决方案，我发现是重量级的字体渲染库，这似乎是这个问题的大规模过度。

I'm currently working on a JavaScript project that uses the HTML5 canvas as a rendering target. In order for my code to play nicely with the (rigidly specified) interfaces I've been provided, I need to be able to take a font and extract the ascent and descent heights of that font. This will allow clients to more accurately position the text. I'm aware that I can change where the text draws by setting the textBaseline attribute, but I actually need the numeric values describing these different heights. Is there a simple way to do this? If not, is there a (hopefully lightweight) library that can handle it for me? Most of the proposed solutions I've found are heavyweight font rendering libraries, which seems like massive overkill for this problem.

推荐答案

a href =https://galacticmilk.com/journal/2011/01/html5-typographic-metrics/ =nofollow>本文关于HTML5印刷指标的文章讨论了问题，并且使用CSS的部分解决方案 - 虽然offsetTop等的整数舍入是一个问题可能可以使用 getBoundingClientRect（）获得某些浏览器的正确浮点值）。

This article on HTML5 Typographic Metrics discusses the problem and a part solution using CSS - although the integer rounding of offsetTop etc is a problem (potentially can use getBoundingClientRect() to get proper floating point values for some browsers).

这篇关于在JavaScript中获取字体指标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！