Questo lab di codice mostra come visualizzare immediatamente il testo utilizzando Font Face Observer.
Aggiungi osservatore dei caratteri
Font Face Observer è uno script
che rileva quando viene caricato un carattere. Il
fontfaceobserver.js
file è già stato salvato nella directory del progetto, quindi non devi aggiungerlo
separatamente. Tuttavia, devi aggiungere un tag script.
- Fai clic su Remix per modificare per rendere il progetto modificabile.
- Aggiungi un tag script per
fontfaceobserver.js
aindex.html
:
<div class="text">Some text.</div>
<script src="fontfaceobserver.js" type="text/javascript"></script>
</body>
Utilizzare Font Face Observer
Crea osservatori
Crea un osservatore per ogni famiglia di caratteri utilizzata nella pagina.
- Aggiungi il seguente script dopo lo script
fontfaceobserver.js
. Vengono creati osservatori per le famiglie di caratteri "Pacifico" e "Roboto":
<script src="fontfaceobserver.js" type="text/javascript"></script>
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
</script>
<body>
Se hai dubbi su quali osservatori dei caratteri devi creare, cerca le dichiarazioni font-family
nel CSS. Passa il nome font-family
di queste dichiarazioni a
FontFaceObserver()
. Non è necessario creare un osservatore dei caratteri per i caratteri di riserva.
Ad esempio, se il tuo CSS era:
font-family: "Times New Roman", Times, serif;
Dovresti aggiungere FontFaceObserver('Times New Roman')
. Times e serif sono caratteri di riserva, quindi non è necessario dichiarare FontFaceObserver per questi caratteri.
Rileva il caricamento dei caratteri
Il codice per rilevare il caricamento di un carattere è il seguente:
robotoObserver.load().then(function(){
console.log("Hooray! Font loaded.");
});
robotoObserver.load()
è una promessa che si risolve al caricamento del carattere.
Il sito di dimostrazione utilizza due caratteri diversi, quindi devi utilizzare Promise.all()
per attendere il caricamento di entrambi i caratteri.
- Aggiungi questa promessa allo script, subito sotto i FontFaceObserver che hai appena dichiarato:
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
/* Do things */
});
✔️Check-in
Lo script dovrebbe avere il seguente aspetto:
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
/* Do things */
});
</script>
Applica la classe fonts-loaded
- Sostituisci il commento
/* Do things */
nello script con questa riga:
document.documentElement.classList.add("fonts-loaded");
In questo modo, la classe fonts-loaded
viene aggiunta all'elemento radice del documento (il
tag <html>
) dopo il caricamento di entrambi i caratteri.
✔️Check-in
Lo script completo dovrebbe avere il seguente aspetto:
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
document.documentElement.className += " fonts-loaded";
});
</script>
Aggiorna CSS
La pagina deve essere stilizzata in modo da utilizzare inizialmente un carattere di sistema e caratteri personalizzati una volta applicata la classe fonts-loaded
.
- Aggiorna il CSS:
.header {
html.fonts-loaded .header {
font-family: 'Pacifico', cursive;
}
.text
html.fonts-loaded .text {
font-family: 'Roboto', sans-serif;
}
Verifica
- Per visualizzare l'anteprima del sito, premi Visualizza app, quindi premi A schermo intero .
Se la pagina ha questo aspetto, significa che hai implementato correttamente Font Face Observer e hai eliminato il "lampo di testo invisibile".