Desde os problemas causados pelo uso de Cufon eu me aventurei a deixar de usar recursos de fontes externas, mas ultimamente tenho procurado métodos alternativos de carregamento de fontes para ver se há uma maneira melhor; métodos melhores têm uma maneira de simplesmente aparecer do nada.
Existem muitos métodos novos por aí e variações para cada método que parece; Devo usar o typekit ? ou google webfonts (com js ou css)? devo continuar a usar fontes de carregamento local (por exemplo, método gerado por fontsquirrel.com)?
Vou listar os métodos que parecem mais bem recebidos abaixo, com alguns testes, mas realmente vale a pena mudar para um webfont? Parece que carregaria uma carga de recursos maior (solicitações de http) e teria menos tipos de formato de arquivo (menos compatibilidade) etc. Mas parece que os arquivos são carregados de forma assíncrona e eficiente na maioria dos casos.
- É apenas uma questão de situação e necessidade? Se sim, quais são eles?
- Existem diferenças drásticas entre esses métodos?
- Existe um método melhor que não listei?
- Quais são os prós / contras do desempenho? Veja? dependências? compatibilidades?
Estou realmente procurando as melhores práticas aqui, o desempenho é importante, mas também a escalabilidade e a facilidade de uso. Para não mencionar, olhar e sentir.
CSS do Google
- usa apenas folha de estilo externa
- usa apenas o menor tipo de arquivo compatível
- pode usar
@importou<link>ou pegar o conteúdo de styleshee (@font-face) e colocá-lo diretamente em sua própria folha de estilo.
Resultado dos testes
78ms load of html 36ms load of css
Método JS do Google
- usa
webfont.jspara carregar o estilete - usa apenas o menor tipo de arquivo compatível
- acrescenta
:rootelemento com classe - adiciona script à cabeça.
Resultado dos testes
171ms load of html 176ms load of js 32ms load of css
Método Typekit
- acrescenta
:rootelemento com classe. - pode usar
*.jstrecho ou arquivo carregado externamente*.jsarquivo - usa em
data:font/opentypevez do arquivo de fonte. - adiciona script à cabeça
- adiciona css incorporado ao cabeçalho
adiciona folha de estilo externa ao cabeçalho
você pode facilmente adicionar / remover / ajustar fontes e seletores direcionados em typekit.com
Resultado dos testes
169ms load of html 213ms load of js 31ms load of css 3ms load of data:font/
… E o Método Font Squirrel
@font-face{
font-weight:400;
font-style:normal;
font-family:open_sanslight;
src:url(../font/opensans-light-webfont.eot);
src:url(../font/opensans-light-webfont.eot?#iefix) format(embedded-opentype),
url(../font/opensans-light-webfont.woff) format(woff),
url(../font/opensans-light-webfont.ttf) format(truetype),
url(../font/opensans-light-webfont.svg#open_sanslight) format(svg)
}… Ou com dados: método da fonte…
@font-face {
font-family: 'open_sanslight';
src: url('opensans-light-webfont-f.eot');
}
@font-face {
font-family: 'open_sanslight';
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF4sABMAAAAArXQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcZLn0KkqwK44Jq866WBSpzpsNY2IyGAhoJFBbYjuxmyns5sNa4NwldcJ7eh3Uy5gQkURIlqWzONe3HcLsDX1x/+jifDXvbzgTBjopZElndil3hJkERJkmRJkVRJk3TJkEzJkmzOc4HLXOEOF7nEX/*thisisnotafullencodingjustanexample*/bZwUnK4yS3JlTx2Sr4USKEUSbHVX9fcGNBs4fqgw+GoNHU7lKr36Eqn0lCWt6pHFpWaUlc6lS6loSxRlirLlP/uuU01dVfT7L6gPxyqraluCpgj3WtqeC1V4VBDW2N4K1r1esw/IupKp9L1FwlqnuIAAAB42j3NvQ7BUBjG8R5tTz/0u2UjNTTESYQbMGmXLiISbeI6zBYjbuWtye7CeMJxtuf3LP8ne1+IXbWa7G3TMXZru4qLZkJRW1O2wzi3I+Li2Gik5yXpYkNGXj70YU98YQLGHxwwXxIWwO8SNmAdJBzAXku4gFNI9AF38QMjTwZ9vN6yJzq9OoEB6I8VQzDYK0ZguFKMwWiumIDxTDEFk6liBqaF4gDMFFvKxAfOxFUGAAABUxSL9gAA) format('woff'),
url('opensans-light-webfont-f.ttf') format('truetype'),
url('opensans-light-webfont-f.svg#open_sanslight') format('svg');
font-weight: normal;
font-style: normal;
}fonte
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet'>Georgianwebfonts locais . Estou usando o método font-squirrel e gostaria de ver uma ótima resposta para essa pergunta também.@font-facedeclarações à prova de balas , talvez você possa encontrar informações úteis. paulirish.com/2009/bulletproof-font-face-implementation-syntaxRespostas:
Primeiro, vou esclarecer algo sobre a oferta do Google. Na verdade, ele carregará o menor formato que seu navegador pode suportar. WOFF oferece tamanhos de arquivo pequenos, e seu navegador oferece suporte, então é o que você vê. WOFF também é amplamente suportado. No entanto, no Opera, por exemplo, você provavelmente obterá a versão TrueType da fonte.
A lógica do tamanho do arquivo também é, acredito, o motivo pelo qual o Font Squirrel os tenta nessa ordem. Mas isso é principalmente especulação da minha parte.
Se você estiver trabalhando em um ambiente onde cada solicitação e byte contam, você terá que fazer alguns perfis para descobrir qual funciona melhor para o seu caso de uso. As pessoas verão apenas uma página e nunca mais visitarão? Nesse caso, as regras de cache não importam tanto. Se eles estiverem navegando ou retornando, o Google pode ter regras de cache melhores do que o seu servidor. A latência é o maior problema ou a largura de banda? Se houver latência, busque menos solicitações, portanto, hospede-o localmente e combine os arquivos o máximo possível. Se for largura de banda, escolha a opção que terminar com o menor código e o menor formato de fonte.
Agora, vamos à consideração CSS vs JS. Vejamos a seguinte parte do HTML:
Em muitos casos,
script1,style1, estyle2seria bloqueio. Isso significa que o navegador não pode continuar exibindo o documento até que o recurso seja carregado (embora os navegadores modernos confundam um pouco). O que pode ser uma coisa boa, especialmente com folhas de estilo. Isso evita um flash de conteúdo sem estilo e também evita a grande mudança que ocorreria ao aplicar os estilos (e mudar o conteúdo é realmente irritante para o usuário).Por outro lado,
script2não estaria bloqueando. Ele pode ser carregado posteriormente, e o navegador pode prosseguir para analisar e exibir o restante do documento. Isso também pode ser benéfico.Falando especificamente sobre fontes (e ainda mais especificamente, a oferta do Google), eu provavelmente ficaria com um método CSS (eu gosto
@importporque continua estilizando com a folha de estilo, mas poderia ser só eu). O arquivo JS carregado pelo script ( http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js ) é maior do que a@font-facedeclaração e parece muito mais trabalhoso. E não acredito que o carregamento da fonte em si (o WOFF ou TTF) esteja bloqueando, então não deve atrasar muito as coisas. Eu não sou pessoalmente um grande fã de CDNs, mas o fato é que eles são MUITO rápidos. Os servidores do Google vão superar a maioria dos planos de hospedagem compartilhada e, como suas fontes são tão populares, as pessoas podem até mesmo tê-las armazenadas em cache.E isso é tudo que tenho.
Não tenho experiência com o Typekit, então deixei de fora da minha teorização. Se houver alguma imprecisão, sem contar generalizações entre navegadores por causa de argumentos, indique-as.
fonte
Acho que você abordou os tempos de carregamento muito bem em sua pergunta. Do meu ponto de vista, existem algumas fontes que devem ser adicionadas à lista e algumas outras considerações que devem ser examinadas para obter uma visão completa das opções.
Algumas outras fontes de fontes confiáveis
cloud.typography
http://www.typography.com/cloud/
Pelo que eu posso dizer, as fontes são incorporadas como dados em um arquivo CSS:
Aqui estão minhas especificações:
Aqui está sua descrição de alto nível de sua implantação .
Fonts.com
Não usei este serviço, mas eles são fornecedores de fontes bem estabelecidos e as informações que listaram em seu site são bastante impressionantes. Não tenho especificações sobre seus métodos exatos, mas aqui está o que eu sei que eles têm:
FontSpring
Afiliado com FontSquirrel. As fontes podem ser adquiridas aqui por um preço fixo. Os arquivos de fontes e CSS que os acompanham são entregues para serem implantados em seu próprio servidor, como o FontSquirrel.
Especificações expandidas
Quanto aos prós e contras gerais de cada serviço de fonte, aqui estão algumas comparações:
Tamanho da biblioteca de fontes
Preços
Qualidade da fonte
A qualidade das fontes da web pode variar um pouco. Isso pode abranger coisas como os próprios formatos das letras ou o espaçamento ou o tamanho do conjunto de caracteres. Tudo isso determina a impressão geral de qualidade que uma fonte dará. Embora as opções gratuitas tenham algumas boas opções, elas também têm algumas fontes que não são de alta qualidade, portanto, você deve escolher com cuidado essas fontes.
Qualidade da fonte II: Tipografia
Existem muitos refinamentos na tipografia de desktop que são realmente difíceis de obter em fontes da web. Alguns desses serviços oferecem maneiras de entregá-los.
Suporte de navegador
Isso se resume principalmente aos formatos de fonte que são suportados por cada serviço. Os principais são:
Mais informações em The @ Font-Face Rule e úteis Web Font Tricks
Todos esses serviços oferecem suporte aos principais formatos de fonte. Com fontes auto-hospedadas, contanto que você use a sintaxe correta, você deve estar coberto. Aqui está uma atualização de 2011 da sintaxe à prova de balas do FontSpring :
Desempenho I: Downloads
Pelo que entendi, usar a sintaxe acima permite que os navegadores obtenham o formato específico que funciona para eles, portanto, não há perda de downloads em formatos de fonte que não funcionam.
Os serviços pagos como Fonts.com, Typekit ou Typography.com usam métodos para detectar o formato correto e, em seguida, fornecer o formato de fonte correto, geralmente como dados base64 em um arquivo CSS.
Pelo que posso ver, as diferenças nos métodos listados acima são bastante insignificantes para usuários de Internet de alta velocidade (parece uma diferença de <200 ms), mas pode valer a pena considerar para dispositivos em redes mais lentas, especialmente para acessos de página sem cache.
Desempenho II: Subsetting
Se você sabe que haverá apenas alguns caracteres que deseja usar, pode construir sua fonte com um subconjunto de caracteres e, assim, reduzir o tamanho do download.
Desempenho III: Entrega
Suporte de linguas
Teste e Implementação
fonte
Bem, como você está depois
a resposta é (como sempre em web design): Depende!
Uma coisa certa é que eu não recomendaria usar a abordagem JS (mostrada em seu segundo exemplo).
Pessoalmente, não gosto de fazer coisas de apresentação e estilos CSS dependendo do Javascript, embora a grande maioria dos usuários o tenha habilitado. É uma questão de não misturar as coisas.
E como você pode ver no seu exemplo dado, existe algum tipo de FOUC (flas de conteúdo não estilizado), porque a página já foi renderizada pelo navegador antes da fonte estar disponível. Assim que estiver, a página será redesenhada. E quanto maior o site, maior o impacto (desempenho)!
Então, eu nunca usaria qualquer solução JS para incorporação de fontes.
Agora, vamos dar uma olhada nos métodos CSS puros.
Há algum tempo aqui está uma discussão sobre "vs. @import". Pessoalmente, prefiro evitar o uso de @import e sempre usar
<link>apenas. Mas isso é principalmente uma questão de preferências pessoais. A única coisa que você nunca deve fazer é misturar os dois!Local vs. CDN
Ao decidir se deseja hospedar seus arquivos de fontes localmente ou usar um CDN, então, na maioria das vezes, depende do número de fontes diferentes e das respectivas fontes que deseja incorporar.
Por que isso é importante ou desempenha um papel?
Do ponto de vista do desempenho, eu recomendaria incluir a fonte Base64 codificada em sua (uma) folha de estilo. Mas apenas o formato .woff, já que é usado por quase todos os navegadores modernos, o que significa para a maioria dos visitantes. Para todos os outros usuários, conviver com a solicitação adicional.
Porém, devido ao "overhead" causado pela codificação Base64 e pelo tamanho de um arquivo de fonte (mesmo no formato .woff), esta técnica só deve ser usada se você não tiver mais do que 3 ou 4 fontes diferentes. E sempre certifique-se de que seu servidor entrega os arquivos (CSS) compactados.
A grande vantagem de fazer isso é que você não tem uma solicitação adicional para o arquivo de fonte. E após o carregamento da primeira página (independentemente da página do seu site), o arquivo CSS é armazenado em cache. Isso também é uma vantagem se você usar o cache do aplicativo HTML5 (o que certamente fará).
Além do fato de que um autor não deve usar mais do que 3 ou 4 fontes diferentes em seu site, vamos dar uma olhada no método de uso do CDN do Google.
Em primeiro lugar, esteja ciente de que você pode (e sempre deve) incluir todas as fontes desejadas em uma única
<link>, como:Isso resultará na seguinte resposta:
Como você pode ver, existem 9 arquivos de fontes diferentes, o que significa um total de 10 (incluindo a do elemento link) solicitações, se o usuário não tiver uma ou mais das fontes solicitadas instaladas localmente. E essas solicitações são repetidas a cada nova solicitação de página em seu site (embora nenhum dado seja transferido)! Além disso, a resposta à solicitação do
<link>nunca é armazenada em cache.Recomendação:
Afinal, eu realmente recomendo incluir seus arquivos de fonte no formato .woff Codificado em Base64 em sua folha de estilo!
Veja este belo artigo para obter um exemplo e uma descrição de como fazer isso!
fonte
Eu uso o método css inline porque a sobrecarga da solicitação extra é maior do que o aumento de tamanho durante a codificação bease64. Isso também é compensado pela compressão gizip pelo servidor dos arquivos css.
Outra opção é usar o carregamento assíncrono de fontes, mas na maioria das vezes os usuários verão as fontes surgindo após o carregamento.
Independentemente do método, você pode reduzir o tamanho do arquivo de fonte incluindo apenas os conjuntos de caracteres que usará.
fonte
Pessoalmente, eu uso o Google Fonts. Eles têm uma boa variedade de opções e recentemente aprimoraram a compactação das fontes, mudando para a compactação Zopfli também. O Google está se esforçando para tornar a web mais rápida, então acho que mais otimização nessa parte virá deles também.
O que quer que você escolha como uma entrega de fontes terceirizada, você sempre obterá reduções na velocidade pelas solicitações de obtenção das fontes. A melhor coisa, vista de uma perspectiva de velocidade, seria servir as fontes você mesmo. Se você não se importa com os milissegundos extras que leva para carregar de uma entrega terceirizada, deve continuar se acha que a facilidade de usá-los vale milissegundos.
Não sei sobre o Typekit e os outros, mas com o Google Fonts você pode optar por receber subconjuntos específicos e variedade de caracteres para acelerar ainda mais a entrega.
Escolhendo um subconjunto:
Escolha de uma variedade de personagens:
Você pode usar dns-prefetch para melhorar ainda mais a velocidade com a entrega de fontes.
Eu realmente acho, e espero, que o Google faça todo o possível para acelerar a entrega de suas fontes o máximo que puderem. Os milissegundos que leva para carregá-los não prejudicam meu site, então eu os uso com prazer.
Longa história curta:
Se a entrega de fontes em milissegundos está prejudicando seu site, por exemplo, fazendo-o carregar mais do que o recomendado 1 segundo, acho que você mesmo deve hospedá-las.
fonte
<link rel=dns-prefetch href='//fonts.googleapis.com'>uso para análises, mapeamento de calor e subdomínios, por algum motivo ele não foi registrado para rodar para webfonts externos. E o tempo de carregamento difere muito de fonte para fonte, suponho que se você estiver usando uma fonte bastante popular (pode ser armazenada em cache) ou apenas um punhado de fontes selecionadas, usar webfonts é uma fonte de fontes bastante rápida. Vou postar testes de velocidade aqui em breve.A melhor opção é importar as fontes usando ajax, assim:
Eu faço isso na minha página da web e ganho 9 pontos no teste do Google Insights.
fonte
asyncatributo? Ele faz a mesma coisa.