Guida utente Annulla

Eventi font

Cerca

Ultimo aggiornamento il 3 mag 2021

Gli eventi dei font sono inclusi con il caricamento dei font JavaScript, che viene utilizzato per la suddivisione dinamica in sottoinsiemi. Gli eventi dei font consentono di personalizzare la pagina Web a seconda se i font sono attivi, ancora in fase di caricamento o non disponibili per qualsiasi motivo.

Gli eventi dei font non sono ancora disponibili per il caricamento dei font CSS. Se stai usando il codice di incorporamento CSS predefinito o @import nel tuo sito Web, puoi includere un'altra libreria JavaScript per personalizzare il caricamento dei font.

Utilizzo degli eventi dei font nel CSS

Per aiutarti a controllare meglio come viene visualizzata la pagina durante il caricamento dei font o se sono inattivi, il codice di incorporamento JavaScript fornisce una serie di eventi di font che vengono attivati quando i font vengono caricati sulla pagina.

Ci sono tre eventi di font principali, ognuno dei quali ha un nome di classe corrispondente (tra parentesi):

caricamento in corso (.wf-loading): I font per web sono in fase di caricamento
attivo (.wf-active): i font per web sono attivi
inattivo (.wf-inactive): i font per web non sono attivi

Le classi CSS associate a questi eventi vengono aggiunte all'elemento HTML durante il caricamento. Possono essere utilizzati nei fogli di stile per controllare lo stile della pagina durante il caricamento dei font. Ad esempio:

.wf-loading {
/* styles to use when web fonts are loading */
}

.wf-active {
/* styles to use when web fonts are active */
}

.wf-inactive {
/* styles to use when web fonts are inactive */
}

Gli usi comuni delle classi di eventi dei font sono il controllo del flash del testo senza stile (FOUT, Flash Of Unstyled Text) e la definizione dei font e degli stili alternativi per i browser che non supportano i font per web o che li hanno disattivati. È sempre una buona idea includere font e gli stili alternativi poiché alcune combinazioni di browser, sistemi operativi e preferenze utente risulteranno in font inattivi nella pagina.

Eventi di font JavaScript

Questi eventi di font sono disponibili anche come hook di chiamata JavaScript tramite il metodo Typekit.load. È possibile passare un oggetto contenente funzioni di chiamata quando si richiama Typekit.load e queste funzioni di chiamata verranno richiamate quando si verificano eventi di font diversi durante il caricamento. Ad esempio:

<script>
  try {
    Typekit.load({
      loading: function() {
        // JavaScript to execute when fonts start loading
      },
      active: function() {
        // JavaScript to execute when fonts become active
      },
      inactive: function() {
        // JavaScript to execute when fonts become inactive
      }
    })
  } catch(e) {}
</script>

Le chiamate JavaScript potrebbero essere usate per aggiungere oggetti quali le dissolvenze in apertura quando i font sono stati caricati o per eseguire un ridimensionamento matematico complesso per i layout di presentazione in base alle dimensioni del testo sottoposto a rendering.

Oltre a questi eventi di font di base, vengono forniti anche eventi di font più granulari per le singole variazioni di font. I nomi delle classi per questi eventi sono una combinazione del nome della famiglia di font, la descrizione della variazione del font e un nome di evento del font. Quindi, ad esempio, aggiungendo il normale spessore 400 di Gesta a un progetto si otterrebbero classi di eventi di font come wf-gesta-n4-loading e wf-gesta-n4-active. Sul lato JavaScript, sono disponibili chiamate fontloading, fontactive e fontinactive e possono essere passate alla famiglia di font e alla descrizione dei font per ogni singola variazione.

Utilizzo degli eventi dei font: gestione del flash di testo senza stile (FOUT, Flash Of Unstyled Text)

Ogni browser gestisce il caricamento dei font per web a modo suo. Se un browser visualizza inizialmente il testo con un font alternativo e poi passa ai font collegati al termine del caricamento, è possibile ottenere un flash di testo senza stile o FOUT (Flash Of Unstyled Text).

