Home » CSS »Flex » Currently Reading:

Personalizar la tipografía en componentes Flex

diciembre 30, 2008 CSS, Flex No Comments
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.

  1. &lt;mx:Style&gt;
  2. @font-face
  3. {
  4. src: url("fonts/hooge06_55.swf");
  5. fontFamily: "hooge 06_55";
  6. }
  7. &lt;/mx:Style&gt;

Ahora crearemos un estilo que asigne esta tipografía.

  1. &lt;mx:Style&gt;
  2. @font-face
  3. {
  4. src: url("fonts/hooge06_55.swf");
  5. fontFamily: "hooge 06_55";
  6. }
  7. .hoogeFont
  8. {
  9. fontFamily: "hooge 06_55";
  10. fontSize: 16;
  11. }
  12. &lt;/mx:Style&gt;

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

  1. &lt;mx:Button label="Button" horizontalCenter="0" verticalCenter="0"/&gt;

Ahora le asignaremos el estilo CSS

  1. &lt;mx:Button label="Button" horizontalCenter="0" verticalCenter="0" styleName="hoogeFont"/&gt;

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

Compártelo:

Personalizar la tipografía en componentes Flex
Visto 4.420 veces

Comment on this Article:








Twitter: zguillez

AdvertisementAdvertisementAdvertisementAdvertisement

Recibe las novedades por email

Post destacado

Adobe Creative Meet Up, 25 octubre

28 sep 2015

Tipografía, dibujo, composición y participación serán las claves del próximo Creative Meetup en Madrid dentro del marco del Brief Festival. Únete en vivo u online para inspirarte, experimentar, aprender nuevas técnicas de la mano de grandes artistas y conocer su flujo de trabajo, ver en primicia las novedades de Adobe MAX y, sobre todo, participar y exponer tu creatividad en la multitud de actividades que te proponemos antes y durante el meetup. Si lo tuyo es la tipografía y el dibujo, haz hueco en tu mochila para tu tablet y tu ipad pues Puño y Clara Montagut prometen hacer temblar …



Map

Ranking

Codigoactionscript.org: 4.65 sobre 5 (106 valoraciones)

twitter-widget.com