Nell'aggiornamento dell'API v2, Google Fonts supporta completamente i caratteri variabili. Lo faremo spiegare come chiamare famiglie di caratteri singole e multiple e come specificare intervalli di assi. Per un'analisi approfondita dei caratteri variabili, scopri di più in questo brochure illustrato in modo interattivo di David Berlow di TypeNetwork.
Novità
Tutto inizia con un nuovo URL di base:
https://fonts.googleapis.com/css2
La sintassi per specificare gli stili all'interno di ciascuna famiglia è cambiata per descrivere "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 "Rendi Web Beautiful", nel carattere 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 "Making the Web bell" prima in Crimson Pro e poi in Literata.
Intervalli di assi
I caratteri variabili offrono una gamma continua di stili, spesso senza una latenza di pochi millisecondi. Questo aspetto è pertinente per il adattabile design reattivo. Questa tipografia dinamica utilizza una gamma continua di stili, offrendo tutte le pesi compresi tra 100 e 900 su una pagina, variando in modo reattivo in base ad alcune condizioni.
Per richiedere un intervallo di un asse del carattere variabile, unisci i 2 valori a ..
| Caratteri | Richiesta |
|---|---|
Pro cremisi [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900 |
Corsivo Pro cremisi [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900 |
Cremisi Pro grassetto corsivo e [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700 |
Stili individuali, ad esempio peso
Senza specifiche di stile, l'API fornisce lo stile predefinito del famiglia richiesta. Per richiedere altri stili individuali, ad esempio pesi specifici, aggiungi i due punti (:) dopo il nome della famiglia di caratteri, seguiti da un elenco degli assi parole chiave della struttura in ordine alfabetico, una chiocciola (@) e uno o più elenchi di valori per quelle proprietà dell'asse.
Questi esempi dimostrano come funziona.
| Caratteri | Richiesta |
|---|---|
| Crimson Pro (predefinito) | https://fonts.googleapis.com/css2?family=Crimson+Pro |
| Pro cremisi grassetto | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700 |
| Normale cremisi e Grassetto | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700 |
| Crimson Pro Bold e Grassetto corsivo | https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700 |
Google Fonts elenca tutti gli stili disponibili per ciascuna famiglia di caratteri.
Stile predefinito
Quando una richiesta non specifica una posizione o un intervallo per un asse, il valore predefinito . La posizione predefinita dell'asse corsivo è 0 (normale) e il valore predefinito per l'asse delle ponderazioni è 400 (normale).
Per le famiglie con assi che non contengono la posizione predefinita, le richieste che se non specifichi le posizioni di questi assi, non riuscirai. Ad esempio, quando richiedi una con asse di peso compreso tra 500 e 900, la posizione del peso deve essere specificato.
Ponderazioni non standard
Con i caratteri statici, gli stili di ponderazione sono generalmente specificati come multipli di 100 (ad es. 300, 400, 700). I caratteri variabili offrono sia le ponderazioni standard che ponderazioni intermedie. Per eseguire il rendering di un peso intermedio:
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450
Ottimizzazione per latenza e dimensioni dei file
Indica con precisione gli stili che utilizzi. L'API invia gli stili richiesti nell'insieme di caratteri più compatto. La richiesta di stili inutilizzati potrebbe far sì che gli utenti per scaricare più dati dei caratteri del necessario, causando una maggiore latenza. Se utilizzi solo tre pesi specifici, specificali nella tua richiesta come stili individuali. Se utilizza un intervallo continuo di pesi, specifica tale intervallo nella richiesta.
Usa visualizzazione caratteri
Lo strumento font-display
consente di controllare ciò che accade mentre il carattere è ancora in fase di caricamento
altrimenti non disponibili. Se viene specificato un valore diverso da quello predefinito di auto,
solitamente appropriato.
Passa il valore desiderato nel parametro display:
https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap
Ottimizzazione delle richieste di caratteri
Spesso, per utilizzare un carattere web sul sito o nell'applicazione, sapere in anticipo quali lettere avrai bisogno. Questo si verifica spesso quando utilizzi un carattere web in un logo o un'intestazione.
In questi casi, ti consigliamo di specificare un valore text= nel carattere
URL di richiesta. In questo modo Google Fonts può restituire un file di caratteri ottimizzato per
la tua richiesta. In alcuni casi, le dimensioni del file dei caratteri possono essere ridotte del
il 90%.
Per utilizzare questa funzionalità, aggiungi semplicemente text= alla richiesta API. Ad esempio, se
stai usando Inconsolata solo per il titolo del tuo blog, puoi inserire il titolo
stesso come valore di text=. Ecco come si presenta la richiesta:
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello
Come per tutte le stringhe di query, devi eseguire la codifica URL del valore:
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello%20World
Questa funzione funziona anche per i caratteri internazionali, consentendoti di specificare UTF-8 caratteri. Ad esempio, ¡Hola! è rappresentato come:
https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!
Tieni presente che il parametro "text=" può essere specificato una sola volta. Si applica a tutte le famiglie nella richiesta. Utilizza richieste API separate se necessario ottimizzazioni del testo diverse in più famiglie.
Forming API URL
Severità
Come nota generale, l'API CSS aggiornata prevede criteri più rigidi riguardo alle richieste accettate rispetto all'API CSS originale.
Linee guida generali:
- Elenca gli assi in ordine alfabetico (
en-USimpostazioni internazionali) - I gruppi di valori dell'asse (ad es. le tuple) devono essere ordinati numericamente
- 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 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 tipografico richiesto
display: auto | block | swap | fallback | optional
Supporto dei browser precedenti
I browser che non supportano i caratteri variabili potrebbero non essere in grado di visualizzare il tuo design come previsto. Controlla il supporto dei caratteri variabili del browser su caniuse.
Praticando il miglioramento progressivo,
puoi evitare comportamenti imprevisti in questi browser meno recenti. Usa @supports
query nel tuo CSS per limitare le caratteristiche dei caratteri variabili.
In questo esempio vogliamo usare la ponderazione 450 del Testo markazi, ma dovremo torna a Regolare (peso 400) o Medio (peso 500) se variabile Le caratteristiche dei caratteri 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 un peso pari a 450 ai client che supportano
caratteri e pesi variabili da 400 e 500 a quelli che non lo hanno. In generale,
i fallback 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 alcuni richieste diverse.
| Richiesta | 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 variabili disponibili nell'API v2 è disponibile qui.
Per approfondire
- Consulta un elenco completo delle famiglie di caratteri fornite dall'API Google Fonts su Google Fonts.
- Scopri di più su come funziona l'API Google Fonts nella Considerazioni tecniche.