Para acompanhar, acabei usando as opções avançadas do gerador @ font-face para subconjunto de minhas fontes, portanto, carreguei apenas os caracteres necessários.
Uma das opções era codificar Base64 as fontes (o que me permitiu incorporá-las no meu arquivo CSS). Se a memória servir, o Base64 codifica .woff
a .ttf
fonte e.
Embora eu goste de oferecer suporte ao maior número de usuários possível, decidi que não valia a pena abrandar os usuários de navegadores modernos com dados extras, provavelmente redundantes, então usei o Modernizr (que usa yep / nope.js) para carregue assincronamente um CSS
arquivo separado com referências a todos os formatos de fonte, de acordo com a sintaxe reforçada da fonte à prova de balas .
Eu andei de um lado para o outro entre Base64 que codifica a .woff
fonte e inclui o restante das declarações de fonte no CSS
arquivo primário ou inclui apenas a Base64 codificada .woff
no primário CSS
e depois inclui os outros formatos em um CSS
arquivo que eu carreguei de forma assíncrona Modernizr.load
.
Eu prefiro tempos de carregamento rápidos do que estéticos, portanto o FOUC não era uma grande preocupação, mas observarei que a maioria dos navegadores 'piscou' nas fontes quando elas carregaram (que era depois que as fontes codificadas pela Base64 no CSS
carregamento) eram assíncronas.
No lado positivo, uma vez que as fontes foram carregadas e armazenadas em cache (cabeçalhos de longa duração definidos no servidor), o 'piscar' foi eliminado e eu pude carregar conjuntos estendidos de fontes para que os usuários que falassem outros idiomas (e usassem o O widget de tradução do Google incluído) ainda veria o texto estilizado.
Como esse era o meu próprio site, pude experimentar, mas o fiz principalmente para "mostrar", sou mais conservador com os sites dos clientes.
Outra técnica que eu implementei foi colocar todas as .svg
fontes em um único arquivo e identificar cada uma com seu próprio ID, em vez de ter cada uma em um arquivo separado, como o gerador @ font-face produz.