Per adattare la dimensione apparente di un font di fallback a un webfont, normalizzate le loro x-height con CSS font-size-adjust, oppure scalate un volto di fallback specifico con size-adjust. Questa guida illustra come scegliere, calcolare e testare l'adattamento in un browser desktop Mac.

Scegliere la metrica adatta al proprio testo

Per il normale testo in inglese, iniziate con l'x-height: l'altezza delle lettere minuscole rispetto alla dimensione del font. Due font impostati a 16px possono avere x-height diverse, quindi dimensioni CSS uguali non necessariamente appaiono uguali. MDN documenta font-size-adjust specificamente per normalizzare una metrica di font scelta tra i font usati per rendere il testo. MDN: font-size-adjust

Scegliete la metrica prima di modificare i valori. Paragrafi ricchi di minuscole solitamente suggeriscono ex-height; etichette in maiuscolo possono richiedere cap-height. L'opzione ch-width normalizza l'avanzamento del carattere zero, che risponde a una domanda diversa dall'adattamento dell'altezza delle minuscole. Nessuna di queste opzioni garantisce larghezze uguali per ogni parola. MDN: valori di font-size-adjust

Per questo compito, usate una pagina sintetica contenente un titolo come Sample collection, un'etichetta come Tile 024 e un paragrafo come Amber tiles sit beside a blue circle. Each tile has a short label. L'obiettivo è far sì che il testo in minuscolo del fallback appaia dimensionato in modo simile, verificando che questi elementi rientrino ancora.

Il vostro compito immediato Iniziate con Cosa controllare separatamente
Normalizzare la dimensione delle minuscole in uno stack di font font-size-adjust con un rapporto x-height di destinazione A capo e interlinea
Regolare un volto di fallback noto Un alias di fallback con size-adjust Disponibilità di quel preciso volto locale
Ridurre le differenze nel layout verticale Override delle metriche del font dopo l'adattamento della dimensione Baseline e altezza del paragrafo

I primi due meccanismi hanno scopi diversi: font-size-adjust si applica al testo, mentre size-adjust appartiene a una regola @font-face e scala i contorni e le metriche di quel volto. MDN: font-size-adjust, MDN: size-adjust

Stabilire un confronto affidabile sul vostro Mac

Usate una pagina di anteprima il cui foglio di stile potete modificare. Gli esempi qui sotto chiamano il webfont esistente Sample Web; sostituite il suo vero nome di famiglia CSS. Sono frammenti di integrazione, assumendo che il webfont sia già dichiarato e che gli elementi di esempio esistano.

In Chrome sul vostro Mac, fate clic destro sul paragrafo di esempio e scegliete Ispeziona. In alternativa, premete Command + Option + C e selezionatelo. Chrome apre il pannello Elements, dove Styles mostra il CSS applicato. Chrome: Apri Chrome DevTools

Aprite Computed, scorrete fino a Rendered Fonts e confermate quale font disegna effettivamente l'esempio. Una lista di famiglie dichiarate da sola non stabilisce che il font preferito stia rendendo. La documentazione di Chrome mostra come usare questa sezione per distinguere risorse di font locali e di rete. Chrome: Applica altri effetti

Mantenete viewport, zoom, peso del font, stile del font, spaziatura tra lettere e larghezza del contenitore fissi durante il confronto. Ispezionate prima lo stato del webfont. Poi cambiate temporaneamente la proprietà font-family del paragrafo al fallback previsto, come Arial, sans-serif, e ispezionate di nuovo il font renderizzato.

Usate Styles per modificare dichiarazioni e le loro caselle di controllo per attivare/disattivare gli adattamenti. Questo permette di confrontare lo stesso paragrafo senza cambiarne la formulazione o il layout. Chrome: Riferimento funzionalità CSS

