Kuinka tekstin leveys mitataan?

Tekstin leveys viittaa vaakasuuntaiseen pikseliavaruuteen, jonka merkkijono vie näytettäessä tietyllä fontilla, koolla ja painolla. Toisin kuin merkkien lukumäärä, pikselileveysriippuu kunkin glyfin suhteellisesta välistyksestä — kirjain "W" on paljon leveämpi kuin "i" useimmissa fonteissa. Tekstin leveyden tarkka mittaaminen on tärkeää käyttöliittymän asettelussa, otsikon katkaisussa, dynaamisessa canvas-renderöinnissä ja merkkijonojen sovittamisessa kiinteän levyisiin säilöihin.

Selaimet tarjoavat HTML5 Canvas API:n measureText()-metodin, joka laskee renderöidyn tekstin leveyden näyttämättä sitä näytöllä. Piirtämällä näkymättömälle canvas-kontekstille voidaan saada tarkka ali-pikselitarkkuuden mittaus mille tahansa fontin perheen, koon ja painon yhdistelmälle.

Työkalun kuvaus

Tämä työkalu laskee yhden tai kahden tekstimerkkijonon pikselileveyttä Canvas API:n avulla. Valitse fonttiperhe, aseta fontin koko ja paino, ja näet välittömästi renderöidyn pikselileveuden. Kun kaksi merkkijonoa syötetään, vertailunäkymä näyttää absoluuttisen eron ja leveyden suhteen niiden välillä.

Ominaisuudet

  • Tukee kaikkia web-turvallisia järjestelmäfontteja ja mukautettuja ladattuja fontitiedostoja (TTF, OTF, WOFF, WOFF2)
  • Vertaile kahta merkkijonoa kerralla eron ja suhdetilastojen kanssa
  • Säädettävä fontin koko 1–256 px:stä ja kaikki yhdeksän vakiopainon arvoa

Kuinka se toimii

Leveys mitataan selaimen CanvasRenderingContext2D.measureText() API:lla. Näkymätön <canvas>-elementti luodaan, sen 2D-kontekstin font-ominaisuus asetetaan vastaamaan valittua perhettä, kokoa ja painoa, ja measureText() palauttaa rajoituslaatikon leveyden pikseleinä. Mukautetut fontit ladataan selaimen FontFace-rekisteriin ennen mittausta, jotta tulokset heijastavat todellista kirjasinta.