CSS -Schriftgröße Eigenschaft | Erklärt

CSS -Schriftgröße Eigenschaft | Erklärt

In Cascading Style Sheets (CSS), Schriftstelle von Schriftgröße besitzt große Bedeutung. Es stellt sicher. Die Hierarchie hilft bei der Unterscheidung von Überschriften und Unterlagen des normalen Textes. Die CSS-Schriftgröße verwendet mehrere Größeneinheiten wie Pixel, EM, Breite und Prozentwerte. Darüber hinaus werden verschiedene Überschriften verwendet, die von

Zu

.

In dieser Beschreibung werden die Eigenschaft in der Schriftgröße in CSS besprochen. Wir werden auch lehren, wie man das explizit benutzt Vordefinierte und benutzerdefinierte Eigenschaften der Schriftgröße für Textelemente. So lass uns anfangen!

CSS-Schriftgröße

In CSS wird die Eigenschaft mit Schriftgrößen verwendet, um die Größe eines Textelements festzulegen, und ihr Wert kann sein "Vordefiniert" oder "benutzerdefinierte Größe".

In den folgenden Abschnitten werden wir kurz über die vordefinierten und benutzerdefinierten Schriftgröße CSS-Werte in der Eigenschaft Schriftgröße sprechen.

CSS-Schriftgrößeneigenschaft unter Verwendung vordefinierter Werte

CSS liefert vordefinierte Werte für das Festlegen der Schriftgrößen von Texten. Die CSS-Schriftgröße wird verwendet, wenn wir über die Informationen zur physischen Größe der Ausgabe verfügen. Darüber hinaus ermöglichen Browser die Textgröße aus schlechten Gründen nicht, um die Textgröße zu ändern.

Schauen Sie sich die folgende Liste der vordefinierten Eigenschaftswerte der CSS-Schriftgröße an:

  • Xx-small
  • X-Small
  • Klein
  • Mittel
  • Groß
  • X-large
  • Xx-large

Schauen wir uns nun die Syntax der Bereitstellung vordefinierter Werte für die Eigenschaft an, die sich mit der Größe der Größe befassen:

Syntax der Bereitstellung vordefinierter Werte für die Eigenschaft der Schriftgröße

Schriftgröße: Medium | groß | x-large | xx-large | xx-small | x-small | klein |;

Hier müssen wir einen bestimmten Wert für die hinzufügen "Schriftgröße" Eigentum.

Beispiel: Bereitstellung vordefinierter Werte für die Eigenschaft Schriftgröße

In diesem Beispiel geben wir verschiedene vordefinierte Eigenschaftswerte für die Schriftgröße für Absatzelemente an:

Dies ist XX-Large-Text.

Dies ist X-Large-Text.


Dies ist großer Text.


Dies ist mittlerer Text.


Das ist ein kleiner Text.


Dies ist X-Small-Text.


Dies ist XX-Small-Text.

Öffnen Sie die HTML -Datei in einem Browser, nachdem Sie den angegebenen Code hinzugefügt haben. Auf diese Weise hat der Text der Absätze das folgende Format:


Im nächsten Abschnitt werden wir die Verwendung von demonstrieren "Brauch" Eigenwerte der Schriftgröße.

CSS-Schriftgrößeneigenschaft mit benutzerdefinierten Werten

Durch Bereitstellung der benutzerdefinierte Werte für die Eigenschaft der Schriftgröße, Sie können die festlegen Größe einer Schriftart gemäß den umgebenden Elementen, und diese Eigenschaft ermöglicht es einem Benutzer auch, die Schriftgröße in Browsern zu ändern.

In CSS umfasst die Eigenschaft mit Schriftgröße die folgenden benutzerdefinierten Werte:

  • Schriftgröße mit Pixeln
  • Schriftgröße mit em
  • Schriftgröße mit prozentualen Werten
  • Responsive Schriftgröße

CSS-Schriftgrößeneigenschaft mit Pixeln

In dieser Methode, "Pixel" werden verwendet, um den Wert der Eigenschaft mit Schriftgröße festzulegen und dem Benutzer eine vollständige Kontrolle über die Textgrößensteuerung zu bieten. Es ist ein statischer Wert, der völlig osunabhängig ist.

