Personalizar la tipografía en componentes Flex

En este tip mostraré como incrustar tipografías dentro de nuestras aplicaciones Flex para poder utilizarlas en campos de textos o en componentes.

Lo primero que tendremos que hacer es crear un documento Flash que es el que "guardará" la tipografía.

Dentro de este documento vació de Flash pulsaremos con el botón derecho del mouse, y en el menú desplegable seleccionaremos "New Font...".

Esto nos abrirá un panel donde seleccionaremos la tipografía que queramos incrustar y le daremos un nombre.



Ahora nos aparecerá un nuevo símbolo en la librería. Deberemos darle opciones de Linkage. Daremos click derecho y en el panel seleccionaremos "Exportar para Actionscript".



Una vez hecho esto publicaremos la película Flash.

Ahora iremos a la parte de Flex:

En el documento de Flex deberemos referenciar el archivo SWF que contiene la tipografía. Esto lo haremos dentro del tag <mx:Style>. Utilizaremos @font-face para hacer un embed del archivo SWF y con fontFamily indicaremos el nombre de la tipografía que queremos incrustar.

Código :

<mx:Style>
   @font-face
   {
      src: url("fonts/hooge06_55.swf");
      fontFamily: "hooge 06_55";
   }
</mx:Style>

Ahora crearemos un estilo que asigne esta tipografía.

Código :

<mx:Style>
   @font-face
   {
      src: url("fonts/hooge06_55.swf");
      fontFamily: "hooge 06_55";
   }
   .hoogeFont
   {
            fontFamily: "hooge 06_55";
            fontSize: 16;
   }
</mx:Style>

En el lienzo del documento Flex añadiremos, por ejemplo, un botón.

Código :

<mx:Button label="Button" horizontalCenter="0" verticalCenter="0"/>

Ahora le asignaremos el estilo CSS

Código :

<mx:Button label="Button" horizontalCenter="0" verticalCenter="0" styleName="hoogeFont"/>

Y listo! ya tenemos nuestro componente con la tipografía que queramos.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.