subscripción
Joan Llenas at garnet.io :: Thoughts on software development
Runtime fonts
Febrero 16th, 2011 - [Enlace local]
Cargar fuentes bajo demanda es algo que puede ayudar mucho a disminuir el tamaño de un archivo swf, sobretodo cuando estamos creando una aplicación que requiere de varios tipos de fuentes y con rangos Unicode ámplios.
Es el caso por ejemplo de aplicaciones que requieren globalizarse (g11n) y a causa de ello se deben proporcionar tipografías de varios alfabetos.
La cosa se pone peor si además utilizamos más de una tipografía en la aplicación, cosa muy normal en realidad.
Flex nos proporciona una forma muy sencilla de crear archivos SWF con tipografías compiladas. Son lo que se llaman CSS Modules.
Los CSS Modules son archivos CSS a los que se les pasa el compilador. Algo tan sencillo como esto mxmlc estilos.css. O si no te gusta la línea de comandos, desde Flex builder simplemente haciendo click derecho sobre el archivo CSS verás que puedes marcar la opción Compile CSS to SWF.
Cuando compiles revisa la carpeta de salida (bin-debug) y verás que hay un archivo swf con el nombre del CSS que has marcado como compilable.
Una vez tenemos compilado el CSS solo nos queda realizar la carga e inyectarla en el motor de estilos de Flex. Para ello utilizaremos el método especialmente creado a este respecto: loadStyleDeclarations2() de la instancia del StyleManager que tenemos disponible desde cualquier control Flex.
Este método devuelve un IEventDispatcher que podemos utilizar para controlar el proceso de carga con los eventos: StyleEvent.COMPLETE, StyleEvent.ERROR y StyleEvent.PROGRESS.
Dejo un ejemplo sencillo que carga fuentes a través de la selección en un DropDownList.
RuntimeFonts.mxml
-
"1.0" encoding="utf-8"?>
-
-
xmlns:s="library://ns.adobe.com/flex/spark"
-
xmlns:mx="library://ns.adobe.com/flex/mx">
-
-
[CDATA[
-
import mx.events.StyleEvent;
-
protected function dropdownlist1_changeHandler():void
-
{
-
fonts.enabled = false;
-
var dispatcher:IEventDispatcher = styleManager.loadStyleDeclarations2( fonts.selectedItem.url );
-
dispatcher.addEventListener(StyleEvent.COMPLETE, onComplete);
-
}
-
private function onComplete(event:StyleEvent):void
-
{
-
sample.setStyle("fontFamily", fonts.selectedItem.label);
-
fonts.enabled = true;
-
}
-
-
]]>
-
>
-
-
verticalCenter="0" horizontalAlign="center">
-
-
-
width="200"
-
selectedIndex="-1">
-
-
-
url="fonts/Kingthings_Stirrup.swf"/>
-
-
url="fonts/Circljo.swf"/>
-
>
-
>
-
>
-
>
Kingthings_Stirrup.css
-
/* http://www.abstractfonts.com/font/14632 */
-
@font-face {
-
src: url("Kingthings_Stirrup.ttf");
-
embedAsCFF: true;
-
fontFamily: "Kingthings Stirrup";
-
fontStyle: normal;
-
fontWeight: normal;
-
}
Descarga ejemplo
En el zip hay un proyecto Flex4 para Flash Builder.