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