Setting unicodeRange in Flex using CSS
Embedding fonts in Flex is easy and definitely recommended. It enables you to make them more readable for your users by using anti-aliasing and smoothing. It even allows rotation and transparancy of fonts. I can’t find a reason not to use this functionality as a design often requires it… Oh wait a minute, I do. An insane increase in filesize!
By just embedding a standard truetype font, you increase your application’s filesize with approximately 800kb! That’s a lot of bytes… but cheer up, there’s a solution.
In Flex, you can use unicode-ranges to specify which characters you want to embed in you application. It’s fairly easy using css, and it’ll slice off some of those bytes on your application. Check this out:
-
@font-face {
-
src:url("../yourAssets/fonts/calibri.ttf");
-
fontFamily: Calibri;
-
advancedAntiAliasing: true;
-
unicodeRange:
-
U+0040-U+00FF, /* @ABC…. */
-
U+0030-U+0039, /* 0-9 */
-
U+003A-U+0040, /* :;<=>?@ */
-
}
-
.someClass{
-
fontFamily: Calibri, Arial, "_sans";
-
color: #FF0000;
-
fontSize: 16px;
-
}
Using this Unicode table on wikipedia you can find the exact character you want to embed. As you can see in the example above, I’ve embedded the character range from U+0040 which starts on the first row, in the first column to U+00FF and ends on the 8th row and in the last column. The same goes for the other ranges. If you can’t find a specific character in this table, there is always google… Try pasting your character and adding ‘unicode’. I’m sure you’ll find the right code that you can add to the range of characters you need.
September 16th, 2008 at 9:20 am
Nice tip. I was just looking for how to embed fonts.
thx
September 17th, 2008 at 10:22 am
This W3C page about Unicode ranges is also interesting:
http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#descdef-unicode-range