He pasado algunas noches investigando la mejor manera de implementar @ font-face con los navegadores modernos de hoy. Soy un desarrollador web / sistema a tiempo completo con experiencia como diseñador gráfico. Encuentro las oportunidades y posibilidades con el diseño web cada vez más interesante. Por lo tanto, hice algunas pruebas y me gustaría saber si alguien tiene consejos, alguna mejor idea o información sobre esto. Mi escenario de prueba se ve así.

Probé con MUCHAS herramientas y aplicaciones en línea diferentes, pero al final reduje esto a un servicio en línea y una aplicación.

FontSquirrel, herramienta en línea - gratis.http://www.fontsquirrel.com/fontface/generatorFontXChange, aplicación para mac / win - 99 $.http://fontgear.net/fontxchange.html

Utilicé una fuente que se envió con mi Mac, Tamil Sangam MN y Tamil Sangam MN Bold, ambas de tipo abierto, .otf.

TamilSangamMN.otf - 290 KBTamilSangamMNBold.otf - 271 KBInvestigando tamaños de conversiónFontSquirrel

Esta es una buena herramienta en línea, es muy buena. Hay algunos modos diferentes y he usado el Básico y el Óptimo. La salida de mi archivo .otf fue svg, ttf, eot y woff.

BASIC

Regular

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

Negrita

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

¡Lo primero que noté con las fuentes óptimas es que son considerablemente más pequeñas que las variantes básicas ~ 260 KB!

Regular

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

Negrita

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

Esta herramienta puede hacer mucho más que hacer malabares con las fuentes para la web. Puede convertir varios formatos entre sí; como Opentype, True Type, fuentes web, post script, etc. El resultado es, en general, una calidad muy alta; los archivos son tan grandes, casi el doble del tamaño de las versiones básicas de FontSquirrels y más de 7 veces más grandes que la versión óptima de FontSquirrels.

Regular

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

Negrita

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

Me desconcertó un poco al principio que el orden real en la lista de fuentes era importante. Luego descubrí que algunos toman el primer formato que encuentra compatible en lugar de seguir con el formato óptimo, y apesta. Después de algunos trabajos, descubrí que esta es la forma óptima de formatear tu css (tenga en cuenta el orden de los tipos de archivo |¡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;
}

Los resultados de mi pruebaFuentes regulares

Marqué la mejor versión con un *

Firefox MAC (15.0.1)

FontSquirrel Optimal: se vuelve un poco gordoFontSquirrel Basic: se vuelve un poco gordoFontXChange 4.0: se vuelve un poco gordo, pero el kerning es mejor que la versión de FontSquirrel *

Windows Firefox (15.0.1)

FontSquirrel Optimal: Renders muy agradableFontSquirrel Basic: la fuente se ve irregular / entrecortadaFontXChange 4.0: Renders muy agradable *

Safari Mac (6.0)

FontSquirrel Optimal: Perfect renderFontSquirrel Basic: render perfectoFontXChange 4.0: render perfecto *

Chrome Mac (21.0)

FontSquirrel Optimal: Un poco gordoFontSquirrel Basic: Un poco gordoFontXChange 4.0: render perfecto *

Windows Chrome (21.0)

FontSquirrel Optimal: Perfect renderFontSquirrel Basic: render perfectoFontXChange 4.0: render perfecto *

Internet Explorer (9.0)

FontSquirrel Optimal: render perfecto *FontSquirrel Basic: render perfectoFontXChange 4.0: La fuente se ve irregular / entrecortadaFuentes en negrita

Firefox MAC (15.0.1)

FontSquirrel Optimal: rinde muy gordo *FontSquirrel Basic: Renders muy gordo.FontXChange 4.0: rinde muy gordo, pero mejor kerning(Me gustaría seleccionar este para Mac, pero como la versión para Windows de Firefox no es compatible aquí, debe irse)

Windows Firefox (15.0.1)

FontSquirrel Optimal: Renders ok, no muy suavizado *FontSquirrel Basic: la fuente se ve irregular / entrecortadaFontXChange 4.0: la fuente se distorsiona un poco / se daña

Safari Mac (6.0)

FontSquirrel Optimal: render perfecto *FontSquirrel Basic: render perfectoFontXChange 4.0: Renders fat

Chrome Mac (21.0)

FontSquirrel Optimal: render perfecto *FontSquirrel Basic: buen rendimiento, un poco por ciento a la grasaFontXChange 4.0: Renders fat

Windows Chrome (21.0)

FontSquirrel Optimal: render perfecto *FontSquirrel Basic: render perfectoFontXChange 4.0: Renders muy gordo

Internet Explorer (9.0)

FontSquirrel Optimal: render perfecto *FontSquirrel Basic: render perfectoFontXChange 4.0: La fuente se ve irregular / entrecortadaLa implementacion final

Normalmente organizo mis fuentes web en el siguiente patrón, <webfonts> / <fuente de conversión> / <método de conversión> / <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;
}

Descripción gráfica del resultado (tamaño completo enhttp://i.stack.imgur.com/atb98.png)

Conclusiones y búsquedas.

No hay una sola herramienta por ahí que proporcione fuentes que se vean bien en Mac y Windows en todos los navegadores. Debes experimentar y probar en cada fuente. La metodología publicada anteriormente es solo una forma sencilla y una sugerencia sobre cómo probar y experimentar con @ font-face.

¿Hay algo que piense que podría cambiar en mis métodos o en mi implementación? ¿Hay alguna aplicación o servicio que haya perdido?

Todo lo mejor / T