Quando prendete misure tramite JavaScript, attendete il caricamento del font rilevante invece di usare un ritardo arbitrario. document.fonts.load() può richiedere un volto specificato; document.fonts.ready si risolve dopo il caricamento dei font del documento e le relative operazioni di layout. Nessuno dei due sostituisce il controllo del font effettivamente renderizzato. MDN: FontFaceSet.load(), MDN: FontFaceSet.ready

Calcolare e applicare il rapporto x-height di destinazione

L'obiettivo per font-size-adjust numerico è un rapporto, non una percentuale di ingrandimento. Dividete l'x-height del webfont per le sue unità per em quando quelle metriche sono disponibili per il volto esatto. Il browser adatterà poi ogni font selezionato a quella proporzione target della dimensione del font dichiarata. W3C: CSS Fonts Module Level 5

Considerate questi input esplicitamente illustrativi, che non sono misurazioni di alcun font nominato:

Metrica Webfont di destinazione Fallback
Unità per em 1.000 1.000
X-height in unità del font 520 470
Rapporto x-height 0,52 0,47

A una dimensione dichiarata di 16px, l'x-height di destinazione è 16 × 0.52 = 8.32px. Per raggiungere quell'altezza, il fallback ha bisogno di un fattore di scala di 0,52 ÷ 0,47, circa 1.106383. La sua dimensione di rendering adattata è circa 17,7021px. Questi calcoli illustrano la formula della specifica; non prevedono l'effettivo a capo.

Per l'approccio basato su proprietà, applicate il rapporto target al testo. Questo frammento CSS assume che il paragrafo di esempio abbia la classe sample-copy:

.sample-copy {
  font-family: "Sample Web", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-size-adjust: 0.52;
}

Qui, 0.52 appartiene al webfont illustrativo. Sostituitelo con il rapporto del vostro volto di destinazione. Fornire un valore inaccurato cambia anche la dimensione renderizzata del font preferito; la proprietà si applica a ogni font selezionato, incluso il webfont. W3C: CSS Fonts Module Level 5

Se non avete un rapporto affidabile, il W3C documenta un metodo di calibrazione visiva: confrontate due campioni dello stesso font, dimensione e contenuto, con l'adattamento disabilitato su uno e un adattamento numerico di prova sull'altro. Partite da 0.5 e affinate finché non coincidono. Usate campioni isolati ingranditi per la calibrazione, poi tornate alla dimensione di lettura normale per giudicare il risultato. Trattate un valore derivato visivamente come un'approssimazione. W3C: CSS Fonts Module Level 5

La parola chiave from-font prende il suo target dal primo font disponibile. Se il webfont previsto non è disponibile, può significare che un altro font fornisce il target. Per un fallback che deve adattarsi a un webfont noto anche quando non carica mai, usate un rapporto numerico stabilito. MDN: valori di font-size-adjust

Usare un alias di fallback quando serve controllo su un volto

Scegliete size-adjust quando volete che la scalatura sia collegata a un particolare volto di fallback. Per la coppia illustrativa sopra, convertite il fattore di scala in percentuale: 100 × 0.52 ÷ 0.47 = 110.6383%. Il descrittore scala gli avanzamenti dei glifi così come i contorni e le altre metriche associate. MDN: size-adjust

Questo frammento di integrazione alternativo assume che Arial Regular sia disponibile localmente e che il webfont di destinazione sia già dichiarato. La percentuale è illustrativa, quindi misurate la vostra coppia reale prima di adottarla:

@font-face {
  font-family: "Sample Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400;
  font-style: normal;
  size-adjust: 110.6383%;
}

.sample-copy {
  font-family: "Sample Web", "Sample Fallback", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-size-adjust: none;
}

L'alias sintetico mantiene l'adattamento specifico a questo stack. Le sue local() identificano un particolare volto di font; non selezionano un sans-serif di sistema arbitrario. La specifica CSS Fonts raccomanda di fornire nomi completi e PostScript per il matching cross-platform. Se nessuna sorgente è disponibile, il browser procede attraverso la lista di famiglie rimanente. W3C: CSS Fonts Module Level 4

