Aggiustamento delle dimensioni CSS per @font-face

Ora, quando carichi un carattere web, puoi regolarne la scala per normalizzare le dimensioni dei caratteri del documento ed evitare il cambiamento del layout quando passi da un carattere all'altro.

Considera quanto segue. dimostrazione dove font-size è un 64px coerente e l'unica differenza tra ciascuna di queste intestazioni è font-family. Gli esempi a sinistra non sono stati modificati e hanno dimensioni finali incoerenti. Gli esempi a destra utilizzano size-adjust per assicurati che 64px sia la dimensione finale coerente.

Questo post esplora un nuovo descrittore font-face CSS chiamato size-adjust. Inoltre, illustra alcuni modi per correggere e normalizzare le dimensioni dei caratteri per un'esperienza utente più fluida, sistemi di design coerenti e un layout delle pagine più prevedibile. Un caso d'uso importante è l'ottimizzazione del rendering dei caratteri web per evitare la variazione cumulativa del layout (CLS).

Ecco una demo interattiva dello spazio dei problemi. Prova a cambiare il carattere tipografico con il menu a discesa e osserva quanto segue:

1. Le differenze di altezza nei risultati.
2. Cambiamenti visivamente sgradevoli dei contenuti.
3. Spostamento delle aree di destinazione interattive (il menu a discesa salta).

Come ridimensionare i caratteri con size-adjust

Un'introduzione alla sintassi:

@font-face {
  font-family: "Adjusted Typeface";
  size-adjust: 150%;
  src: url(some/path/to/typeface.woff2) format('woff2');
}

1. Crea un carattere tipografico personalizzato denominato Adjusted Typeface.
2. Utilizza size-adjust per aumentare le dimensioni di ogni glifo del 150% rispetto alle dimensioni predefinite.
3. Interessa solo il singolo carattere tipografico importato.

Utilizza il carattere tipografico personalizzato riportato sopra, come segue:

h1 {
  font-family: "Adjusted Typeface";
}

Ridurre il CLS con lo scambio di caratteri senza interruzioni

Nella GIF seguente, guarda gli esempi sulla sinistra e le variazioni quando il carattere viene modificato. Questo è solo un piccolo esempio con un solo titolo e il problema è molto evidente.

Per migliorare il rendering dei caratteri, un'ottima tecnica è il caratteri in sostituzione. Esegui il rendering di un carattere di sistema con caricamento rapido per mostrare prima i contenuti, quindi sostituiscilo con un carattere web al termine del caricamento. In questo modo, puoi ottenere il meglio da entrambi i mondi: i contenuti sono visibili il prima possibile e ottieni una pagina ben formattata senza sacrificare il tempo di attesa degli utenti. Il problema, però, è che a volte al caricamento del carattere web, sposta l'intera pagina poiché si presenta dimensioni della scatola leggermente diverse.

Inserendo size-adjust nella regola @font-face, viene impostato un aggiustamento globale dei glifi per il tipo di carattere. Un tempo stabilito in questo modo garantisce un'immagine minima cambiamento, uno scambio fluido. Per creare uno scambio senza problemi, regola manualmente le dimensioni o prova questo calcolatore per la regolazione delle dimensioni di Malte Ubl.

All'inizio di questo post, la correzione del problema relativo alle dimensioni dei caratteri è stata eseguita per tentativi ed errori. size-adjust è stato modificato nel codice sorgente finché la stessa intestazione in Cookie e Arial non ha generato lo stesso 64px di Press Start 2P in modo naturale. Ho allineato due caratteri a una dimensione di carattere target.

@font-face {
  font-family: 'Adjusted Arial';
  size-adjust: 86%;
  src: local(Arial);
}

@font-face {
  font-family: 'Cookie';
  size-adjust: 90.25%;
  src: url(...woff2) format('woff2');
}

Calibrazione dei caratteri

In qualità di autore, stabilisci i target di calibrazione per la normalizzazione del carattere su larga scala. Puoi normalizzare su Times, Arial o un carattere di sistema, quindi regolare i caratteri personalizzati in modo che corrispondano. In alternativa, puoi adattare i caratteri locali a ciò che scarichi.

Strategie per la calibrazione di size-adjust:

1. Target remoto:
   adatta i caratteri locali ai caratteri scaricati.
2. Target locale:
   adatta i caratteri scaricati in base a caratteri target locali.

Esempio 1: destinazione remota

Prendi in considerazione il seguente snippet che regola le dimensioni di un carattere disponibile localmente in modo che corrispondano a quelle di un carattere personalizzato di origine remoto. Un carattere personalizzato remoto è lo scopo calibrazione, un carattere del brand, ad esempio:

