Aggiornamento dell'API CSS

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 "Rendiamo Web Beautiful", nel carattere Crimson Pro.

Come rendere bello il web

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.

Come rendere bello il web
Come rendere bello il web

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
Sembra che il tuo browser non supporti caratteri variabili (caniuse). Su un browser che supporta le varianti di carattere, deve essere visualizzato il seguente testo Crimson Pro come un set fluido di pesi da 400 a 500. Le animazioni CSS possono rendere il testo varia in modo uniforme lo stile al momento dell'interazione.
Se il tuo browser supporta completamente i caratteri variabili (caniuse), il seguente testo dovrebbe rendere Crimson Pro come un insieme fluido di pesi da 400 a 500. Le animazioni CSS possono fare in modo che lo stile del testo cambi in modo uniforme al momento dell'interazione.
Come rendere bello il web
Come rendere bello il web
Come rendere bello il web
Come rendere bello il web
Come rendere bello il web
Come rendere bello il web

Stili individuali, ad esempio peso

Senza specifiche di stile, l'API fornisce lo stile predefinito del famiglia che hai richiesto. 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
Cremisi Pro 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 le ponderazioni intermedie. Per eseguire il rendering di un peso intermedio:

https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450
Sembra che il tuo browser non supporti caratteri variabili (caniuse). Su un browser che supporta le varianti di carattere, il seguente testo dovrebbe visualizzare il colore cremisi Pro con pesi visivamente distinti di 400, 450 e 500.
Se il browser supporta completamente i caratteri variabili (caniuse), il parametro il seguente testo dovrebbe visualizzare il Crimson Pro con ponderazioni visivamente nette pari a 400, 450 e 500.
Come rendere bello il web
Come rendere bello il web
Come rendere bello il web

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 utilizzi 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-US impostazioni internazionali)
  • I gruppi di valori dell'asse (ad es. le tuple) devono essere ordinati numericamente
  • Le tuple non possono sovrapporsi o toccare (ad es. wght 400..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ù sul funzionamento dell'API Google Fonts nella Considerazioni tecniche.