Carga asincrónica de tipografías [JavaScript]

por .

Font.js es un interesante proyecto de Mike Kamermans, en el que intenta tratar a las tipografías de manera muy similar a las imágenes, es decir, en forma de objetos. Este pequeño, pero importante cambio, nos permite realizar carga asincrónica de los  archivos tipográficas, algo que en pocas palabras se traduce en: cargar nuestras tipografías según sea necesario o no.

Carga asincronica de tipografias

Font.js cuenta con una potente API, aceptando distintas y diversas formas de configuración. Algo interesante es que este pequeño toolkit JavaScript realiza la carga asincrónica de las tipografías mediante llamadas AJAXs. Una vez descargados los archivos con las tipografías, las mismas pueden ser empleadas sin ningún inconveniente utilizando la propiedad CSS @font-face.

Ejemplo de uso de Font.js

var font = new Font();
font.onload = function() {
    // measure some text
    console.log(font.measureText("some text", 14));

    // style an element
    document.querySelector("p").style.fontFamily = "'" + font.fontFamily + "'";
}

font.onerror = function(e) {
   alert(e);
}

// kick off the actual loading
font.fontFamily = "My Font";
font.src = "acmesa.ttf";

Pueden ver una demostración en linea de Font.js directamente desde la pagina del proyecto. En la misma van a encontrar mucha información sobre como utilizar este pequeño toolkit.

Web: Font.js

Categorizado en: