Sunday, July 13, 2008

Flex: setting unicode ranges when using a TrueType Font saves over 300kb

written by Marcel Panse

There are a few ways of using fonts in a flex application. The default way of doing it in flex is using 'device fonts'. This means flex will not embed any fonts into you swf file, but it will use the font on the clients computer instead. Flex will try to find a font on his computer that is the closest to the font you configured in you css file.

The following example specifies the device font _sans to use if Flash Player cannot find either of the other fonts on the client machine:

.myClass {
fontFamily: Arial, Helvetica, "_sans";
color: Red;
fontSize: 22;
fontWeight: bold;

The drawback of this is that your flex application might not look precisely the same on every computer, which can result in slightly different layouts. Like too long labels resulting in unanticipated scrollbars (Arghh!).

Rather than rely on a client machine to have the fonts you specify, you can embed TrueType font families (.ttf or .otf) in your Flex application. This means that the font is always available to Flash Player when running the application, and you do not have to consider the implications of a missing font.

This has some major advantages; like rotating fonts, making fonts transparent, smoother fonts and anti-aliasing fonts which just means better readability especially with smaller fonts.

But with beauty comes pain: the one major drawback is your swf file will increase in size.. a lot.. Using a standard true type font like Myriad Pro Regular, an increase of about 900kb's is normal (which doubles the size of my entire flex application!). This is because the entire font with all unicode ranges will be embedded into you swf file. At least 50% of these unicode characters you will never use.

But there is hope! The proper way to embed a true type font into you swf file is by specifying the unicode ranges you want to include into you swf file. Only the characters inside these ranges will be embedded into your swf file. You can find the unicode tables on wikipedia:

Here is an example which works for me. This example is optimized for the Dutch language. In the Dutch language we use a lot of ë's and é's and stuff, so i also included them, you have to figure out which characters you need for you own language.

@font-face {
fontFamily: myFontFamily;
fontAntiAliasType: advanced;
U+0021-U+002F, /* !"#$%&'()*+,-./ */
U+0030-U+0039, /* 0-9 */
U+003A-U+0040, /* :;<=>?@ */
U+0040-U+007E, /* @A-Z[\]^_`a-z{|}~ */
U+00E0-U+00EF, /* àáâãäåæçèéêëìíîï */
U+2022-U+2022; /* • */

For more information about fonts see the adobe live docs

No comments: