Font-Resizer und Schriftzuschnitt

Erst nochmal font-size * Schriftgröße in HTML-Seiten

Zur Darstellung sich verändernden Schriftzuschnitt war mal das Plug-in Font-Resizer sehr gut. Desselben Effekts ist mit des Browsers Zoom. Das Plug-in Font-Resitzer ist hier nicht mehr. Das nun stellt nur mehr einen Lernschritt zur Unterscheidung von so Auszeichnungen zur Schriftgröße.

Die „Schrifgrößenanpassung“ in der Seitenleiste verwenden:

A A A

Darstellungen als Beispiel
Grundeinstellung Plug-in „font-resizer“:
Überschriften (WP-Editor)

Normaler Text WP-Editor

Hoch- oder tiefgestellter Text, WP-Editor

Relative Schriftgröße „smaller“/(larger)

Absolute Schriftgröße „small“/(large)

Textmuster in Pixel, px
Textmuster in Punkten, pt
Ein Textmuster in rem

Textmuster Prozentual, %
Ein Textmuster in em

Aus diesen Beispielen ist zu erkennen, dass die Formatierungen,

  • Normaler Text WP-Editor
  • Hoch- oder tiefgestellter Text, WP-Editor
  • Relative Schriftgröße „smaller“/(larger)
  • Textmuster Prozentual, %
  • Ein Textmuster in em,

mit der Vergrößerung bzw. Verkleinerung einhergehen – dagegen bei den Auszeichnungen:

  • Überschriften (WP-Editor)
  • Absolute Schriftgröße „small“/(large)
  • Textmuster in Pixel
  • Textmuster in Punkten
  • Ein Textmuster in rem,

das Schriftgrößenbild bleibt gleich.

Zusammenfassend, die Überschriften und absoluten Auszeichnungen: small, large, px, pt, sowie rem wird die Schriftvergrößerung durch Font-Resizer nicht angesprochen.

WP normaler Text und hoch- oder tiefgestellt, relativen Auszeichnungen: smaller, larger, sowie prozentual % und em sind vom Font-Resizer (Grundeinstellung) ansprechbar.

Der Hinsicht kann man ebenso beachten, die Schriftgrößen in Tabellen (via WP-Editor oder Selbige) bleiben vom Font-Resizer unbeeinflusst:

<table>       
<tbody>        
<tr>       
<td>normaler Text, WP-Editor</td>        
<td><span style="font-size: 100%;">Textmuster Prozentual </span></td>        
<td><span style="font-size: 1em;">Textmuster in em</span></td>       
</tr>      
<tr>       
<td><span style="font-size: 14px;">Textmuster in Pixel</span></td>       
<td><span style="font-size: 10.5pt;">Textmuster in Punkten</span></td>       
<td><span style="font-size: 0.9rem;">Textmuster in rem</span></td>       
</tr>      
</tbody>       
</table>

… wird visuell:

normaler Text, WP-Editor Textmuster Prozentual Textmuster in em
Textmuster in Pixel Textmuster in Punkten Textmuster in rem

Mit einem nun folgenden Rahmen verändert sich die Schriftgröße wie gehabt (Anmerkung: Zur einheitlichen Darstellung der Schrift, bei pt und rem sind andere Attributwerte wie oben der Tabelle) – also z. B.:

<p style="width; margin: 0px; border: 1px solid #a4d3ee; padding: 25px;">normaler Text,  WP-Editor      
<span style="font-size: 100%;">Textmuster Prozentual </span>         
<span style="font-size: 1em;">Textmuster in em</span>       
<!--more-->        
<span style="font-size: 16px;">Textmuster in Pixel</span>        
<span style="font-size: 12pt;">Textmuster in Punkten</span>      
<span style="font-size: 1rem;">Textmuster in rem</span></p>

wird dargestellt als:

normaler Text, WP-Editor
Textmuster Prozentual, %
Textmuster in em

Textmuster in Pixel
Textmuster in Punkten
Textmuster in rem


Plug-in Font-Resizer