Sintassi

Significato dei valori principali:

• px: Valore assoluto in pixel. Esempio: 16px.

• em: Valore relativo alla dimensione del font dell'elemento padre. Esempio: 1.2em.

• rem: Valore relativo alla dimensione del font dell'elemento radice (html). Esempio: 1rem.

• %: Percentuale rispetto alla dimensione del font dell'elemento genitore. Esempio: 120%.

• pt: Valore assoluto in punti tipografici. 1pt equivale a 1/72 di pollice (circa 0.3527 mm). Utilizzato principalmente nei CSS per la stampa. Esempio: 12pt.

• xx-small, x-small, small, medium, large, x-large, xx-large: parole chiave predefinite per dimensioni relative.

Esempio proprietà: font-size

Codice Esempio: font-size

CODE: CSS

1. .font-size-example {

2.   background-color: #e6f7ff;

3.   border: 2px solid #00aaff;

4.   border-radius: 8px;

5.   padding: 20px;

6.   margin-bottom: 20px;

7.   text-align: center;

8.   color: #003344;

9. }

11. .small-text {

12.   font-size: 12px;

13. }

15. .medium-text {

16.   font-size: 1.2em;

17. }

19. .large-text {

20.   font-size: 2rem;

21. }

Contenuto Esempio: font-size

  
  <style>
    .font-size-example {
      background-color: #e6f7ff;
      border: 2px solid #00aaff;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
      text-align: center;
      color: #003344;
    }

    .small-text {
      font-size: 12px;
    }

    .medium-text {
      font-size: 1.2em;
    }

    .large-text {
      font-size: 2rem;
    }
  </style>

  <div class="font-size-example small-text">
    Questo è un testo piccolo (12px)
  </div>

  <div class="font-size-example medium-text">
    Questo è un testo medio (1.2em)
  </div>

  <div class="font-size-example large-text">
    Questo è un testo grande (2rem)
  </div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser