Wie wird die Textbreite gemessen?

Textbreite bezieht sich auf den horizontalen Pixelraum, den eine Zeichenkette bei Darstellung mit einer bestimmten Schriftart, Größe und Gewichtung einnimmt. Im Gegensatz zur Zeichenanzahl hängt die Pixelbreite vom proportionalen Abstand jedes Glyphen ab — der Buchstabe „W" ist in den meisten Schriftarten viel breiter als „i". Das genaue Messen der Textbreite ist wichtig für UI-Layouts, Beschriftungskürzung, dynamisches Canvas-Rendering und das Anpassen von Zeichenketten an Container mit fester Breite.

Browser stellen die measureText()-Methode der HTML5 Canvas API zur Verfügung, die die gerenderte Textbreite berechnet, ohne sie auf dem Bildschirm anzuzeigen. Durch das Zeichnen auf einen Canvas-Kontext außerhalb des Bildschirms kann eine präzise Messung mit Subpixel-Genauigkeit für jede Kombination von Schriftfamilie, Größe und Gewichtung erreicht werden.

Werkzeugbeschreibung

Dieses Werkzeug berechnet die Pixelbreite einer oder zwei Textzeichenketten mit der Canvas API. Wählen Sie eine Schriftfamilie aus, legen Sie die Schriftgröße und das Gewicht fest, und sehen Sie sofort die gerenderte Pixelbreite. Wenn zwei Zeichenketten eingegeben werden, zeigt eine Vergleichsansicht den absoluten Unterschied und das Breitenverhältnis zwischen ihnen.

Funktionen

  • Unterstützt alle websicheren Systemschriftarten und benutzerdefinierte hochgeladene Schriftdateien (TTF, OTF, WOFF, WOFF2)
  • Vergleichen Sie zwei Zeichenketten gleichzeitig mit Differenz- und Verhältnisstatistiken
  • Einstellbare Schriftgröße von 1 bis 256 px und alle neun standardmäßigen Schriftgewichtswerte

Funktionsweise

Die Breite wird mit der CanvasRenderingContext2D.measureText()-API des Browsers gemessen. Ein Canvas-Element außerhalb des Bildschirms wird erstellt, seine 2D-Kontexteigenschaft für die Schriftart wird so eingestellt, dass sie der ausgewählten Familie, Größe und dem Gewicht entspricht, und measureText() gibt die Begrenzungsrahmenbreite in Pixeln zurück. Benutzerdefinierte Schriftarten werden vor der Messung in die FontFace-Registry des Browsers geladen, damit die Ergebnisse die tatsächliche Schriftart widerspiegeln.