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