Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

23mai/087

Flex Embed Fonts – Polices Embarquées à la compilation

Même s'il y a plusieurs cas d'utilisation pour les system fonts et device fonts, les polices le plus fréquemment dans les application Flex sont les polices Embarquées (embedFonts). Les polices de texte embedded sont en fait les contours de police compilés avec le .swf, garantissant que tous les utilisateurs auront le même rendu. L'inconvénient avec les polices embedded est qu'elles peuvent augmenter la taille du fichier .swf. Cependant, puisqu'on considère que les applis Flex sont des RIA (Rich Internet Applications), cette augmentation de taille ne sera pas forcement un problème. Dans certains cas, l'augmentation de la taille peut être réduite en embarquant uniquement le contour des polices dont on à besoin pour l'application en question.

Il y a d'autres raisons pour lesquelles on utilise les embed fonts, les polices embarquées résolvent plusieurs problèmes rencontrés avec les polices système.

Tout d'abord, les System fonts dans des applications Flex ne peuvent pas subir de rotation ou d'ajustement de l'opacité. Si vous essayer de tourner une police système, le texte disparaitra. Si vous tentez de jouer avec l'alpha, cela n'aura aucun effet. Cependant, si vous embarquez la police, vous pouvez effectuer ces deux opérations. De plus, les polices système ne sont pas anti-aliasées, quand vous augmentez la taille de ces polices, le crénelage se voit de plus en plus. Les polices embarquées sont anti-aliasées, ce qui veut dire qu'elles rendront mieux pour un texte de grande taille.

Embarquer une police avec le tag Embed

Il existe de nombreuses manières d'embarquer des fonts. Tout d'abord, nous verrons comment embarquer une police dont vous avez le fichier (.ttf). Vous pouvez embarquer ces polices en utilisant le tag metadata Embed en ActionScript. Pour embarquer une police de cette manière, utilisez l'attribut "source" pour spécifier le chemin vers le fichier .tff et l'attribut "fontName" pour spécifier le nom de la font car vous voudrez la référencer pour votre application. Pour utiliser le metadata tag correctement, vous devez le placer juste avant la déclaration d'un variable de type Class. Vous n'aurez pas besoin d'utiliser cette variable mais le compilateur en a besoin.

Voici un exemple qui embarque une police appelée Century Gothic depuis un fichier .tff et en fontName, "gothicCentury":

[Embed(source="C:\\Windows\\Fonts\\GOTHIC.ttf", fontName="gothicCentury")]
private var _centuryGothic:Class;

Une fois que vous avez embarqué la police, vous pouvez utiliser la valeur de fontName pour la référencer comme vous le feriez pour n'importe quelle police:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	>
	<mx:Style>
		global {
			fontFamily: gothicCentury;
		}
	</mx:Style>
	<mx:Script>
		<![CDATA[
			[Embed(source="C:\\Windows\\Fonts\\GOTHIC.ttf", fontName="gothicCentury")]
			private var _centuryGothic:Class;
		]]>
	</mx:Script>
	<mx:TextArea text="Texte de démonstration"/>
</mx:Application>

Quand vous embarquez une police, seulement un type de contour est embarqué. Dans l'exemple précédent, seuls les contours standards sont embarqués, pas la bold, ni l'italique.

Vous pouvez facilement voir cet effet en ajoutant un bouton à l'application de l'exemple précédent. Comme les boutons utilisent la version en gras par défaut, vous verrez que c'est la police par défaut qui est utilisée. Pour y remédier, vous devez aussi embarquer la police bold de cette police en utilisant la même valeur de fontName. Cependant, cette fois, nous devons fixer le fontWeight à bold comme dans l'exemple suivant:

 <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	>
	<mx:Style>
		global {
			fontFamily: gothicCentury;
		}
	</mx:Style>
	<mx:Script>
		<![CDATA[
			[Embed(source="C:\\Windows\\Fonts\\GOTHIC.ttf", fontName="gothicCentury")]
			private var _centuryGothic:Class;

			[Embed(source="C:\\Windows\\Fonts\\GOTHICB.ttf", fontName="gothicCentury", fontWeight="bold")]
			private var _centuryGothicBold:Class;
		]]>
	</mx:Script>
	<mx:TextArea text="Texte de démonstration"/>
	<mx:Button label="Exemple"/>
</mx:Application>

Embed une police en CSS pour Flex

Vous pouvez aussi embed une font en CSS en utilisant la directive @font-face. C'est particulièrement pratique si vous utilisez des feuilles de style externes car vous pouvez les compiler pour les utiliser ensuite comme des thèmes ou comme des CSS chargés à la volée. Cependant, il est aussi bon d'utiliser cette technique pour des définitions de style locales simplement car vous préferrez la syntaxe avec le tag metadata Embed.

