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

Ширината на текста се отнася до хоризонталното пространство в пиксели, което заема низ от символи при изобразяване с определен шрифт, размер и тегло. За разлика от броя на символите, ширината в пиксели зависи от пропорционалния интервал на всеки глиф — буквата "W" е много по-широка от "i" в повечето шрифтове. Точното измерване на ширината на текста е важно за оформлението на потребителския интерфейс, съкращаване на етикети, динамично изобразяване на платно и поместване на низове в контейнери с фиксирана ширина.

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

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

Този инструмент изчислява ширината в пиксели на един или два текстови низа, използвайки Canvas API. Изберете семейство шрифтове, задайте размера и теглото на шрифта и веднага вижте изобразената ширина в пиксели. Когато се въведат два низа, изглед за сравнение показва абсолютната разлика и съотношението на ширината между тях.

Функции

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

Как работи

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