@font-face {
  font-family: "Adjusted Regular Arial For Brand";
  src: local(Arial);
  size-adjust: 90%;
}

@font-face {
  font-family: "Rad Brand";
  src: url(some/path/to/a.woff2) format('woff2');
}

html {
  font-family: "Rad Brand", "Adjusted Regular Arial For Brand";
}

In questo esempio, il carattere locale Arial viene modificato in previsione del caricamento di un carattere personalizzato, per un cambio senza interruzioni.

Questa strategia offre il vantaggio di offrire a designer e sviluppatori la stessa per dimensioni e tipografia. Il brand è il target di calibrazione. Questo è sono ottime notizie per i sistemi di progettazione.

Anche la calcolatrice di Malte funziona impostando come target il carattere tipografico di un brand. Scegliendo un carattere Google, calcolerà come modificare Arial in modo che scambialo. Ecco un esempio di CSS Roboto dal calcolatrice, dove Arial viene caricato e denominato "Roboto-fallback":

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: local("Arial");
}

Per creare un aggiustamento completamente multipiattaforma, consulta l'esempio seguente, che fornisce due caratteri di riserva locali modificati in previsione dell'utilizzo di un carattere del brand.

@font-face {
    font-family: "Roboto-fallback-1";
    size-adjust: 100.06%;
    src: local("Arial");
}

@font-face {
    font-family: "Roboto-fallback-2";
    size-adjust: 99.94%;
    src: local("Arimo");
}

@font-face {
  font-family: "Roboto Regular";
  src: url(some/path/to/roboto.woff2) format('woff2');
}

html {
  font-family: "Roboto Regular", "Roboto-fallback-1", "Roboto-fallback-2";
}

Esempio 2: target locale

Considera il seguente snippet che regola un carattere personalizzato del brand in modo che corrisponda ad Arial:

@font-face {
  font-family: "Rad Brand - Adjusted For Arial";
  src: url(some/path/to/a.woff2) format('woff2');
  size-adjust: 110%;
}

html {
  font-family: "Rad Brand - Adjusted For Arial", Arial;
}

Questa strategia offre il vantaggio di una visualizzazione senza modifiche, quindi adattando i caratteri in arrivo.

Ottimizzazione con ascent-override, descent-override e line-gap-override

Se il ridimensionamento generico dei glifi non è sufficiente per modificare il progetto o il caricamento strategie, ecco alcune opzioni di ottimizzazione che funzionano insieme size-adjust. Le proprietà ascent-override, descent-override, e line-gap-override sono attualmente implementate in Chromium 87 e versioni successive e in Firefox 89 e versioni successive.

ascent-override

Il descrittore ascent-override definisce l'altezza sopra la base di riferimento di un .

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  ascent-override: 71%;
}

Il titolo rosso (non modificato) presenta uno spazio sopra le lettere maiuscole A e O, mentre il titolo blu è stato modificato in modo che l'altezza della cassetta si adatti perfettamente alla scatola delimitante complessiva.

descent-override

Il descrittore descent-override definisce l'altezza sotto la linea di base del carattere.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  descent-override: 0%;
}

Il titolo rosso (non modificato) presenta uno spazio sotto D e O baseline, mentre il pulsante il titolo è stato regolato in modo che le lettere siano ben aderenti alla base.

line-gap-override

Il descrittore line-gap-override definisce la metrica spaziatura riga per il carattere. Si tratta dell'intervallo di riga consigliato per il carattere o dell'iniziale esterna.

@font-face {
  font-family: "Line Gap Adjusted Arial";
  src: local(Arial);
  line-gap-override: 50%;
}

Il titolo rosso (non modificato) non ha line-gap-override, in sostanza è a 0%, mentre il titolo blu è stato aumentato del 50%, creando spazio sopra e sotto le lettere di conseguenza.

Riassumendo

Ognuna di queste sostituzioni offre un modo aggiuntivo per tagliare l'eccesso dalla delimitazione del testo sicuro del web. Puoi personalizzare la casella di testo per una presentazione precisa.

Conclusione

La funzionalità CSS @font-face size-adjust è un ottimo modo per personalizzare riquadro di delimitazione del testo dei layout web per migliorare l'esperienza di scambio dei caratteri evitando così una variazione del layout per gli utenti. Per saperne di più, dai un'occhiata a queste di risorse:

• Caratteri CSS di livello 5 Specifiche
• Regolazione dimensioni attivata MDN
• Generatore di @font-face per lo scambio senza problemi
• Cumulative Layout Shift (CLS) su web.dev
• Un nuovo modo per ridurre l'impatto del caricamento dei caratteri: i descrittori dei caratteri CSS

Foto di Kristian Strand su Unsplash