La directive @font-face permet d'avoir les mêmes attributs/propriétés que le tag Embed quand on embarque des polices. Les différences se font dans le fait que l'attribut "source" du tag est ici appelé src et que fontName est appelé fontFamily. La valeur de src doit aussi être comprise dans un url() comme dans l'exemple suivant:

@font-face{
	src: url("C:\\Windows\\Fonts\\GOTHIC.ttf");
	fontFamily: gothicCentury;
}

Voici l'exemple précédent (avec les polices en gras), réécrit avec les directives @font-face:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	>
	<mx:Style>
		@font-face{
			src: url("C:\\Windows\\Fonts\\GOTHIC.ttf");
			fontFamily: gothicCentury;
		}
		@font-face{
			src: url("C:\\Windows\\Fonts\\GOTHICB.ttf");
			fontFamily: gothicCentury;
			fontWeight: bold;
		}
		global {
			fontFamily: gothicCentury;
		}
	</mx:Style>
	<mx:TextArea text="Texte de démonstration"/>
	<mx:Button label="Exemple"/>
</mx:Application>

Embarquer une police par son nom système

Flex propose d'embarquer de polices de multiples manières. Plutôt que d'embarquer la police grâce au nom du fichier .tff, vous pouvez utiliser le nom de la police, s'il est reconnu par l'ordinateur. Quand vous voulez faire ça, vous pouvez utiliser le tag Embed. Plutôt que de préciser un attribut "source", vous devez utiliser "systemFont" et spécifier le nom de la police tel qu'il est connu par le système. De plus, vous devez spécifier un type MIME en utilisant l'attribut mimeType. La valeur peut être soir application/x-font ou application/x-font-truetype.

Le code suivant utilise les noms système pour embarquer les polices:

[Embed(systemFont="Century Gothic", fontName="gothicCentury", mimeType="application/x-font")]
private var _centuryGothic:Class;

[Embed(systemFont="Century Gothic", fontName="gothicCentury", mimeType="application/x-font", fontWeight="bold")]
private var _centuryGothicBold:Class;

Vous pouvez aussi le faire en utilisant les CSS. Utilisez seulement local() au lieu de url():

@font-face{
	src: local("Century Gothic");
	fontFamily: gothicCentury;
}
@font-face{
	src: local("Century Gothic");
	fontFamily: gothicCentury;
	fontWeight: bold;
}
Remplis sous: ActionScript, CSS, Exemple, Fonts || Taggé comme: , , , , , , , Laisser un commentaire

Articles similaires

