Die Eigenschaft „font-size“ in CSS wird verwendet, um die Höhe und Größe der Schriftart anzugeben. Es beeinflusst die Größe des Textes eines Elements. Der Standardwert ist mittel und kann auf jedes Element angewendet werden. Die Werte dieser Eigenschaft umfassen: xx-klein , klein , x-klein , usw.

Syntax

 font-size: medium|large|x-large|xx-large|xx-small|x-small|small|; 

Die Schriftgröße kann relativ oder absolut sein.

Absolute Größe

Damit wird der Text auf eine bestimmte Größe eingestellt. Mit der absoluten Größe ist es nicht in allen Browsern möglich, die Textgröße zu ändern. Es ist von Vorteil, wenn wir die physikalische Größe der Ausgabe kennen.

Relative Größe

Es wird verwendet, um die Größe des Textes im Verhältnis zu seinen benachbarten Elementen festzulegen. Mit der relativen Größe ist es möglich, die Größe des Textes in Browsern zu ändern.

HINWEIS: Wenn wir keine Schriftgröße definieren, beträgt die Standardgröße für normalen Text wie Absätze 16 Pixel, was 1em entspricht.

Schriftgröße mit Pixeln

Wenn wir die Textgröße mit Pixeln festlegen, haben wir die volle Kontrolle über die Textgröße.

Beispiel

 #first { font-size: 40px; } #second { font-size: 20px; } <p id="first">This is a paragraph having size 40px.</p> <p id="second">This is another paragraph having size 20px.</p> 

Schriftgröße mit em

Es wird verwendet, um die Größe des Textes zu ändern. Die meisten Entwickler bevorzugen In anstatt Pixel . Es wird vom World Wide Web Consortium (W3C) empfohlen. Wie oben erwähnt beträgt die Standardtextgröße in Browsern 16 Pixel. Wir können also sagen, dass die Standardgröße von 1em Ist 16px .

Die Formel zur Berechnung der Größe aus Pixel Zu In Ist em = Pixel/16 .

Beispiel

 #first { font-size: 2.5em; /* 40px/16=2.5em */ } #second { font-size: 1.875em; /* 30px/16=1.875em */ } #third { font-size: 0.875em; /* 14px/16=0.875em */ } <p id="first">First paragraph.</p> <p id="second">Second paragraph</p> <p id="third">Third Paragraph.</p> 

Responsive Schriftgröße

Wir können die Größe des Textes festlegen, indem wir a verwenden VW-Einheit , was für „ Breite des Ansichtsfensters '. Der Ansichtsbereich entspricht der Größe des Browserfensters.

1vw = 1 % der Breite des Ansichtsfensters.

Wenn die Breite des Ansichtsfensters 50 cm beträgt, entspricht 1vw 0,5 cm.

Beispiel

Der erste Absatz hat die Breite 5vw.

Zweiter Absatz mit einer Breite von 10 vw.

Schriftgröße mit der Eigenschaft length

Es wird verwendet, um die Schriftgröße in der Länge festzulegen. Die Länge kann in cm, px, pt usw. angegeben werden. Negative Werte von Länge -Eigenschaft sind in der Schriftgröße nicht zulässig.

Syntax

 font-size: length; 

Beispiel

 .length { color:red; font-size: 5cm; } <p class="length">A paragraph having length 5cm.</p>