Archive for the ‘Artigos’ Category

@font-face já pode ser usado

Tuesday, February 9th, 2010


O @font-face e a declaração standard no CSS para importação de fontes, se você esta cansado de usar image replacement, veja que já é possivel usar font-face para a grande maioria dos browsers incluindo o Internet Explorer 4 para fontes TrueType, isso mesmo, Internet Explorer 4.

Nos browsers mais modernos(Excluindo o IE8), você consegue importar fontes com seus arquivos originais, para o Interner Explorer você precisa transformar para o padrão eot(Embedded OpenType):

exemplo de font-face:

@font-face{
font-family: "Arial Rondend";
font-style: normal;
font-weight: bold;
src: url("../fonts/arial_rounded_mt_bold.eot");
}
@font-face{
font-family: "Arial Rondend";
font-style: normal;
font-weight: bold;
src: url("../fonts/arial_rounded_mt_bold.ttf") format("truetype");
}

Primeiro você coloca o código para o Internet Explorer, depois você coloca para os outros browsers.

Como transformar uma fonte TrueType para o padrão eot(Embedded OpenType)

Use o software ttf2eot, com ele é muito simples fazer as conversões, a Microsoft disponibiliza um software para isso, que pelo menos aqui no meu serviço, com Windows XP SP3 eu não consegui rodar adequadamente, caso se interessem: WEFT.

Cuidado no uso das fontes, pois muitas são pagas e para usá-las dessa maneira, tem que pagar por um tipo de licensa especial, procure usar fontes gratuitas com esse método.

Esta técnica esta em uso em http://www.winnerkids.com.br