La proprietà font-size nei CSS viene utilizzata per specificare l'altezza e la dimensione del carattere. Influisce sulla dimensione del testo di un elemento. Il suo valore predefinito è medio e può essere applicato a ogni elemento. I valori di questa proprietà includono xx-piccolo , piccolo , x-piccolo , eccetera.

Sintassi

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

La dimensione del carattere può essere relativa o assoluta.

coda di Giava

Dimensione assoluta

Viene utilizzato per impostare il testo su una dimensione definita. Utilizzando la dimensione assoluta, non è possibile modificare la dimensione del testo in tutti i browser. È vantaggioso conoscere la dimensione fisica dell'output.

Dimensioni relative

Viene utilizzato per impostare la dimensione del testo rispetto agli elementi vicini. Con la dimensione relativa è possibile modificare la dimensione del testo nei browser.

NOTA: Se non definiamo una dimensione del carattere, per il testo normale come i paragrafi, la dimensione predefinita è 16px, che è uguale a 1em.

Dimensione del carattere con pixel

Quando impostiamo la dimensione del testo con i pixel, ci fornisce il pieno controllo sulla dimensione del testo.

Esempio

 #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> 

Dimensione del carattere con em

Viene utilizzato per ridimensionare il testo. La maggior parte degli sviluppatori preferisce In invece di pixel . È raccomandato dal consorzio world wide web (W3C). Come indicato sopra, la dimensione predefinita del testo nei browser è 16px. Quindi, possiamo dire che la dimensione predefinita di 1em È 16px .

raccolta Java

La formula per calcolare la dimensione da pixel A In È em = pixel/16 .

Esempio

 #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> 

Dimensione del carattere reattivo

Possiamo impostare la dimensione del testo utilizzando a unità vw , che sta per ' larghezza della finestra '. Il viewport è la dimensione della finestra del browser.

1vw = 1% della larghezza della finestra.

Se la larghezza del viewport è 50 cm, allora 1vw è pari a 0,5 cm.

elenco doppiamente concatenato

Esempio

Primo paragrafo avente la larghezza di 5vw.

Secondo paragrafo avente la larghezza di 10 vw.

Dimensione del carattere con la proprietà length

Viene utilizzato per impostare la dimensione del carattere in lunghezza. La lunghezza può essere in cm, px, pt, ecc. Valori negativi di lunghezza non sono consentite nella dimensione del carattere.

Sintassi

 font-size: length; 

Esempio

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