Evite flash de texto invisível

Katie Hempenius
Katie Hempenius
X

Este codelab mostra como exibir texto imediatamente usando Font Face Observador.

Adicionar o Font Face Observer

O Font Face Observer é um script. que detecta quando uma fonte é carregada. A fontfaceobserver.js arquivo já foi salvo no diretório do projeto, então você não precisa adicioná-lo separadamente. No entanto, você precisa adicionar uma tag script para ele.

  • Clique em Remixar para editar para tornar o projeto editável.
  • Adicione uma tag de script para fontfaceobserver.js a index.html:
  <div class="text">Some text.</div>
  <script src="fontfaceobserver.js" type="text/javascript"></script>
</body>

Usar o Font Face Observer

Criar observadores

Crie um observador para cada família de fontes usada na página.

  • Adicione o script a seguir após o script fontfaceobserver.js. Isso cria observadores para o "Pacífico" e "Roboto" famílias de fontes:
  <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 você não tiver certeza de quais observadores de tipo de fonte precisa criar, procure as declarações font-family no seu CSS. Transmita o nome font-family dessas declarações para FontFaceObserver(). Não há necessidade de criar um observador de fontes para fontes substitutas.

Por exemplo, se o CSS for:

font-family: "Times New Roman", Times, serif;

adicione FontFaceObserver('Times New Roman'). Horas e serifa são fontes substitutas, então não seria necessário declarar FontFaceObservers para elas.

Detectar o carregamento da fonte

O código para detectar um carregamento de fonte é semelhante a este:

robotoObserver.load().then(function(){
  console.log("Hooray! Font loaded.");
});

A robotoObserver.load() é uma promessa que é resolvida quando a fonte é carregada.

O site de demonstração usa duas fontes diferentes, então você precisa usar Promise.all(). aguardar até que as duas fontes sejam carregadas.

  • Adicione essa promessa ao seu script, logo abaixo dos FontFaceObservers que você que acabamos de declarar:
Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});

✔️Agendamento

Seu script ficará assim:

<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>

Aplicar a classe fonts-loaded

  • Substitua o comentário /* Do things */ no script por esta linha:
document.documentElement.classList.add("fonts-loaded");

Isso adiciona a classe fonts-loaded ao elemento raiz do documento (o elemento <html>) depois que as duas fontes forem carregadas.

✔️Agendamento

O script concluído ficará assim:

<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>

Atualizar CSS

Inicialmente, sua página deve ser estilizada para usar uma fonte do sistema e fontes personalizadas uma vez a classe fonts-loaded for aplicada.

  • Atualize o CSS:
.header {
html.fonts-loaded .header {
  font-family: 'Pacifico', cursive;
}

.text
html.fonts-loaded .text {
  font-family: 'Roboto', sans-serif;
}

Verificar

  • Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia tela cheia

Se a página tiver esta aparência, significa que você implementou corretamente o tipo de fonte. Observador e acabei com o "Flash do texto invisível".

Um título em fonte cursiva.