Flex et quelques désagréments avec les polices embarquées

Posted in Flex on avril 30th, 2009 by Ajrarn

… peut-être vous êtes-vous dit, comme moi, qu’utiliser la capacité de Flex à pouvoir embarquer des polices directement dans les fichiers swf générés pouvait être intéressante pour éviter les sempiternelles Verdana, Arial and co qu’on croise à peu près partout sur la toile!

Alors, je me lance!

Je me rends sur le site http://www.dafont.com/fr/ et je télécharge pour l’exemple la police STARGUIDES. Je copie le fichier starguides.ttf dans mon répertoire C:\WINDOWS\Fonts pour pouvoir en profiter et je me lance dans mon code Flex :

[Bindable]
 
[Embed(source="C:\\Windows\\Fonts\\STARGUIDES.ttf",
           fontName="fontStarguides")]
 
private var fontStarguides:Class;

Petite précision : Ajouter des polices dans Flex augmente de manière conséquente la taille du fichier swf compilé. Idéalement, il faut définir les caractères qui seront utilisés pour réduire cette taille au minimum mais comme je suis fainéant, j’ai oublié cette étape!

Je teste avec des Text et des Label, la vie est belle, je passe au Button et… Là, c’est le drâme… Un bon vieux Times New Roman est venu reprendre son bon droit!!

Bien embêté, je commence des recherches pour résoudre ce problème et je finis par me rendre compte que la police que j’ai téléchargé n’a pas son pendant bold… Et c’est par défaut la décoration qui est utilisée par Flex dans l’affichage du libellé du bouton… Il faut donc prévenir Flex de changer ça en surchargeant le style du bouton dans une balise <mx:Style> :

Button {
  embedFonts: true;
  fontWeight: normal;
  fontFamily: "fontStarguides";
}

;

Ça résout mon problème! Je me lance alors dans un TabNavigator et… rebelotte. La colonne sélectionnée par l’utilisateur est incorrecte. Voici comment corriger ça :

TabBar {
  selectedTabTextStyleName: "fontStarguides";
}

Je vous le donne en mille, l’accordéon n’échappe pas à la règle. Il faut lui préciser la police des headers et la décoration de celle-ci :

Accordion {
  headerStyleName: accordionHeaderStyleName;
}
 
.accordionHeaderStyleName {
  fontFamily: "fontStarguides";
  fontWeight: normal;
}

Voilà, avec ces quelques configurations, nous pouvons profiter pleinement de notre nouvelle police de caractères et se démarquer un peu des autres.

La preuve en image : ici

Tags: , , , , , ,