Usatelo come alternativa al metodo precedente. Applicare font-size-adjust a testo che usa un volto con size-adjust può normalizzare via la scalatura voluta, perché la proprietà usa la metrica già sovrascritta. MDN: descrizione di font-size-adjust

Diagnosticare separatamente differenze di a capo e baseline

Dopo aver adattato l'altezza delle minuscole, confrontate titolo, etichetta e paragrafo alle loro larghezze previste. Una sequenza utile è controllare prima la dimensione apparente, poi i finali di riga, infine l'altezza totale del blocco. Questo separa tre problemi visibili che altrimenti potrebbero portarvi a continuare a cambiare una percentuale.

Se la dimensione delle minuscole sembra giusta ma il paragrafo va a capo diversamente, confrontate un altro fallback prima di affinare ulteriormente la scala. Scalare a una metrica di altezza non fa sì che design di glifi diversi condividano ogni larghezza di avanzamento. Registrate l'ultima parola di ogni riga negli stati webfont e fallback per rendere concreta la differenza rimanente.

Se la baseline o l'altezza del blocco differiscono ancora, investigate ascent-override, descent-override e line-gap-override. Questi controllano metriche di layout piuttosto che fornire un altro target di dimensione visiva. Per esempio, l'ascent è la metrica sopra la baseline usata per disporre i line box. Derivate gli override dalla coppia di font reale invece di copiare percentuali non correlate. MDN: ascent-override

Per un punto di partenza generato, il createFontStack documentato di Capsize accetta metriche in ordine di famiglia preferita e restituisce sia fontFamily che fontFaces di fallback. Usate entrambi gli output insieme. La sua documentazione fornisce anche @capsizecss/metrics per font inclusi e @capsizecss/unpack per estrarre metriche da un file personalizzato. Le dichiarazioni generate richiedono comunque test con il vostro layout di esempio. Documentazione Capsize

Mantenere intatti layout del browser e shaping del testo

Le misurazioni su canvas possono aiutare a confrontare stringhe, ma rispondono a domande più ristrette. WHATWG definisce measureText().width come larghezza di avanzamento, mentre le misurazioni effettive del bounding box descrivono il testo disegnato. Canvas prepara una linea ipoteticamente infinitamente larga, quindi la sua larghezza non è una misura di un paragrafo DOM a capo. WHATWG: HTML Standard, Canvas

Mantenete parole e frasi intere insieme nel test. Evitate di ricostruire il testo come caratteri posizionati individualmente o di assumere che larghezze di caratteri sommate riproducano una stringa shaped. CSS definisce le condizioni che governano lo shaping attraverso i confini inline, inclusi confini con cambiamenti di spaziatura o allineamento. Preservate la struttura normale del componente quando validate il suo font fallback. W3C: CSS Text Module Level 3

Verificare il supporto del browser e concludere il confronto

MDN elenca font-size-adjust di base come Baseline 2024 e size-adjust come ampiamente disponibile da settembre 2023. Questo non stabilisce il supporto per ogni metrica o parola chiave più recente in un browser più vecchio. Consultate le tabelle di compatibilità per la sintassi che usate effettivamente. MDN: font-size-adjust, MDN: size-adjust

Dove una forma di metrica avanzata non è disponibile, usate la normalizzazione x-height numerica supportata quando si adatta al compito, o un descrittore fallback-specifico supportato. Se l'adattamento richiesto non è supportato del tutto, mantenete un fallback visivamente simile e verificate il layout non adattato in quel browser.

Concludete ripetendo il confronto per ogni peso e stile che usate, poi nei browser Mac che intendete supportare. Confermate il volto renderizzato ogni volta. Mantenete l'adattamento scelto solo quando il titolo sintetico, l'etichetta e il paragrafo hanno dimensione apparente, a capo e spaziatura accettabili sia nello stato webfont che fallback.

Fonti