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> Provalo adesso 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> Provalo adesso 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.
Provalo adessoDimensione 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> Provalo adesso