Questo lab di codice mostra come visualizzare immediatamente il testo utilizzando Font Face Osservatore.
Aggiungi osservatore caratteri caratteri
Font Face Observer è uno script
che rileva il caricamento di un carattere. La
fontfaceobserver.js
il file è già stato salvato nella directory del progetto, quindi non è necessario aggiungerlo
separatamente. Tuttavia, devi aggiungere un tag script.
- Fai clic su Remixa per modificare per rendere modificabile il progetto.
- Aggiungi un tag script per
fontfaceobserver.js
aindex.html
:
<div class="text">Some text.</div>
<script src="fontfaceobserver.js" type="text/javascript"></script>
</body>
Usa 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
. Questo crea osservatori per il "Pacifico" e "Roboto" famiglie di caratteri:
<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 non sai quale carattere creare per gli osservatori dei volti, cerca
le dichiarazioni font-family
nel tuo CSS. Trasmetti il nome font-family
di queste dichiarazioni a
FontFaceObserver()
. Non è necessario creare un sistema di osservazione dei caratteri
caratteri di riserva.
Ad esempio, se il tuo CSS era:
font-family: "Times New Roman", Times, serif;
aggiungi FontFaceObserver('Times New Roman')
. L'ora e Serif sono
caratteri di fallback, quindi non è necessario dichiarare FontFaceObservers.
Rileva il caricamento dei caratteri
Il codice per rilevare il caricamento di un carattere è simile al seguente:
robotoObserver.load().then(function(){
console.log("Hooray! Font loaded.");
});
robotoObserver.load()
è una promessa che si risolve al caricamento del carattere.
Il sito demo utilizza due caratteri diversi, quindi devi usare Promise.all()
attendere il caricamento di entrambi i caratteri.
- Aggiungi questa promessa allo script, proprio sotto i FontFaceObservers che appena dichiarato:
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
/* Do things */
});
✔️Fai il check-in
Ora il tuo 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 fonts-loaded
corso
- Sostituisci il commento
/* Do things */
nello script con questa riga:
document.documentElement.classList.add("fonts-loaded");
La classe fonts-loaded
viene aggiunta all'elemento principale del documento (il
<html>
) una volta caricati entrambi i caratteri.
✔️Fai il check-in
Lo script completato 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
Lo stile della pagina deve essere composto inizialmente da un carattere di sistema e uno stile personalizzato
Il corso fonts-loaded
è stato applicato.
- 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 Schermo intero .
Se la pagina è simile a questa, significa che hai implementato correttamente Font Face Osservatore e si è liberato del "Flash of Invisible Text".