Beispiel: CSS-Schriftgrößeneigenschaft mit Pixeln

Jetzt werden wir die Schriftgröße der Absatzelemente nach verschiedenen Pixelwerten wie z. B. festlegen "50px", "40px" und "30px":

Wir weisen diesem Text "50px" zu.

Wir weisen diesem Text "40px" zu.


Wir weisen diesem Text "30px" zu.

Ausgang

Wie Sie aus der angegebenen Ausgabe erkennen können, wird die Textgröße der Absätze gemäß den angegebenen Pixelwerten festgelegt.

CSS-Schriftgrößeneigenschaft mit EM

Der "Em" Werte des CSS Font-Größe-Immobilie werden verwendet, um die Größe des Textes gemäß der übergeordneten Schriftgröße in Browsern festzulegen. Viele Entwickler bevorzugen "Em" über "Pixel" Weil es ein gutes Kompatibilitätsniveau für die Browser bietet.

Notiz: In einem Browser wird die Standardtextgröße auf festgelegt 16 Pixel und ein EM, was bedeutet, dass 1 em = 16 Pixel.

Schauen Sie sich das untergegebene Beispiel an:

Beispiel: CSS-Schriftgrößeneigenschaft mit EM

In diesem Beispiel werden wir die festlegen "Em" Wert für die Textelemente wie das vorhergehende Beispiel. Dazu werden wir die Anzahl der Pixel teilen "16" Geben Sie dann den resultierenden Wert als Eigenschaftswert der Schriftgröße der hinzugefügten Elemente an:







Dies ist Überschrift 1


Dies ist Überschrift 2


Dies ist ein Absatz.



Die angegebene Ausgabe bedeutet, dass wir die Schrift im Bereich der Schriftgröße erfolgreich angewendet haben "Em" Werte:

CSS-Schriftgrößeneigenschaft mit prozentualen Werten

Wir können die Schriftgröße auch in Bezug auf Prozentsatz, und bei dieser Methode kann der Prozentsatz der Schriftart erhöht werden 100%.

Beispiel: CSS-Schriftgröße mit prozentualen Werten

Jetzt werden wir dem unterschiedlichen Prozentwerte zuweisen "Schriftgröße" Eigenschaften der Absatzelemente:



Dies hat 130% der Schriftgröße Text.


Dies hat 120% der Schriftgröße Text.


Dies hat einen 90% igen Text der Schriftgröße.


Dies hat 70% der Schriftgröße Text.



Ausgang

CSS Responsive Schriftgröße Eigenschaft

Mit CSS Responsive Font-Size-Eigenschaft, Sie können die Textgröße auch gemäß der Breite des Ansichtsfensters Ihres Browserfensters festlegen. Zu diesem Zweck die "VW" Einheitswert wird verwendet, während 1VW = 1% der Ansichtsfensterbreite.

Notiz: Wenn der Benutzer die Schriftgröße des Textes nicht definiert, ist die Standardgröße eines Textes gleich zu 16 px oder 1em.

Beispiel: CSS Responsive Font-Size-Eigenschaft




Beispiel Responsive Text


Die Größe des Browserfensters überprüft, um die Skalierbarkeit von Text zu überprüfen.



Ausgang

Im oben gegebenen Beispiel kann der Text gemäß dem Browser geändert werden und folgt der Größe des Browserfensters.

Abschluss

In CSS wird die Eigenschaft mit Schriftgrößen verwendet, um die Größe eines Textelements festzulegen, und ihr Wert kann sein "Vordefiniert" oder "Custom". Mehrere Messeinheiten wie z Pixel-, EM-, Ansichtsfenster-, Breiten- und Prozentwerte werden als Werte der Schriftgröße angegeben. In diesem Artikel wurde die Eigenschaft CSS-Schriftgröße besprochen und die Methode gezeigt, um die explizit zu verwenden Vordefinierte und benutzerdefinierte Eigenschaft in Schriftgröße Werte für Textelemente.