Caratteri misti visivamente stabili

Quando si combinano famiglie di caratteri diverse, ad esempio quando si inseriscono snippet di codice incorporati o si cambiano le famiglie di caratteri per temi diversi, le differenze nell'"altezza x" (l'altezza delle lettere minuscole) possono far apparire un carattere molto più piccolo o più grande dell'altro. Ciò può causare una scarsa leggibilità e variazioni del layout.

La proprietà font-size-adjust consente di normalizzare le dimensioni visive del testo regolando le dimensioni del carattere in base a una metrica specifica del carattere (di solito l'altezza x).

Procedura di implementazione

1. OBBLIGATORIO: applica font-size-adjust agli elementi in cui la coerenza dei caratteri è fondamentale, ad esempio i contenitori che utilizzano caratteri web o i blocchi con famiglie di caratteri miste.
2. OBBLIGATORIO: utilizza la parola chiave from-font sugli elementi per adattare automaticamente le dimensioni del carattere negli elementi nidificati alle proporzioni del carattere principale.
3. OBBLIGATORIO: utilizza un valore di override delle proporzioni numerico specifico per font-size-adjust (ad es. font-size-adjust: 0.5) per normalizzare le proporzioni in modo indipendente quando le proporzioni del carattere su cui basarsi provengono da temi diversi.

Esempio: normalizzazione automatica dell'altezza x

L'utilizzo di from-font è l'approccio più efficace. Estrae le proporzioni dell'altezza x dal primo carattere disponibile e le applica ai caratteri negli elementi secondari.

.content-area {
  font-family: "MyCustomWebFont";
  /* Automatically extract and apply x-height ratio from MyCustomWebFont */
  font-size-adjust: from-font;
}
.content-area span{
  font-family: "MyOtherCustomWebFont"
}

Esempio: specifica di un'altezza x specifica

Quando il carattere da regolare non è un carattere secondario di quello su cui basare la dimensione, specifica un valore per regolare l'altezza x.

.theme{
  font-family: Verdana, sans-serif;
}
.theme.alternate{
  font-family: Times;
  /* Set to the aspect ratio (x-height / font-size) of the primary font */
  font-size-adjust: 0.51;
}

Strategie di riserva

OBBLIGATORIO: nei browser che non supportano font-size-adjust, i caratteri verranno visualizzati con il loro valore font-size naturale. Per mitigare questo problema, devi fornire una strategia di riserva valida per i browser non supportati utilizzando un blocco @supports:

• Utilizza @supports not (font-size-adjust: from-font) per rilevare il supporto di font-size-adjust e fornire stili di riserva (ad es. altezza della riga o dimensione del carattere modificata).
• Scegli caratteri con un'altezza x simile a quella del carattere principale.
• Applica override font-size e line-height specifici per famiglie di caratteri alternative e nidificate.

/* Feature detection for font-size-adjust */
@supports not (font-size-adjust: from-font) {
  .content-area {
    /* Manual adjustment for browsers without support (if needed) */
    line-height: 1.6;
    font-size: 1.2rem;
  }
}