Kuidas mõõdetakse teksti laiust?

Teksti laius viitab horisontaalsele pikselruumile, mille hõivab märkide jada, kui see renderdatakse konkreetse fondi, suuruse ja paksusega. Erinevalt märkide arvust sõltub piksellaius iga glüüfi proportsionaalsest vahendusest — täht "W" on enamikus fontides palju laiem kui "i". Teksti laiuse täpne mõõtmine on oluline kasutajaliidese paigutuse, sildi kärbimise, dünaamilise lõuendi renderdamise ja stringide mahutamiseks fikseeritud laiusega konteineritesse.

Brauserid pakuvad HTML5 Canvas API measureText() meetodit, mis arvutab renderdatud teksti laiust ilma seda ekraanil kuvamata. Joonistades väljaspool ekraani canvas konteksti, saab saavutada täpse alampiksli mõõtmise mis tahes fondi perekonna, suuruse ja paksuse kombinatsiooni jaoks.

Tööriista kirjeldus

See tööriist arvutab ühe või kahe tekstistringi piksellaius Canvas API abil. Valige fondi perekond, määrake fondi suurus ja paksus ning näete kohe renderdatud piksellaius. Kui sisestate kaks stringi, näitab võrdlusvaade absoluutset erinevust ja laiuse suhet nende vahel.

Funktsioonid

  • Toetab kõiki veebis olevaid süsteemifonte ja kohandatud üleslaaditud fontifaile (TTF, OTF, WOFF, WOFF2)
  • Võrrelge korraga kahte stringi erinevuse ja suhte statistikaga
  • Reguleeritav fondi suurus 1 kuni 256 px ja kõik üheksa standardset fondi paksuse väärtust

Kuidas see töötab

Laius mõõdetakse brauseri CanvasRenderingContext2D.measureText() API abil. Luuakse väljaspool ekraani <canvas> element, selle 2D konteksti font omadus määratakse valitud perekonna, suuruse ja paksusega vastavaks ning measureText() tagastab piiritlusboksi laiuse pikslites. Kohandatud fondid laetakse enne mõõtmist brauseri FontFace registrisse, nii et tulemused peegeldavad tegelikku kirjatüüpi.