Problem
You want to use rich text formatting like bold and italic with an embedded font, but the documentation does not tell you how and you only get the regular font displayed in your TextArea with htmlText. The <b> and <i> tags are ignored.
Solution
Embed fonts for each combination of weight and style and use the fontWeight and fontStyle properties in a metadata tag or in CSS to specify the nature of the fonts while always using the same font family name using the fontFamily property.
Detailed explanation
In the following implementation, we embed the fonts in a separate class that is simply linked from the main class in the Flex project (a mere instantiation is enough). For each TrueType font, there is a corresponding metadata tag pointing to a different ttf file, with a different combination of
weight and style (normal/normal, normal/italic, bold/normal and bold/italic) but ALWAYS WITH THE SAME FONT FAMILY. Using the same font family name for all declarations ensure that when you specify the fontFamily for a TextArea, the fonts will be correctly mapped. The weight and style for each font
in the family, specified with the fontWeight and fontStyle properties respectively are also very important. If the combination is wrong, the embedding will fail at compile time (e.g a bold/italic font specified as normal/normal). Finally, we register each font class in the FontManager constructor
in order to ensure they are accessible globally even from modules or when using RSLs (this also solves the issue when the text with the embedded font does not appear at all in your charts axes or in your advanced data grid or any other data visualization component).
To use the FontManager in your application, you just need to call new FontManager(). There is no need to assign the instance to a variable since you won't refer to it.
package com.db.managers
{
import flash.text.Font;
public class FontManager
{
/*
------------------------------------------------------------------------------------------------------
*/
[Embed(source="assets/fonts/LT_21142.ttf", fontWeight="normal",
fontStyle="normal", fontFamily="DeutscheBankUnivers",
mimeType="application/x-font", embedAsCFF="false")]
private static const DeutscheBankUnivers430RegularClass:Class;
/*
------------------------------------------------------------------------------------------------------
*/
[Embed(source="assets/fonts/LT_21143.ttf", fontWeight="normal",
fontStyle="italic", fontFamily="DeutscheBankUnivers",
mimeType="application/x-font", embedAsCFF="false")]
private static const
DeutscheBankUnivers431RegularItalicClass:Class;
/*
------------------------------------------------------------------------------------------------------
*/
[Embed(source="assets/fonts/LT_21146.ttf", fontWeight="bold",
fontStyle="normal", fontFamily="DeutscheBankUnivers",
mimeType="application/x-font", embedAsCFF="false")]
private static const DeutscheBankUnivers630BoldClass:Class;
/*
------------------------------------------------------------------------------------------------------
*/
[Embed(source="assets/fonts/LT_21147.ttf", fontWeight="bold",
fontStyle="italic", fontFamily="DeutscheBankUnivers",
mimeType="application/x-font", embedAsCFF="false")]
private static const DeutscheBankUnivers631BoldItalicClass:Class;
/*
------------------------------------------------------------------------------------------------------
*/
public function FontManager()
{
Font.registerFont(DeutscheBankUnivers430RegularClass);
Font.registerFont(DeutscheBankUnivers431RegularItalicClass);
Font.registerFont(DeutscheBankUnivers630BoldClass);
Font.registerFont(DeutscheBankUnivers631BoldItalicClass);
}
}
}
Not all fonts will work in Flex. If embedding does not work, you can specify which managers are used by the Flex compiler and in what order in flex-config.xml under flex_install_folder\sdks\flex_sdk_X.X.X\frameworks:
<managers> <manager-class>flash.fonts.BatikFontManager</manager-class> <manager-class>flash.fonts.AFEFontManager</manager-class> <manager-class>flash.fonts.JREFontManager</manager-class> </managers>
NB: The order is in reverse. Last in the list is first used.
This recipe is valid for Flash Player 9. In Flash Player 10, embedding is not necessary to get an anti-aliased font, which allows even Japanese or Chinese fonts to be used as system fonts and get anti-aliased while their embedding (and therefore anti-aliasing) in Flash Player 9 and earlier
was made impossible by the fact these fonts weigh around 30 MB.
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
