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.

También te interesa

• Personalizar componentes de Flex con estilos programáticos
• Personalizar botones de aplicaciones Flex con Actionscript
• Personalizar diseño del componente Alert de Flex con CSS

flash css flex tipografia

Deja un comentario

IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.

Nombre

Comentario