Как измеряется ширина текста?

Ширина текста — это горизонтальное пространство в пикселях, которое занимает строка символов при отображении с определённым шрифтом, размером и начертанием. В отличие от количества символов, ширина в пикселях зависит от пропорционального расстояния между каждым глифом — буква "W" намного шире "i" в большинстве шрифтов. Точное измерение ширины текста важно для макета пользовательского интерфейса, обрезания меток, динамического рендеринга на canvas и размещения строк в контейнерах фиксированной ширины.

Браузеры предоставляют метод measureText() из HTML5 Canvas API, который вычисляет ширину отображаемого текста без его вывода на экран. Рисуя на невидимом контексте canvas, можно получить точное измерение с точностью до подпикселя для любой комбинации семейства шрифта, размера и начертания.

Описание инструмента

Этот инструмент вычисляет ширину в пикселях одной или двух текстовых строк с использованием Canvas API. Выберите семейство шрифта, установите размер и начертание шрифта, и сразу же увидите ширину отображаемого текста в пикселях. Если введены две строки, представление сравнения показывает абсолютную разницу и коэффициент соотношения ширины между ними.

Возможности

  • Поддержка всех веб-безопасных системных шрифтов и пользовательских загруженных файлов шрифтов (TTF, OTF, WOFF, WOFF2)
  • Сравнение двух строк одновременно со статистикой разницы и соотношения
  • Регулируемый размер шрифта от 1 до 256 px и все девять стандартных значений толщины шрифта

Как это работает

Ширина измеряется с использованием API CanvasRenderingContext2D.measureText() браузера. Создаётся невидимый элемент <canvas>, свойство шрифта его 2D-контекста устанавливается в соответствии с выбранным семейством, размером и начертанием, а measureText() возвращает ширину ограничивающего прямоугольника в пикселях. Пользовательские шрифты загружаются в реестр FontFace браузера перед измерением, чтобы результаты отражали фактический шрифт.