Pour ne pas avoir de surprises quand on change de plate-formes d'exécution de Flash Player, il est tentant d'embarquer une police de caractère. Ainsi, vous aurez un rendu qui sera (quasiment) le même que vous soyez sur Linux, Mac ou Windows. Il y a plusieurs technique pour embarquer (embed) une font, cet article en fait le point:
Flex Embed Fonts – Polices Embarquées à la compilation
Cependant, de base, Flex va embarquer l'ensemble des caractères de la police. Cela peut être particulièrement encombrant pour la plupart des applications puisque le poids du SWF va gonfler pour pouvoir supporter des caractères que votre utilisateur ne va sûrement jamais utiliser (qui va taper un caractère norvégien avec un clavier français ?).
Pour améliorer cette situation, Flex vous donne la possibilité de restreindre les caractères embarqués en précisant des plages de caractères Unicode. Vous pouvez trouver la liste des caractères Unicode sur Wikipedia:
List of Unicode characters
Par exemple, pour intégrer une font avec seulement les chiffres, vous pouvez écrire dans la déclaration CSS:
unicode-range: U+0030-U+0039;
Ici, on va aller du caractère U+0030 (zero) au caractère U+0039 (neuf).
Pour ne spécifier qu'un caractère, il suffit de créer une plage avec les deux bornes égales.
Pour intégrer uniquement les caractères français, c'est-à-dire les chiffres, les lettres, les lettres en majuscule, la ponctuation et les lettres accentuées, il vous faudrait donc préciser toutes les plages.
Pour vous faciliter la tâche, j'ai déjà fait ce recoupement. Voici donc les codes Unicodes à préciser dans votre unicode-range. L'application sert à tester cette opération. Tapez des caractères, s'il n'apparaissent pas, cela signifie que le caractère n'est pas inclus. Pour l'anecdote, la taille de l'application est passée de 225Ko à 191Ko mais cela peut se révéler beaucoup plus intéressant sur d'autres polices.
Si vous pensez qu'il faille rajouter un caractère, laisser un commentaire, avec le code Unicode si possible pour que je puisse compléter cet exemple:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
<mx:Style>
@font-face {
src: url("C:\\Windows\\Fonts\\GOTHIC.ttf");
fontFamily: gothicCentury;
unicode-range: U+0020-U+002F, /* ponctuation */
U+0030-U+0039, /* 0-9 */
U+003A-U+0040,
U+0041-U+005A,
U+005B-U+0060,
U+0061-U+007A, /* a-z */
U+007B-U+007E,
U+20AC-U+20AC, /* euro sign */
U+00A3-U+00A3, /* pound sign */
U+00B2-U+00B2, /* power of 2 */
U+00F9-U+00F9, /* ù */
U+00E0-U+00F6; /* accents */
}
global {
fontFamily: gothicCentury;
}
</mx:Style>
<mx:TextInput id="input" fontSize="20" width="350"/>
<mx:Label text="{input.text}" fontSize="20"/>
</mx:Application>
Flex Source Code Download: Télécharger le code source complet de l'application
This movie requires Flash Player 11
Vous pouvez personnaliser l'apparence des toolTips en utilisant les styles. Le Framework Flex ne permet pas de fixer des styles pour des toolTips individuels, vous devez fixer le style des toolTips globalement pour toutes les instances. Vous pouvez le faire en changeant la définition du style ToolTip en utilisant le sélécteur CSS de la classe. L'exemple suivant montre comment changer la définition du style en utilisant le tag Style (il peut aussi être fait dans une feuille CSS séparée):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
<mx:Style>
ToolTip{
fontFamily: "_typewriter";
background-color:#FFFFFF;
}
</mx:Style>
<mx:Button label="Tool Tip" toolTip="Exemple de toolTip avec style"/>
</mx:Application>
Flex Source Code Download: Télécharger le code source complet de l'application
This movie requires Flash Player 11
Pour un projet personnel, j'avais besoin d'intégrer une police à mon application Flex. Cette police n'était pas une police Windows standard (Arial, Verdana,...) mais une police téléchargée sur Internet.
Pour qu'elle soit utilisée dans toute mon appli Flex, j'ai utilisé la directive CSS font-face suivante:
@font-face {
src: url("fonts/font.ttf");
fontFamily:AvantGarde-Book;
}
global{
fontFamily:AvantGarde-Book;
}
Cependant, à la compilation, Flex m'a lancé l'erreur suivante:
exception during transcoding: Unexpected exception encountered while reading font file 'font.ttf'
Vous pouvez utiliser les effets sur n'importe quel UIComponent. Cependant, si le composant contient du texte (labels, champs de saisie ...), l'effet Fade et Rotate ne fonctionneront pas comme prévu si la police d'écriture (font) n'est pas Embed.
Par défaut, tous les text dans des UI controls utilisent les fonts system plutôt que les polices embedded.
Flash Player ne rendent pas bien le text pour les fonts system si la propriété alpha est défini sur une autre valeur que 1, et si la propriété rotation n'est pas à 0.
Un texte avec la police par défaut sera affiché correctement uniquement si l'alpha est de 1, et la rotation est de 0
