Aggiunta di caratteri
Per velocizzare il caricamento dei documenti, le pagine AMP non possono includere fogli di stile esterni. Tuttavia, c'è un'eccezione a questa regola: i caratteri.
I caratteri personalizzati possono essere inclusi nelle pagine AMP in due modi:
- Tramite un tag
: solo per i fornitori di caratteri autorizzati. - Utilizzando la regola CSS
@font-face: non ci sono restrizioni, tutti i caratteri sono consentiti.
In questa esercitazione, useremo un tag <link> per aggiungere caratteri alla nostra pagina. Aggiungiamo un link al foglio di stile nella sezione <head> per richiedere il carattere Raleway:
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Raleway" /> Ora aggiorniamo il selettore CSS body per includere un riferimento a Raleway:
body { width: auto; margin: 0; padding: 0; font-family: 'Raleway', sans-serif; } Aggiorniamo la pagina e controlliamo il nuovo aspetto dei caratteri. Poi, controlliamo il risultato dello strumento di convalida AMP. Non dovrebbero esserci errori per questa richiesta di un foglio di stile esterno.
font-display per ottimizzare il caricamento dei caratteri. Hai completato il tuo articolo AMP di notizie! Ecco come dovrebbe apparire: