Flash-style Font Embedding
One of the things i love about Flash (and man, there are so few things) is that you can embed a range of Unicode characters of a specific font into your application. A range is basically a set of characters that exists in your desired font (ie Latin characters). For more info on Unicode characters and ranges, go here.
So, now, how does one embed a font into Flex?
Well, it’s actually quite simple. Inside of the <Style> tag or in an external .css file, you can embed a font using the following syntax:
@font-face
{
src:url("../assets/MyriadWebPro.ttf"); /* A .ttf inside your project */
fontFamily: myFontFamily;
}
@font-face
{
fontFamily: "Lucida Sans";
src: local("Lucida Sans");
}
The following syntax illustrates how to embed only certain unicode ranges of your font:
@font-face
{
src:url("../assets/MyriadWebPro.ttf");
fontFamily: myFontFamily;
unicodeRange:
U+0041-U+005A, /* Upper-Case [A..Z] */
U+0061-U+007A, /* Lower-Case a-z */
U+0030-U+0039, /* Numbers [0..9] */
U+002E-U+002E; /* Period [.] */
}
Now how cool is that?! Flex rocks!
| Print article | This entry was posted by Danny Kopping on November 8, 2008 at 1:53 pm, and is filed under AIR, ActionScript 3.0, Flash, Flex. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |
No trackbacks yet.
Truly Cached Flex Modules
about 2 years ago - 3 comments
I was working on a project recently and I discovered (or possibly misunderstood – see disclaimer) that Flex does not cache modules correctly, or – at the very least – it does not do it effectively according to my tests.
Using a Custom Cursor in Flex with CSS
about 2 years ago - No comments
Learn how to define a custom Flex busy cursor in pure CSS
QuickTip: asSQL Connection Problem with non-localhost hostname
about 2 years ago - 1 comment
Read this post to fix that annoying error with asSQL when trying to connect to remote MySQL installations
Fixing that annoying feature of List controls
about 2 years ago - No comments
Learn how to fix that ever-painful “optimization” feature of Flex’s list components
The Whirlwind that is Adobe in 2009
about 2 years ago - 1 comment
It’s been quite a fascinating year thus far; Adobe has really started getting serious about Flash, Flex and the developers involved
Flex font embedding nightmare
about 2 years ago - No comments
There are many things that really irritate me – pretence, dishonesty, blind faith and Flex font embedding! Sometimes it makes me wonder whether i really exist… Ok, that’s taking it a bit far, but it really grates my nuts sometimes
Flash & Flex Developer's Magazine
about 2 years ago - No comments
The new version of FFDMag is officially out! The publication is now an online-based magazine, available free of charge to all that want to check it out. Check out my article about Flex & AMFPHP integration on Page 54.
Runtime Shared Libraries – indispensable and infuriating!
about 2 years ago - 2 comments
Utilizing the RSL (Runtime Shared Library) mechanism in Flex is arguably one of the quickest and easiest ways to drastically shrink your Flex application’s file size. The RSL mechanism essentially allows you to compile your Flex application without embedding the Flex framework into the code. So, if the Flex framework isn’t compiled into the Flex
Handling multiple remote services with RemoteObject – the easy way!
about 2 years ago - 9 comments
Here’s a quick and easy way to handle multiple service calls in two simple event handlers!
about 2 years ago
But font-files more heavy with Flex. And all application more heavy (without fonts, only framework including). What is approach to specify the signatures in Flash? I think it can be putting it in TextField for each font. Isn’t that so?
about 2 years ago
Hey Michael…
There are many ways to embed fonts in Flash.
For example, you could set the embedFonts property of a TextField to true, embed the font directly into your library, or embed a character range in the Properties panel while you have a text field selected.
Yes, Flex’s framework is very heavy, and i’d recommend that – unless you’re targeting an audience with slow connections like i have to in South Africa – you should not really embed fonts. However, the method is described in this blog post illustrates how to only embed certain parts of a font, not the entire font… Instead of embedding a full font of 250Kb for example, you can cut it down to about 50Kb or thereabouts.
Flex font embedding works differently to Flash in some instances, but Flex is a highly optimised improvement on Flash, and many things are possible.
There is an XML document in the Flex configuration directories (usually located at $install_directry/sdks/$sdk_version/frameworks/flash-unicode-table.xml) and this should help you embed the right characters.
Hope that helps…
Danny