В настоящее время я работаю над проектом JavaScript, который использует холст HTML5 как цель рендеринга. Для того чтобы мой код хорошо играл с (жестко определенными) интерфейсами, которые мне предоставили, мне нужно иметь возможность взять шрифт и извлечь высоты восхождения и спуска этого шрифта. Это позволит клиентам более точно позиционировать текст. Я знаю, что я могу изменить, где текст рисуется, установив атрибут textBaseline
, но мне действительно нужны числовые значения, описывающие эти разные высоты. Есть ли простой способ сделать это? Если нет, есть ли (надеюсь, легкая) библиотека, которая может справиться с этим для меня? Большинство предлагаемых решений, которые я нашел, представляют собой суперсовременные библиотеки для рендеринга шрифтов, которые кажутся массивными перегрузками для этой проблемы.
Получение метрик шрифтов в JavaScript?
Ответ 1
В этой статье на HTML5 Typographic Metrics обсуждаются проблемы и часть решения используя CSS - хотя целочисленное округление offsetTop и т.д. является проблемой (потенциально можно использовать getBoundingClientRect()
для получения правильных значений с плавающей запятой для некоторых браузеров).
Ответ 2
Короткий ответ заключается в том, что нет встроенного способа, и вы сами по себе.
Из-за этого большинство людей просто оценивают их. Некоторые люди предварительно вычисляют все значения, что не слишком много, если вы используете только несколько шрифтов.
Третий способ - сделать холст в памяти и напечатать несколько букв (например, Q
и O
) и программно попытаться определить восхождение и спуск, используя столкновение с пикселями. Это боль и может быть медленной в зависимости от количества шрифтов и того, насколько вы точны быть точным, но это самый точный способ обойти это, если вы не хотите предварительно вычислять значения.
Ответ 3
Как ссылка здесь: Ширина текста может быть измерена с помощью:
ctx.measureText(txt).width