Получение метрик шрифта в JavaScript?

Question

В настоящее время я работаю над проектом JavaScript, который использует холст HTML5 в качестве цели рендеринга.Чтобы мой код хорошо играл с (жестко заданными) интерфейсами, которые мне предоставили, мне нужно иметь возможность взять шрифт и извлечь высоты подъема и спуска этого шрифта.Это позволит клиентам более точно позиционировать текст.Я знаю, что могу изменить место рисования текста, установив атрибут textBaseline, но мне действительно нужны числовые значения, описывающие эти разные высоты.Есть ли простой способ сделать это?Если нет, то есть (надеюсь, легковесная) библиотека, которая справится с этим для меня?Большинство из предложенных мной решений - это библиотеки рендеринга шрифтов с большим весом, что кажется чрезмерным излишним для этой проблемы.

Answer 1

В этой статье о типографских метриках HTML5 обсуждается проблема и решение части с использованием CSS - хотя целочисленное округление offsetTop и т. Д. Является проблемой (потенциально можно использовать getBoundingClientRect() для получения правильные значения с плавающей точкой для некоторых браузеров).

Answer 2

Короткий ответ: нет встроенного пути, и вы вроде как сами по себе.

Из-за этого большинство людей просто оценивают их.Некоторые люди предварительно вычисляют все значения, что не слишком много работы, если вы используете только несколько шрифтов.

Третий способ - создать холст в памяти и напечатать несколько букв (скажем, a Q и O) и программно пытаются определить подъем и спуск, используя столкновение на пиксель.Это боль и может быть медленной в зависимости от количества шрифтов и точности, которой вы хотите быть, но это самый точный способ сделать это, если вы не хотите предварительно вычислять значения.

Answer 3

Просто для справки: ширина текста может быть измерена с помощью:

ctx.measureText(txt).width

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