Estou usando @font-face
pela primeira vez e baixei um kit de fontes do fontsquirrel
O código que eles recomendam inserir no meu CSS é:
@font-face {
font-family: 'junctionregularRegular';
src: url('Junction-webfont.eot');
src: local('☺'),
url('Junction-webfont.woff') format('woff'),
url('Junction-webfont.ttf') format('truetype'),
url('Junction-webfont.svg#webfontoNEpZXy2') format('svg');
}
Agora, a coisa do rosto sorridente me deixou perplexo. Mas também o número de URLs no src - por que eles recomendam tantos arquivos e todos eles serão enviados ao navegador quando uma página for renderizada? Existe algum dano na remoção de todos, exceto o .ttf?
local()
declaração? É redundante? O navegador não deve usar o seu primeirourl()
sem ele?O local (☺︎) é um hack css para desviar o IE6-8 do download de fontes que não podem ser usadas (ele só pode usar fontes no formato EOT).
Explicado: A última propriedade src tem precedência na cascata do CSS, o que significa que o CSS será analisado de baixo para cima. O local (☺︎) fará com que o IE pule o src na parte inferior, sem desperdiçar o download de fontes que não pode usar largura de banda, e vá direto para a fonte no
.eot
formato (definido na linha acima na sua pergunta) que será usado. O smiley é apenas para garantir que não haja uma fonte local com esse nome (combinação de caracteres).Leia mais aqui: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/
fonte
@ font-face A última propriedade src tem precedência na cascata CSS, o que significa que o CSS será analisado de baixo para cima.
fonte