fontfaceonload
Version 0.1.7
web-font-loading-recipes para ejemplos.
Use con cualquier declaración existente @font-face .
@font-face {
font-family : My Custom Font Family;
/* src and other properties as normal */
}Incluir la biblioteca. Llame al JavaScript.
FontFaceOnload ( "My Custom Font Family" , {
success : function ( ) { } ,
error : function ( ) { } ,
timeout : 5000 // in ms. Optional, default is 10 seconds
} ) ; Para permitir que la fuente alternativa sea visible mientras se carga la @font-face está cargando, simplemente use FontFaceOnload así:
FontFaceOnload ( "My Custom Font Family" , {
success : function ( ) {
document . documentElement . className += " my-custom-font-family" ;
}
} ) ;y luego use la clase para alcanzar su uso de la fuente personalizada:
body {
font-family : sans-serif;
}
. my-custom-font-family body {
font-family : My Custom Font Family , sans-serif;
} Un enfoque alternativo que también eliminará el FOIT y no requerirá que cambie su CSS es usar la biblioteca loadCSS para cargar la @font-face con un bloque de origen de URI de datos dinámicamente. loadCSS es más pequeño que fontfaceonload . Las limitaciones de este enfoque incluyen exigirle que administre qué formato cargar (Woff, Woff2, TTF) y no funcionará tan bien con las fuentes de iconos (ya que necesita una clase CSS para diseñar otros elementos de hermanos, como el texto descriptivo).
Para ocultar la fuente alternativa para que los personajes extraños extraños no sean visibles mientras se carga la fuente del icono, use FontfaceOnload con la opción glyphs de así decirlo:
FontFaceOnload ( "My Custom Font Icon" , {
success : function ( ) {
document . documentElement . className += " my-custom-font-icon" ;
} ,
glyphs : "uE600uE601uE602uE605" // Optional, default is "". Useful for icon fonts: a few code points from your custom font icon.
} ) ;y luego use la clase para alcanzar su uso de la fuente personalizada:
. icon {
display : none;
}
. my-custom-font-family . icon {
display : inline-block;
font-family : My Custom Font Icon , sans-serif;
}Esto utiliza el módulo de carga de fuente CSS cuando está disponible (actualmente en Chrome 35+ y Opera 22+). Cuando eso no está disponible, utiliza un enfoque muy similar al utilizado en el cargador de fuentes web Typekit (que actualmente es de 7.1kb GZIP).
Básicamente, crea un elemento con una pila de fuentes que incluye la fuente web y un tipo de letra serif/sans-serif predeterminado. Luego usa una cadena de prueba y mide las dimensiones del elemento a un cierto intervalo. Cuando las dimensiones son diferentes a las fuentes alternativas predeterminadas, se considera que la fuente se ha cargado con éxito.
Si desea un polyfill completo para el módulo de carga de fuentes CSS, siga junto con el cargador de fuentes de Bram Stein. Creo que la especificación ha cambiado desde que lanzó este polyfill, pero está trabajando en una versión actualizada.
Ejecute estos comandos:
npm installbower installgrunt initgrunt como normal. En lugar de un gigante Gruntfile.js , este proyecto está utilizando una configuración de Grunt modular. Cada tecla de opción de configuración de gruñidos individuales tiene su propio archivo ubicado en grunt/config-lib/ (Configuraciones de Readonly Upstream, no modifique estos directamente) o grunt/config/ (Configuraciones específicas del proyecto). Puede usar la misma clave en ambos directorios, los objetos se combinan de manera inteligente utilizando la fusión de Lo-Dash.
Para la concatenación en la configuración anterior de Gruntfile, agregaría otra clave al objeto gigante que se pasa en grunt.initConfig así: grunt.initConfig({ concat: { /* YOUR CONFIG */ } }); . En la nueva configuración, creará un grunt/config/concat.js con module.exports = { /* YOUR CONFIG */ }; .
Licencia de MIT
