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
aindex.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
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".