Adobe^® Flex^™ Tutorial

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

• Flex Embed Fonts – Polices Embarquées à la compilation
• Flash Font – Convertir un fichier TTF en SWF (Convert TTF to SWF)
• Flex CSS: Modifier les CSS à l'exécution (Runtime CSS)
• Flex Effect: Utiliser des effets avec du texte (embedded Font), exemple
• Flex Validator: Personnaliser les tooltip d'erreur du CurrencyValidator