Quando i font sono in fase di caricamento, all'elemento HTML viene applicata una classe .wf-loading. Una volta caricati i font, quella classe cambia in .wf-active. Quindi, potresti aggiungere quanto segue ai tuoi fogli di stile:

.wf-loading h1 {
/* styles to use while fonts are loading */
}

.wf-active h1 {
/* styles to use after fonts have loaded */
}

Puoi quindi regolare gli stili per rendere il FOUT meno discordante; ad esempio, assicurandosi che il font visualizzato nel flash e il font per web caricato abbiano la stessa dimensione. Oppure puoi nascondere il testo fino a quando il font non è completamente caricato. Ad esempio:

<style>
.wf-loading h1 {
font-family: "droid-sans";
visibility: hidden;
}
.wf-active h1 {
visibility: visible;
}
</style>

<body>
<h1>This headline will be hidden until Droid Sans is completely loaded.</h1>
</body>

La sezione dei font alternativi degli stili ha più esempi di impostazione degli stili CSS con gli eventi dei font.

Utilizzo degli eventi dei font: stile dei font alternativi

I font vengono caricati come risorse in una pagina Web, proprio come immagini o i video. A seconda della combinazione di sistema operativo, browser Web, estensioni installate, preferenze dell'utente e velocità di connessione, i font per web potrebbero talvolta non essere caricati. In questi casi, verranno utilizzati invece i font alternativi nello stack CSS.

Ad esempio, è possibile regolare la dimensione dei font alternativi quando si utilizza un font per web condensato, in modo che il layout rimanga coerente anche quando i font per web non vengono caricati. Di seguito viene spiegato come:

.headline {
/* These fallback styles are used by default */
font-family: Arial, sans-serif;
font-size: 18px; /* Smaller size for non-condensed fallback font */
}

.wf-active .headline {
/* These styles are used when web fonts are active */
font-family: "proxima-nova-extra-condensed",Arial, sans-serif;
font-size: 24px;  /* Larger size for condensed font */
}

Utilizzo di eventi di font: simulazione del flash del testo invisibile (FOIT, Flash Of Invisible Text) per progetti dinamici

Per impostazione predefinita, i progetti dinamici effettueranno il rendering il testo in stile font per web con il flash del testo senza stile (FOUT, Flash Of Unstyled Text). Ciò significa che il browser effettuerà il rendering dei font alternativi durante il caricamento dei font per web e quindi passerà questi una volta che saranno disponibili per l'uso. Questo è diverso dall'approccio alternativo al rendering dei font per web, in cui un browser nasconderà il testo durante il download dei font per web e quindi mostrerà il testo, con lo stile deli font per web, una volta caricati. Questo si chiama flash del testo invisibile (FOIT, Flash Of Invisible Text).

L'approccio FOUT rende le pagine più utilizzabili immediatamente, in particolare su connessioni di rete più lente, ma se si preferisce l'approccio FOIT, è possibile simularlo su tutti i browser utilizzando eventi di font. Gli eventi di font sono tre classi che vengono aggiunte all'elemento:

.wf-loading: Aggiunta durante il caricamento dei font;
.wf-active: Aggiunta quando almeno un font è stato caricato;
.wf-inactive: Aggiunta quando nessuno dei font è stato caricato.

Puoi utilizzare queste tre classi nel CSS per simulare il caricamento FOIT nascondendo il testo quando la classe wf-loading è attiva e mostrando il testo quando è attiva la classe wf-active o wf-inactive:

.wf-loading {
/* styles to use when web fonts are loading */
}

.wf-active {
/* styles to use when web fonts are active */
}

.wf-inactive {
/* styles to use when web fonts are inactive */
}

Ad esempio, se gli elementi h1 e p utilizzano un font per web, utilizza questo CSS per nasconderli durante il caricamento dei font.

.wf-loading h1, .wf-loading p {
visibility: hidden;
}

.wf-active h1, .wf-active p, .wf-inactive h1, .wf-inactive p {
visibility: visible;
}

Altri argomenti correlati

Perché i miei font per web provengono da use.typekit.net?

Ottieni supporto in modo più facile e veloce

Nuovo utente?