Passei algumas noites investigando a melhor maneira de implementar o @ font-face com os navegadores modernos de hoje. Eu sou um desenvolvedor web / sistema em tempo integral com experiência como designer gráfico. Eu acho que as oportunidades e possibilidades com o web design estão se tornando cada vez mais interessantes. Então, eu fiz alguns testes e gostaria de saber se alguém tem conselhos, quaisquer ideias ou insumos melhores sobre isso. Meu cenário de teste é assim.

Eu testei com ALOT de diferentes ferramentas e aplicativos online, mas no final eu reduzi isso a um serviço online e a um aplicativo.

FontSquirrel, ferramenta online grátis.http://www.fontsquirrel.com/fontface/generatorFontXChange, aplicativo para mac / win - 99 $.http://fontgear.net/fontxchange.html

Eu usei uma fonte que foi enviada com o meu Mac, Tamil Sangam MN e Tamil Sangam MN Bold, ambos vieram como tipo aberto, .otf.

TamilSangamMN.otf - 290 KBTamilSangamMNBold.otf - 271 KBInvestigando os tamanhos de conversãoFontSquirrel

Esta é uma boa ferramenta online, é muito boa. Existem alguns modos diferentes e usei o Basic e o Optimal. A saída do meu arquivo .otf foi svg, ttf, eot e woff.

Basic

Regular

TamilSangamMN.svg233 KBTamilSangamMN.ttf71 KBTamilSangamMN.eot25 KBTamilSangamMN.woff30 KBTotal: 359 KB

Negrito

TamilSangamMNbold.svg225 KBTamilSangamMNbold.ttf69 KBTamilSangamMNbold.eot25 KBTamilSangamMNbold.woff30 KBTotal: 349 KBÓtimo

A primeira coisa que notei com as fontes ótimas é que elas são consideravelmente menores do que as variantes básicas ~ 260 KB!

Regular

TamilSangamMN.svg33 KBTamilSangamMN.ttf25 KBTamilSangamMN.eot15 KBTamilSangamMN.woff17 KBTotal: 90 KB

Negrito

TamilSangamMNbold.svg33 KBTamilSangamMNbold.ttf25 KBTamilSangamMNbold.eot15 KBTamilSangamMNbold.woff17 KBTotal: 90 KBFontXChange

Essa ferramenta pode fazer muito mais do que apenas manipular fontes para a web. Pode converter vários formatos entre si; como opentype, true type, fontes da web, post script e assim por diante. O resultado é, em geral, uma qualidade muito alta, os arquivos são tão grandes, quase duas vezes o tamanho das versões Basic do FontSquirrels e mais de 7 vezes maiores do que a versão do FontSquirrels Optimal.

Regular

TamilSangamMN.svg480 KBTamilSangamMN.ttf72 KBTamilSangamMN.eot72 KBTamilSangamMN.woff80 KBTotal: 704 KB

Negrito

TamilSangamMNbold.svg463 KBTamilSangamMNbold.ttf69 KBTamilSangamMNbold.eot70 KBTamilSangamMNbold.woff80 KBTotal: 682 KBConfigurando o CSS

Confundiu-me um pouco no início que a ordem real na lista de fontes importava. Então eu descobri que alguns pegam o primeiro formato que ele acha compatível ao invés de ficar com o formato que é ótimo - e é uma droga. Depois de alguns trabalhos descobri que esta é a melhor maneira de formatar o seu css (note a ordem dos tipos de arquivo |importante!).

@font-face {
    font-family: 'TamilSangam';
    src: url('.eot');
    src: url('.svg') format('svg'),          
         url('.eot?#iefix') format('embedded-opentype'),
         url('.woff') format('woff'),
         url('.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Meus resultados de testeFontes regulares

Eu marquei a melhor versão com um *

MAC do Firefox (15.0.1)

FontSquirrel Optimal: Processa um pouco a gorduraFontSquirrel Basic: Renders um pouco a gorduraFontXChange 4.0: Processa um pouco a gordura, mas o kerning é melhor que a versão FontSquirrel *

Firefox Windows (15.0.1)

FontSquirrel Optimal: Renderiza muito bemFontSquirrel Basic: A fonte fica irregular / instávelFontXChange 4.0: Renderiza muito bem *

Safari Mac (6.0)

FontSquirrel Optimal: renderização perfeitaFontSquirrel Basic: renderização perfeitaFontXChange 4.0: renderização perfeita *

Mac Chrome (21,0)

FontSquirrel Optimal: Um pouco de gorduraFontSquirrel Basic: Um pouco de gorduraFontXChange 4.0: renderização perfeita *

Janelas cromadas (21,0)

FontSquirrel Optimal: renderização perfeitaFontSquirrel Basic: renderização perfeitaFontXChange 4.0: renderização perfeita *

Internet Explorer (9.0)

FontSquirrel Optimal: renderização perfeita *FontSquirrel Basic: renderização perfeitaFontXChange 4.0: fonte fica irregular / instávelFontes em negrito

MAC do Firefox (15.0.1)

FontSquirrel Optimal: Processa muito gordo *FontSquirrel Basic: Processa muito gordoFontXChange 4.0: Renders muito gorda, mas melhor kerning(Eu gostaria de selecionar este para o mac, mas desde que a versão do Firefox não é compatível aqui, ele tem que ir)

Firefox Windows (15.0.1)

FontSquirrel Optimal: Processa ok, não muito antialiased *FontSquirrel Basic: A fonte fica irregular / instávelFontXChange 4.0: Fonte fica um pouco distorcida / irregular

Safari Mac (6.0)

FontSquirrel Optimal: renderização perfeita *FontSquirrel Basic: renderização perfeitaFontXChange 4.0: dá gordura

Mac Chrome (21,0)

FontSquirrel Optimal: renderização perfeita *FontSquirrel Basic: boa renderização, alguns por cento para gorduraFontXChange 4.0: dá gordura

Janelas cromadas (21,0)

FontSquirrel Optimal: renderização perfeita *FontSquirrel Basic: renderização perfeitaFontXChange 4.0: Render muito gordo

Internet Explorer (9.0)

FontSquirrel Optimal: renderização perfeita *FontSquirrel Basic: renderização perfeitaFontXChange 4.0: fonte fica irregular / instávelA implementação final

Eu geralmente organizo meus webfonts no seguinte padrão, <webfonts> / <conversion source> / <conversion method> / <fonts>

/* Regular */
@font-face {
    font-family: 'TamilSangam';
    src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn.eot');
    src: url('webfonts/fontxchange/TamilSangamMN.svg#TamilSangamMN') format('svg'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn.eot?#iefix') format('embedded-opentype'),
         url('webfonts/fontxchange/TamilSangamMN.woff') format('woff'),
         url('webfonts/fontxchange/TamilSangamMN.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Bold */
@font-face {
    font-family: 'TamilSangam';
    src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.eot');
    src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.svg#tamil_sangam_mnbold') format('svg'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.eot?#iefix') format('embedded-opentype'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.woff') format('woff'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

Visão geral gráfica do resultado (tamanho real emhttp://i.stack.imgur.com/atb98.png)

Conclusões e missões

Não há uma única ferramenta disponível que forneça fontes que sejam renderizadas no Mac e no Windows em todos os navegadores. Você deve experimentar e testar em cada fonte. A metodologia postada acima é apenas uma maneira simples e uma sugestão de como testar e experimentar com o @ font-face.

Existe alguma coisa que você acha que eu poderia mudar em meus métodos ou implementação, existe algum aplicativo ou serviço que eu perdi?

Tudo de bom / T