Embeber fuentes en Adobe Flex. @font-family y unicodeRange

Embeber objetos externos a nuestra aplicación y que no resulte un lastre pesado en la compilación final, definitivamente es un tema delicado y que se ha de tratar minuciosamente.
Esta idéa y definición ha sido la que me ha llevado a escribir este post, y aprovechando este tema quiero haceros llegar un método que sin duda puede aportaros un resultado significante en vuestros desarrollos.

Quien ha iniciado alguna vez un desarrollo de una aplicación RIA basada en Adobe Flex, a la hora de realizar el boceto o la implementación siempre o casi siempre ha tenido el cuidado y la delicadeza de utilizar fuentes (typografías) globales y que todos los equipos contaran con ella, es el caso de nuestra querida Arial, Verdana…
Pues bien, no siempre estas fuentes nos han sido de gran aporte en los diseños, si no que en su defecto necesitamos incluir otro tipo distinto y más novedoso acorde con el motivo de la aplicación. Ahora bien, ¿ qué pasa cuando hacemos una inclusión en nuestra aplicación de este nuevo tipado de fuente?, el peso final del compilado aumenta considerablemente..

Para este problema ví hace tiempo, curioseando y navegando en la red, que únicamente embebiendo las fuentes que vas a utilizar en tu aplicación ahorras una cantidad de espacio para tu aplicación. Para ello tenemos que hacer uso del parámetro unicodeRange, a la hora de definir nuestra fuente embebida dentro de la hoja de estilos CSS en la aplicación, un ejemplo sencillo puede quedar tal que así:

@font-family{

src: url(“assets/font/Arial.ttf”);

fontFamily: ArialFont;

fontWeight: normal;

unicodeRange: U+0021-U+007B, U+00C0-U+00FF,U+00BA;

}

Para que sirva de ayuda y referencia podéis ver la tabla de rangos unicode en el siguiente link: Tabla Unicode, de esta forma podéis coger aquellos grupos de caracteres que necesitéis utilizar en vuestra aplicación. Y por ultimo compilad el Bin-release y mirad el peso del fichero resultante.. Sorpresa!..

Un saludo y espero os sea de gran ayuda.

Tags: , ,

4 comentarios

Deja un comentario