por Ivan da Silveira

Incorporando fontes em projetos Flex com CSS

No arquivo css deve ser defino as fontes a serem incorporadas como no exemplo abaixo.
src = caminho do arquivo da fonte a ser incorporada
fontFamily = nome escolhido para fazer uso da fonte
embedAsCFF = Para componentes baseados no Spark usa-se “true” e para componentes MX usa-se “false”. Isso por que o Spark usa FTE(Flash Text Engine) e possui recursos para formatação avançada de texto enquanto que o MX não possui estes recursos.

Ex:

/* CSS file fonts.css */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

@font-face {
	src: url("../fonts/daniel.ttf");
	fontFamily: DanielRegular;
	embedAsCFF: true;
}

@font-face {
	src: url("../fonts/danielbd.ttf");
	fontFamily: DanielBold;
	embedAsCFF: true;
}

@font-face {
	src: url("../fonts/daniel.ttf");
	fontFamily: DanielRegularNoCFF;
	embedAsCFF: false;
}

@font-face {
	src: url("../fonts/danielbd.ttf");
	fontFamily: DanielBoldNoCFF;
	embedAsCFF: false;
}

Após ter o arquivo css com a configuração das fontes a serem incorporadas podemos inclui-lo na aplicação onde será usado com a seguinte linha de código.

<fx:Style source="assets/css/fonts.css" />

Com o arquivo já incluído na aplicação podemos fazer uso das fontes incorporadas:
Obs: Veja que as fontes com “embedAsCFF=true” funcionaram apenas nos componentes Spark.
 

<s:Label x="30" y="33" text="Spark Label Regular Font" fontFamily="DanielRegular"/>
	<mx:Label x="206" y="34" text="MX Label Regular Font" fontFamily="DanielRegularNoCFF"/>
	<s:Label x="30" y="70" text="Spark Label Bold Font" fontFamily="DanielBold"/>
	<mx:Label x="206" y="72" text="Mx Label Bold Font" fontFamily="DanielBoldNoCFF"/>
	<s:TextArea x="171" y="139" height="151" editable="true" fontFamily="DanielRegular"
				text="Spark TextArea"/>
	<mx:TextArea x="402" y="139" width="188" height="151" text="MX TextArea" fontFamily="DanielRegularNoCFF"/>
	<s:TextInput x="10" y="139" fontFamily="DanielRegular" text="Spark TextInput"/>
	<s:TextInput x="10" y="175" fontFamily="DanielBold" text="Spark TextInput"/>
	<mx:TextInput x="10" y="211" width="128" text="MX TextInput" fontFamily="DanielRegularNoCFF"/>
	<mx:TextInput x="10" y="245" width="128" text="MX TextInput" fontFamily="DanielBoldNoCFF"/>
	<s:Button x="382" y="10" label="Spark Button" fontFamily="DanielRegular"/>
	<s:Button x="382" y="40" label="Spark Button Bold" fontFamily="DanielBold"/>
	<mx:Button x="382" y="70" label="MX Button" fontFamily="DanielRegularNoCFF"/>
	<mx:Button x="382" y="102" label="MX Button Bold" fontFamily="DanielBoldNoCFF"/>

 

Comentários

Carregando comentários

Postar um novo comentário



Processando...