TUTORIAL CSS3 (CONTINUAÇÃO)

@FONT-FACE

A regra @font-face é utilizada para que você utilize fontes fora do padrão do sistema em seus sites. Para que isso funcione, nós disponibilizamos as fontes necessárias em seu servidor e linkamos estas fontes no arquivo CSS. A sintaxe é bem simples e tem suporte a todos os navegadores, com algumas ressalvas.

@font-face {
font-family: helveticaneue;
src: url(helveticaNeueLTStd-UltLt.otf);
}


Na primeira linha você customiza o nome da font que você usará durante todo o projeto. Na segunda linha definimos a URL onde o browser procurará o arquivo da font para baixar e aplicar no site. Você aplica a fonte como abaixo:

p {font:36px helveticaneue, Arial, Tahoma, Sans-serif;}

Suponha que o usuário tenha a font instalada, logo ele não precisa baixar a font, assim podemos indicar para que o browser possa utilizar o arquivo da própria máquina do usuário. Menos requisições, mais velocidade. Veja o código abaixo:

@font-face {
font-family: helveticaneue;
src: local(HelveticaNeueLTStd-UltLt.otf), url(HelveticaNeueLTStd-UltLt.otf);
}

Abaixo segue uma série de formatos que podem ser usados e que os browsers podem adotar:

String Font Format Common Extensions
truetype TrueType .ttf
opentype OpenType .ttf, .otf
truetype-aat TrueType with Apple Advanced Typography extensions .ttf
embedded-opentype Embedded OpenType .eot
woff WOFF (Web Open Font Format) .woff
svg SVG Font .svg, .svgz

Compatibilidade

As versões 7, 8 e 9 do Internet Explorer aceitam o @font-face apenas se a font for EOT. Você pode encontrar qualquer conversor online que esse problema é resolvido. Você pode converter suas fontes para EOT diretamente no Font Squirrel. O Safari, Firefox, Chrome e Opera aceitam fontes em TTF e OTF.

Para suprir a necessidade de atenção do Internet Explorer, você precisa especificar a URL da font .eot para que o Internet Explorer possa aplicar a font corretamente. A sintaxe fica desta forma:

@font-face {
font-family: helveticaneue;
src: url(helveticaNeueLTStd-UltLt.eot);
src: url(helveticaNeueLTStd-UltLt.otf);
}

Kit de sobrevivência

O Font Squirrel fez um pequeno favor para toda a comunidade. É um sisteminha que converte suas fontes para os formatos necessários e te devolve para você utilizar em seus sites:

http://migre.me/4qST9

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s