Jak mierzona jest szerokość tekstu?

Szerokość tekstu odnosi się do przestrzeni w pikselach w poziomie, którą zajmuje ciąg znaków podczas renderowania przy użyciu określonej czcionki, rozmiaru i grubości. W przeciwieństwie do liczby znaków, szerokość w pikselach zależy od proporcjonalnego rozstawu każdego glifu — litera "W" jest znacznie szersza niż "i" w większości czcionek. Dokładne zmierzenie szerokości tekstu jest ważne dla układu interfejsu użytkownika, obcinania etykiet, dynamicznego renderowania kanwy i dopasowania ciągów do kontenerów o stałej szerokości.

Przeglądarki udostępniają metodę measureText() API Canvas HTML5, która oblicza szerokość renderowanego tekstu bez wyświetlania go na ekranie. Rysując na kontekście kanwy poza ekranem, można uzyskać precyzyjny pomiar z dokładnością do podpiksela dla dowolnej kombinacji rodziny czcionki, rozmiaru i grubości.

Opis narzędzia

To narzędzie oblicza szerokość w pikselach jednego lub dwóch ciągów tekstowych przy użyciu API Canvas. Wybierz rodzinę czcionki, ustaw rozmiar i grubość czcionki, a natychmiast zobaczysz szerokość renderowanego tekstu w pikselach. Gdy wprowadzisz dwa ciągi, widok porównawczy pokazuje różnicę bezwzględną i stosunek szerokości między nimi.

Funkcje

  • Obsługuje wszystkie bezpieczne czcionki systemowe i niestandardowe przesłane pliki czcionek (TTF, OTF, WOFF, WOFF2)
  • Porównaj dwa ciągi jednocześnie ze statystyką różnicy i stosunku
  • Rozmiar czcionki można dostosować od 1 do 256 px i wszystkie dziewięć standardowych wartości grubości czcionki

Jak to działa

Szerokość jest mierzona przy użyciu API CanvasRenderingContext2D.measureText() przeglądarki. Tworzony jest element <canvas> poza ekranem, jego właściwość czcionki kontekstu 2D jest ustawiana tak, aby odpowiadała wybranej rodzinie, rozmiarowi i grubości, a measureText() zwraca szerokość pola ograniczającego w pikselach. Niestandardowe czcionki są ładowane do rejestru FontFace przeglądarki przed pomiarem, aby wyniki odzwierciedlały rzeczywistą czcionkę.