Desde los problemas provocados por el uso de Cufon, me aventuré a dejar de usar recursos de fuentes externos, pero últimamente, he estado buscando métodos alternativos para cargar fuentes para ver si hay una mejor manera; mejores métodos tienen una forma de aparecer de la nada.
Hay muchos métodos nuevos por ahí, y parece que hay variaciones para cada método; ¿Debería usar typekit ? o google webfonts (con js o css)? ¿Debo seguir usando fuentes de carga local (por ejemplo, método generado por fontsquirrel.com)?
A continuación, enumeraré los métodos que parecen ser los más bien recibidos, con algunas pruebas, pero ¿realmente vale la pena pasar a una fuente web? Parece que llevaría una mayor carga de recursos (solicitudes http) y tendría menos tipos de formato de archivo (menos compatibilidad), etc. Pero parece que los archivos se cargan de forma asincrónica y eficiente en la mayoría de los casos.
- ¿Es solo una cuestión de situación y necesidad? Si es así, ¿Que son?
- ¿Existen diferencias drásticas entre estos métodos?
- ¿Existe un método mejor que no haya enumerado?
- ¿Cuáles son los pros y los contras del rendimiento? ¿Mira? dependencias? compatibilidades?
Realmente estoy buscando las mejores prácticas aquí, el rendimiento es una gran cosa, pero también lo es la escalabilidad y la facilidad de uso. Sin mencionar el aspecto y la sensación.
CSS de Google
- solo usa hoja de estilo externa
- solo usa el tipo de archivo compatible más pequeño
- puede usar
@importo<link>tomar el contenido de styleshee (@font-face) y ponerlo directamente en su propia hoja de estilo.
resultados de la prueba
78ms load of html 36ms load of css
Método JS de Google
- utiliza
webfont.jspara cargar styleshet - solo usa el tipo de archivo compatible más pequeño
- agrega
:rootelemento con clase - agrega guión a la cabeza.
resultados de la prueba
171ms load of html 176ms load of js 32ms load of css
Método Typekit
- agrega el
:rootelemento con la clase. - puede usar un
*.jsfragmento o un archivo de*.jsarchivo cargado externamente - utiliza en
data:font/opentypelugar de archivo de fuente. - agrega guión a la cabeza
- agrega CSS incrustado a la cabeza
agrega una hoja de estilo externa al encabezado
puede agregar / eliminar / ajustar fácilmente fuentes y selectores de destino de typekit.com
resultados de la prueba
169ms load of html 213ms load of js 31ms load of css 3ms load of data:font/
… Y el método Font Squirrel
@font-face{
font-weight:400;
font-style:normal;
font-family:open_sanslight;
src:url(../font/opensans-light-webfont.eot);
src:url(../font/opensans-light-webfont.eot?#iefix) format(embedded-opentype),
url(../font/opensans-light-webfont.woff) format(woff),
url(../font/opensans-light-webfont.ttf) format(truetype),
url(../font/opensans-light-webfont.svg#open_sanslight) format(svg)
}... o con datos: método de fuente ...
@font-face {
font-family: 'open_sanslight';
src: url('opensans-light-webfont-f.eot');
}
@font-face {
font-family: 'open_sanslight';
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF4sABMAAAAArXQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcZLn0KkqwK44Jq866WBSpzpsNY2IyGAhoJFBbYjuxmyns5sNa4NwldcJ7eh3Uy5gQkURIlqWzONe3HcLsDX1x/+jifDXvbzgTBjopZElndil3hJkERJkmRJkVRJk3TJkEzJkmzOc4HLXOEOF7nEX/*thisisnotafullencodingjustanexample*/bZwUnK4yS3JlTx2Sr4USKEUSbHVX9fcGNBs4fqgw+GoNHU7lKr36Eqn0lCWt6pHFpWaUlc6lS6loSxRlirLlP/uuU01dVfT7L6gPxyqraluCpgj3WtqeC1V4VBDW2N4K1r1esw/IupKp9L1FwlqnuIAAAB42j3NvQ7BUBjG8R5tTz/0u2UjNTTESYQbMGmXLiISbeI6zBYjbuWtye7CeMJxtuf3LP8ne1+IXbWa7G3TMXZru4qLZkJRW1O2wzi3I+Li2Gik5yXpYkNGXj70YU98YQLGHxwwXxIWwO8SNmAdJBzAXku4gFNI9AF38QMjTwZ9vN6yJzq9OoEB6I8VQzDYK0ZguFKMwWiumIDxTDEFk6liBqaF4gDMFFvKxAfOxFUGAAABUxSL9gAA) format('woff'),
url('opensans-light-webfont-f.ttf') format('truetype'),
url('opensans-light-webfont-f.svg#open_sanslight') format('svg');
font-weight: normal;
font-style: normal;
}<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet'>
Georgian. Estoy usando el método font-squirrel y también me gustaría ver una gran respuesta a esta pregunta.
@font-facedeclaraciones a prueba de balas , tal vez pueda encontrar información útil. paulirish.com/2009/bulletproof-font-face-implementation-syntax