Ora Google Fonts supporta completamente i caratteri variabili nell'aggiornamento dell'API v2. Ti spiegheremo come chiamare le famiglie di caratteri singoli e multipli e come specificare gli intervalli degli assi. Per un'analisi approfondita dei caratteri variabili, consulta questa brochure illustrata in modo interattivo di David Berlow presso TypeNetwork.
Novità
Tutto inizia con un nuovo URL di base:
https://fonts.googleapis.com/css2
La sintassi per specificare gli stili all'interno di ogni famiglia è cambiata per descrivere il carattere della variabile "spazi di progettazione".
Guide rapide
Copia e incolla questo codice HTML in un file:
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
<style>
body {
font-family: 'Crimson Pro', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
Utilizzando un browser per aprire il file, la pagina dovrebbe visualizzare il testo "Bellezza del Web" nel carattere di Crimson Pro.
Più famiglie
Per richiedere più famiglie, specifica il parametro family= per ogni famiglia.
Ad esempio, per richiedere i caratteri Crimson Pro e Literata:
https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata
Copia e incolla questo codice HTML in un file:
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata">
<style>
body {
font-size: 48px;
}
div:nth-child(1) {
font-family: 'Crimson Pro', serif;
}
div:nth-child(2) {
font-family: 'Literata’, serif;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
<div>Making the Web Beautiful!</div>
</body>
</html>
Utilizzando un browser per aprire il file, la pagina dovrebbe visualizzare il testo "Bellezza del Web", prima in Crimson Pro e poi in Literata.
Intervalli assi
I caratteri variabili offrono intervalli continui di stili, spesso senza latenza aggiuntiva. Questo è pertinente per il responsive design. Questa tipografia dinamica utilizza una gamma continua di stili, offrendo tutte le ponderazioni comprese tra 100 e 900 in una pagina, e varia in modo adattabile la ponderazione in base a determinate condizioni.
Per richiedere un intervallo di un asse del carattere variabile, unisci i 2 valori con ..
| Caratteri | Risorse richieste: |
|---|---|
Crimson Pro [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900 |
Corsivo cremisi [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900 |
Grassetto corsivo intenso e [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700 |
Stili individuali, come il peso
Senza specifiche di stile, l'API fornisce lo stile predefinito della famiglia richiesta. Per richiedere altri stili individuali, ad esempio ponderazioni specifiche, aggiungi i due punti (:) dopo il nome della famiglia di caratteri, seguiti da un elenco di parole chiave delle proprietà dell'asse in ordine alfabetico, da un segno @ (@) e da uno o più elenchi di valori per le proprietà di questi assi.
Questi esempi lo mostrano in azione.
| Caratteri | Risorse richieste: |
|---|---|
| Crimson Pro (predefinito) | https://fonts.googleapis.com/css2?family=Crimson+Pro |
| Grassetto Pro cremisi | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700 |
| Crimson Pro Standard e audace | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700 |
| Grassetto Pro e Corsivo in grassetto | https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700 |
Google Fonts elenca tutti gli stili disponibili per ogni famiglia di caratteri.
Stile predefinito
Quando una richiesta non specifica una posizione o un intervallo per un asse, verrà utilizzata la posizione predefinita. La posizione predefinita dell'asse corsivo è 0 (normale) e l'impostazione predefinita per l'asse del peso è 400 (standard).
Per le famiglie con assi che non contengono la posizione predefinita, le richieste che non specificano le posizioni per questi assi non andranno a buon fine. Ad esempio, quando richiedi una famiglia con un asse del peso compreso tra 500 e 900, la posizione del peso deve essere specificata.
Pesi non standard
Con i caratteri statici, gli stili di ponderazione sono generalmente specificati come multipli di 100 (ad esempio 300, 400, 700). I caratteri variabili offrono sia le ponderazioni standard sia le ponderazioni intermedie. Per visualizzare un peso intermedio:
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450
Ottimizzazione per latenza e dimensioni dei file
Specifica con precisione gli stili che utilizzi. L'API pubblica gli stili richiesti nel set di caratteri più compatto. La richiesta di stili non utilizzati può causare il download di un numero di dati dei caratteri superiore a quello necessario, causando una latenza maggiore. Se utilizzi solo tre pesi specifici, specificali nella tua richiesta come stili individuali. Se utilizzi un intervallo continuo di ponderazioni, specifica tale intervallo nella tua richiesta.
Usa visualizzazione dei caratteri
La proprietà font-display ti consente di controllare cosa succede mentre il carattere è ancora in fase di caricamento o comunque non disponibile. Specificare un valore diverso da auto predefinito è in genere appropriato.
Trasmetti il valore desiderato nel parametro display:
https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap
Ottimizzazione delle richieste di caratteri
Spesso, quando vuoi utilizzare un carattere web sul tuo sito o nella tua applicazione, sai in anticipo di quali lettere avrai bisogno. Questo accade spesso quando utilizzi un carattere web in un logo o in un'intestazione.
In questi casi, ti consigliamo di specificare un valore text= nell'URL della richiesta di carattere. Ciò consente a Google Fonts di restituire un file carattere ottimizzato per la tua richiesta. In alcuni casi, in questo modo è possibile ridurre la dimensione del file dei caratteri fino al 90%.
Per utilizzare questa funzionalità, è sufficiente aggiungere text= alla tua richiesta API. Ad esempio, se utilizzi solo Inconsolata per il titolo del tuo blog, puoi inserire il titolo stesso come valore di text=. Ecco come dovrebbe apparire la richiesta:
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello
Come per tutte le stringhe di query, devi codificare il valore tramite URL:
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello%20World
Questa funzionalità funziona anche per i caratteri internazionali, pertanto ti consente di specificare i caratteri UTF-8. Ad esempio, ¡Hola! è rappresentato come:
https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!
Tieni presente che il parametro "text=" può essere specificato solo una volta. La richiesta si applica a tutte le famiglie. Utilizza richieste API distinte se hai bisogno di ottimizzazioni di testo diverse per più famiglie.
URL API Forming
Rigorevolezza
Come nota generale, l'API CSS aggiornata è più rigorosa rispetto alle richieste accettate rispetto all'API CSS originale.
Linee guida generali:
- Elenca gli assi in ordine alfabetico (
en-USlingua) - I gruppi di valori dell'asse (ovvero le tuple) devono essere ordinati in modo numerico
- Le tuple non possono sovrapporsi o toccare (ad es.
wght400..500 e 500..600)
Specifica URL API
/css2?family=<spec>[&family=<spec>...][&text=<text>][&display=<display>]
spec: <family_name>[:<axis_tag_list>@<axis_tuple_list>]
family_name: nome della famiglia di caratteri
axis_tag_list: <axis>[,<axis>...] // Sorted alphabetically (en-US locale)
axis: un tag dell'asse, ad esempio ital, wdth, wght
axis_tuple_list: <axis_tuple>[;<axis_tuple>...]
axis_tuple: <value>[,<value>...] // Same length as axis_tag_list
value: <range> | <float>
range: <float>..<float>
float: un valore compreso nell'intervallo dell'asse corrispondente
text: il testo che verrà visualizzato nel carattere richiesto
display: auto | block | swap | fallback | optional
Supporto dei browser precedenti
I browser che non supportano caratteri variabili potrebbero non essere in grado di mostrare il tuo design come previsto. Controlla il supporto dei caratteri delle variabili dei browser su caniuse.
Praticando il miglioramento progressivo, puoi evitare comportamenti imprevisti in quei browser meno recenti. Utilizza le query @supports nel tuo CSS per limitare le funzionalità dei caratteri delle variabili.
In questo esempio, vogliamo utilizzare la ponderazione 450 del testo di Markazi, ma dovremo utilizzare i valori Normale (peso 400) o Mezzo (peso 500) quando le funzionalità del carattere non sono supportate:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Markazi+Text:wght@450" />
<style>
* {
font-family: 'Markazi Text';
font-weight: 400;
}
@supports (font-variation-settings: "wght" 450) {
* {
font-family: 'Markazi Text';
font-weight: 450;
}
}
</style>
La richiesta CSS Markazi+Text:wght@450 invia la ponderazione 450 ai client che supportano le variabili e le ponderazioni 400 e 500 a quelli che non lo utilizzano. In generale, le procedure di riserva nell'intervallo della tua richiesta saranno disponibili nei browser precedenti.
| Asse | Fallback |
|---|---|
ital |
0, 1 |
wght |
100, 200, 300, 400, 500, 600, 700, 800, 900 |
Questi esempi mostrano quali stili sarebbero disponibili sui browser precedenti per alcune richieste diverse.
| Risorse richieste: | Stili disponibili sui browser precedenti |
|---|---|
ital@0 |
ital@0 |
wght@500 |
wght@500 |
wght@432 |
wght@400;500 |
wght@440..560 |
wght@400;500;600 |
Caratteri variabili disponibili
Una tabella dei caratteri della variabile disponibili nell'API v2 è disponibile qui.
Per approfondire
- Consulta l'elenco completo delle famiglie di caratteri fornito dall'API Google Fonts su Google Fonts.
- Scoprite di più sul funzionamento dell'API Google Fonts nella pagina Considerazioni tecniche.