Personalizar la tipografía en componentes Flex
Aquí 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.
- <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.
- <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.
- <mx:Button label="Button" horizontalCenter="0" verticalCenter="0"/>
Ahora le asignaremos el estilo CSS
- <mx:Button label="Button" horizontalCenter="0" verticalCenter="0" styleName="hoogeFont"/>
Y listo! ya tenemos nuestro componente con la tipografía que queramos.
Compártelo:
Post relacinonados:
- Personalizar componentes de Flex con estilos programáticos
- Cómo personalizar los iconos en componentes Tree de Flex
- Personalizar botones de aplicaciones Flex con Actionscript
- Cómo personalizar el icono del panel de Alerta de Flex
- Modificar datos en componentes Flex con ItemEditors
