Hur mäts textbredd?

Textbredd avser det horisontella pixelutrymmet som en teckensträng upptar när den renderas med ett specifikt typsnitt, storlek och vikt. Till skillnad från teckenantal beror pixelbredden på det proportionella avståndet för varje glyf — bokstaven "W" är mycket bredare än "i" i de flesta typsnitt. Korrekt mätning av textbredd är viktigt för UI-layout, etikettrunkering, dynamisk canvasrendering och anpassning av strängar i behållare med fast bredd.

Webbläsare exponerar HTML5 Canvas API:s measureText()-metod, som beräknar renderad textbredd utan att visa den på skärmen. Genom att rita till en offscreen canvas-kontext kan en exakt sub-pixelmätning erhållas för vilken kombination som helst av typsnittsfamilj, storlek och vikt.

Verktygsbeskrivning

Det här verktyget beräknar pixelbredden på en eller två textsträngar med Canvas API. Välj en typsnittsfamilj, ställ in teckenstorleken och vikten, och se omedelbar pixelbredd. När två strängar anges visar en jämförelsevyn den absoluta skillnaden och breddkvoten mellan dem.

Funktioner

  • Stöder alla webbaserade systemtypsnitt och anpassade uppladdade teckensnitsfiler (TTF, OTF, WOFF, WOFF2)
  • Jämför två strängar samtidigt med skillnads- och kvotstatistik
  • Justerbar teckenstorlek från 1 till 256 px och alla nio standardtypsnittsviktvärden

Hur det fungerar

Bredden mäts med webbläsarens CanvasRenderingContext2D.measureText() API. Ett offscreen <canvas>-element skapas, dess 2D-kontexttypsnittsegenskap ställs in för att matcha den valda familjen, storleken och vikten, och measureText() returnerar begränsningsboxens bredd i pixlar. Anpassade typsnitt läses in i webbläsarens FontFace-register före mätning så att resultaten återspeglar det faktiska typsnittet.