Evita testo invisibile

Katie Hempenius
Katie Hempenius
X

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 a index.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 schermo intero.

Se la pagina è simile a questa, significa che hai implementato correttamente Font Face Observationr ed eliminato il "Flash di testo invisibile".

Un&#39;intestazione in un carattere corsivo.