Commentaires (7) Trackbacks (1)
  1. franck
    22 octobre 2008

    Bonjour,

    Merci pour ce site bien fait !

    En suivant votre tuto, j'ai réussi sans trop de difficulté a intégrer la Bauer Bodoni dans mon application Flex.
    Seul souci que je n'arrive pas à résoudre est le non affichage des caractères accentués…

    Cette police contient bien des accents.

    Avez vous déjà rencontré ce type de problème ? et si oui avez vous pu le résoudre ?

    merci
    Franck

  2. fnicollet
    22 octobre 2008

    Salut,
    alors je n'ai pas la solution, mais je peux peut-être te donner des pistes.
    Tout d'abord, tu peux essayer de convertir ton fichier TTF en SWF. Pour cela, tu peux voir la manipulation dans cet article:
    http://www.flex-tutorial.fr/2008/06/19/flash-font-convertir-un-fichier-ttf-en-swf-convert-ttf-to-swf/
    Comme cela, tu peux choisir quel types de caractères intégrer dans ton SWF.

    Sinon, si par exemple tu utilises la police en gras (si tu écrit le label d'un Button, il est en gras automatiquement), regarde si la police contient bien les accents dans sa version Bold et s'ils sont bien intégrés.

    Si tu trouves la solution à ton problème, n'hésite pas à la poster en commentaire de cet article ;)

    Bonne chance
    Fabien

  3. gg
    25 juin 2009

    Je tiens aussi à préciser une chose.

    Si vous voulez ajouter une police perso à votre RTE en embed via le css (ou autre), il vous faudra OBLIGATOIREMENT faire en sorte que la police système Verdana soit aussi Embed via le css (ou autre).
    exemple:

    @font-face{
    src: local("Verdana");
    fontFamily: Verdana;
    }

    @font-face {
    src: url("../../polices/Champagne_Limousines.ttf");
    fontFamily: ChampagneLimousines;
    }

    Sans le 1er bloc @font-face qui defini Verdana comme embed notre police n'aurait pas pu s'afficher dans notre RTE !

  4. pierre
    30 juin 2010

    Bonjour et encore merci pour tous ces tutos...
    Peut être pourriez vous m'aider, j'ai un souci de "flou" sur l'affichage de la police quand je l'embarque. Je m'explique
    Si j'utilise de l'arial (police qui est déja intégrée) de façon classique, l'affichage de mon texte est nickel et sans "bavure".
    Exemple de code :

    COPIER-COLLER
    Actionscript:
    1. global {
    2.             fontFamily: arial;
    3.             fontSize:12;
    4.         }

    Par contre, si ce coup ci j'embarque ma police arial, le texte affiché est flou et imprécis,

    COPIER-COLLER
    Actionscript:
    1. @font-face{
    2.             src: url("C:\\Windows\\Fonts\\ARIAL.TTF");
    3.             fontFamily: embarque;
    4.             fontWeight:normal;           
    5.         }
    6.         global {
    7.             fontFamily: embarque;
    8.             fontSize:12;
    9.         }

    J'ai regardé un peu les notion de "antiAlias" , mais j'ai beau changer des valeurs, rien ne change.
    Vous auriez une piste ?
    Merci

  5. fnicollet
    30 juin 2010

    Salut,
    Effectivement, dans la doc:
    http://livedocs.adobe.com/flex/3/html/help.html?content=Working_with_Text_17.html#153173
    Il est dit:
    "Embedded font characters are anti-aliased, making their edges appear smoother, especially for larger text"
    Je ne vois pas de solution pour l'instant

    Fabien

  6. pierre
    1 juillet 2010

    Salut.
    On est effectivement bien coincé. la seule solution qui va pas trop mal est de jouer avec les paramètres css :
    exemple :

    COPIER-COLLER
    Actionscript:
    1. fontFamily: "calibri";
    2.     fontSize: 12;
    3.     advancedAntiAliasing: true ;
    4.     fontAntiAliasType: "advanced";
    5.     fontThickness: 50;
    6.     fontGridFitType: "pixel";
    7.     fontSharpness: 100;

    ceci dit, c'est moyennement marrant de tester les valeurs pour voir ce qui va le mieux !

    Merci

  7. pierre
    8 juillet 2010

    un complement au post fait précédemment, vu que je viens de m'arracher les cheveux :
    si le texte est affiché avec une propriété textAlign =right, l'affichage de la police embarquée n'est pas du tout le même (encore plus flou) que si on a un align à left.
    Plus la police est petite, plus cela est flagrant.

    J'ai récupéré un mxml sur le net (cf debut du code) et je l'ai un peu adapté pour pouvoir faire mumuse avec les alignements, et c'est flagrant

    COPIER-COLLER
    MXML:
    2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    3.  
    4.         backgroundColor="white">
    5.  
    6.     <mx:Style>
    7.         @font-face {
    8.             src: local("calibri");
    9.             fontFamily: "calibriE";
    10.         }
    11.        
    12.         @font-face {
    13.             src: local("arial");
    14.             fontFamily: "arialE";
    15.         }
    16.        
    17.         @font-face {
    18.             src: local("tahoma");
    19.             fontFamily: "tahomaE";
    20.         }
    21.     </mx:Style>
    22.  
    23.     <mx:Array id="antiAliasTypes">
    24.         <mx:Object label="normal" />
    25.         <mx:Object label="advanced" />
    26.     </mx:Array>
    27.    
    28.     <mx:Array id="fontTypes">
    29.         <mx:Object label="calibriE" />
    30.         <mx:Object label="arialE" />
    31.         <mx:Object label="arial" />
    32.         <mx:Object label="tahomaE" />
    33.     </mx:Array>
    34.    
    35.     <mx:Array id="alignTypes">
    36.         <mx:Object label="left" />
    37.         <mx:Object label="right" />
    38.     </mx:Array>
    39.    
    40.    
    41.  
    42.     <mx:Array id="gridFitTypes">
    43.         <mx:Object label="none" />
    44.         <mx:Object label="pixel" />
    45.         <mx:Object label="subpixel" />
    46.     </mx:Array>
    47.  
    48.     <mx:Boolean id="isAdvanced">
    49.         {antiAliasTypeComboBox.selectedIndex == 1}
    50.     </mx:Boolean>
    51.  
    52.     <mx:ApplicationControlBar dock="true">
    53.         <mx:Form>
    54.             <mx:FormItem label="{sizeSlider.value} fontSize:">
    55.                 <mx:HSlider id="sizeSlider"
    56.                         minimum="6"
    57.                         maximum="24"
    58.                         value="12"
    59.                         liveDragging="true"
    60.                         snapInterval="1"
    61.                         tickInterval="1" />
    62.             </mx:FormItem>
    63.             <mx:FormItem label="rotation:">
    64.                 <mx:HSlider id="rotationSlider"
    65.                         minimum="-3"
    66.                         maximum="3"
    67.                         value="0"
    68.                         liveDragging="true"
    69.                         snapInterval="0.1"
    70.                         tickInterval="1" />
    71.             </mx:FormItem>
    72.             <mx:FormItem label="fontAntiAliasType:">
    73.                 <mx:ComboBox id="antiAliasTypeComboBox"
    74.                         dataProvider="{antiAliasTypes}" selectedIndex="1" />
    75.             </mx:FormItem>
    76.             <mx:FormItem label="{sharpnessSlider.value} : fontSharpness:"
    77.                     enabled="{isAdvanced}">
    78.                 <mx:HSlider id="sharpnessSlider"
    79.                         minimum="-400"
    80.                         maximum="400"
    81.                         value="0"
    82.                         liveDragging="true"
    83.                         snapInterval="1"
    84.                         tickInterval="20" />
    85.             </mx:FormItem>
    86.             <mx:FormItem label="{thicknessSlider.value} :fontThickness:"
    87.                     enabled="{isAdvanced}">
    88.                 <mx:HSlider id="thicknessSlider"
    89.                         minimum="-200"
    90.                         maximum="200"
    91.                         value="0"
    92.                         liveDragging="true"
    93.                         snapInterval="1"
    94.                         tickInterval="10" />
    95.             </mx:FormItem>
    96.             <mx:FormItem label="fontGridFitType:"
    97.                     enabled="{isAdvanced}">
    98.                 <mx:ComboBox id="gridFitTypeComboBox"
    99.                         dataProvider="{gridFitTypes}" selectedIndex="1"/>
    100.             </mx:FormItem>
    101.             <mx:FormItem label="font:">
    102.                 <mx:ComboBox id="fontTypeChoix"
    103.                         dataProvider="{fontTypes}" selectedIndex="0"/>
    104.             </mx:FormItem>
    105.             <mx:FormItem label="alignement:">
    106.                 <mx:ComboBox id="fontAlignChoix"
    107.                         dataProvider="{alignTypes}" selectedIndex="0"/>
    108.             </mx:FormItem>
    109.         </mx:Form>
    110.     </mx:ApplicationControlBar>
    111.    
    112. <mx:Canvas>
    113.  
    114. <mx:FormItem label="Saisir un texte : " x="10" y="80">
    115.     <mx:TextInput id="choix" text="Type de mouvement"
    116.         fontFamily="{fontTypeChoix.selectedItem.label}"
    117.             fontSize="{sizeSlider.value}"
    118.             fontAntiAliasType="{antiAliasTypeComboBox.selectedItem.label}"
    119.             fontSharpness="{sharpnessSlider.value}"
    120.             fontThickness="{thicknessSlider.value}"
    121.             fontGridFitType="{gridFitTypeComboBox.selectedItem.label}"
    122.             rotation="{rotationSlider.value}">
    123.        
    124.     </mx:TextInput>
    125.     </mx:FormItem>
    126.     <mx:Label id="lbl" x="125" y="150" 
    127.         textAlign="{fontAlignChoix.selectedItem.label}"
    128.             text="{choix.text}"
    129.             color="0x000000"
    130.             fontFamily="{fontTypeChoix.selectedItem.label}"
    131.             fontSize="{sizeSlider.value}"
    132.             fontAntiAliasType="{antiAliasTypeComboBox.selectedItem.label}"
    133.             fontSharpness="{sharpnessSlider.value}"
    134.             fontThickness="{thicknessSlider.value}"
    135.             fontGridFitType="{gridFitTypeComboBox.selectedItem.label}"
    136.             rotation="{rotationSlider.value}"
    137.             truncateToFit="false" />
    138. <!-- <mx:FormItem label='image "témoin" : ' x="10" y="170">           
    139.             <mx:Image source="@Embed('police.png')" >
    140.                
    141.             </mx:Image>
    142.             </mx:FormItem> -->
    143.    
    144. </mx:Canvas>               
    145.  
    146. </mx:Application>

    par contre, je n'ai pas de solution pour éviter ce souci. si je trouve qque chose, je posterais...

    bonne blague de flex !


Leave a comment

(required)

Flex Tips – Font Embed avec seulement les caractères français (French Unicode) - Adobe Flex Tutorial - Tutoriaux Flex Builder, MXML, ActionScript, AS3
» «

Mes projets (Open Source)

Data Filter Lib ToasterLib

Autres

tutorial flex tutorial flex AFCS livres AS3 Flex

Blogoliste