Hvordan måles tekstbredde?

Tekstbredde refererer til det horisontale pikselrommet som en tekststreng opptar når den gjengis med en bestemt skrifttype, størrelse og vekt. I motsetning til tegntelling, avhenger pikselbredden av den proporsjonale avstanden til hver glyf — bokstaven "W" er langt bredere enn "i" i de fleste skrifttyper. Nøyaktig måling av tekstbredde er viktig for UI-oppsett, etikettkortning, dynamisk lerretgjengivelse og tilpasning av strenger i beholdere med fast bredde.

Nettlesere eksponerer HTML5 Canvas API-metoden measureText(), som beregner gjengitt tekstbredde uten å vise den på skjermen. Ved å tegne til en skjult lerretskontekst kan en nøyaktig sub-piksel-måling oppnås for enhver kombinasjon av skriftfamilie, størrelse og vekt.

Verktøybeskrivelse

Dette verktøyet beregner pikselbredden på en eller to tekststrenger ved hjelp av Canvas API. Velg en skriftfamilie, angi skriftstørrelse og vekt, og se umiddelbar gjengitt pikselbredde. Når to strenger angis, viser en sammenligningsvisning den absolutte forskjellen og breddeforholdet mellom dem.

Funksjoner

  • Støtter alle websikre systemskrifttyper og egendefinerte opplastede skriftfiler (TTF, OTF, WOFF, WOFF2)
  • Sammenlign to strenger samtidig med differanse- og forholdsstatistikk
  • Justerbar skriftstørrelse fra 1 til 256 px og alle ni standard skriftvektverdier

Hvordan det fungerer

Bredden måles ved hjelp av nettleserens CanvasRenderingContext2D.measureText() API. Et skjult <canvas>-element opprettes, dets 2D-kontekstskriftegenskapen settes til å samsvare med den valgte familien, størrelsen og vekten, og measureText() returnerer grenseboksbredden i piksler. Egendefinerte skrifttyper lastes inn i nettleserens FontFace-register før måling slik at resultatene gjenspeiler den faktiske typografien.