Questo codelab mostra come visualizzare immediatamente il testo utilizzando Font Face Lookr.
Aggiungi visualizzatore volti
Font Face Observationr è uno script che
rileva il caricamento di un carattere. Il file fontfaceobserver.js
è già stato salvato nella directory del progetto, quindi non è necessario aggiungerlo separatamente. Tuttavia, devi aggiungere un tag script apposito.
- 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>
Usa Font Face rispettanor
Crea osservatori
Creare un osservatore per ogni famiglia di caratteri utilizzata nella pagina.
- Aggiungi il seguente script dopo lo script
fontfaceobserver.js
. Vengono creati degli 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>
In caso di dubbi su quali strumenti di osservazione 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;
devi aggiungere FontFaceObserver('Times New Roman')
. I caratteri orari e serif sono caratteri di riserva, pertanto non è necessario dichiarare FontFaceHighlightrs.
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 quando viene caricato il carattere.
Il sito dimostrativo utilizza due caratteri diversi, quindi devi utilizzare Promise.all()
per attendere che entrambi i caratteri siano stati caricati.
- Aggiungi questa promessa allo script, proprio sotto i FontFace rispettanors che hai appena dichiarato:
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
/* Do things */
});
✔️ Controlla
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 fonts-loaded
corso
- 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 principale del documento (il tag <html>
) una volta caricati entrambi i caratteri.
✔️ Controlla
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
Una volta applicata la classe fonts-loaded
, lo stile della pagina deve essere inizialmente un carattere di sistema e caratteri personalizzati.
- 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 Schermo intero .
Se la pagina è simile a questa, significa che hai implementato correttamente Font Face Observationr ed eliminato il "Flash di testo invisibile".