In a previous demo Loading embedded fonts on-demand using the uiFonts manager, the uiFonts manager was shown to load external embedded font SWFs “on-demand”.

The uiFonts manager can work with embedded font SWFs compiled either from the Flash IDE or the Flex compiler.

When compiling using the Flash IDE, we use Font Symbols in the Library (see uiFonts usage notes).

When compiling using the Flex compiler, we use a single AS3 class file. The following shows how the AS3 Class must be written in order for the resulting SWF to work with the uiFonts manager.

If you are using Flash Develop, the following method for building font SWFs apply as well and you may use Tools -> Flash Tools -> Build Current File (CTRL-F8) to compile the class.

In this example, we will create a “DejaVu_Sans.swf” file containing the “DejaVu Sans” font. The font is available from http://dejavu-fonts.org.

package
{
	import flash.display.Sprite;
 
	public class DejaVu_Sans extends Sprite
	{
		[Embed(mimeType="application/x-font", systemFont="DejaVu Sans", fontName="DejaVu Sans",
		unicodeRange="U+0020-U+007E")]
		public static const REGULAR:Class;
 
		[Embed(mimeType="application/x-font", systemFont="DejaVu Sans", fontName="DejaVu Sans", fontWeight="bold",
		unicodeRange="U+0020-U+007E")]
		public static const BOLD:Class;
 
		[Embed(mimeType="application/x-font", systemFont="DejaVu Sans", fontName="DejaVu Sans", fontStyle="italic",
		unicodeRange="U+0020-U+007E")]
		public static const ITALIC:Class;
 
		[Embed(mimeType="application/x-font", systemFont="DejaVu Sans", fontName="DejaVu Sans", fontWeight="bold", fontStyle="italic",
		unicodeRange="U+0020-U+007E")]
		public static const BOLD_ITALIC:Class;
	}
}

Class Name

• First of all, the class name must match the name of the font, converting any space to underscore.

public class DejaVu_Sans extends Sprite

REGULAR

• Embedding the REGULAR version of the font is mandatory. You may skip the BOLD, ITALIC and BOLD_ITALIC versions, but not the REGULAR version.
• The REGULAR version of the font is embedded by defining a static variable (or constant) named REGULAR and declaring the [Embed] meta tag above it accordingly:

[Embed(mimeType="application/x-font", systemFont="DejaVu Sans", fontName="DejaVu Sans",
unicodeRange="U+0020-U+007E")]
public static const REGULAR:Class;

BOLD

• If the font has a BOLD version (depends on the font developer – not all fonts are provided with a bold version), you may embed that version by defining a static variable (or constant) with the name BOLD and declaring the “fontWeight” value as “bold” in the meta tag:

[Embed(mimeType="application/x-font", systemFont="DejaVu Sans", fontName="DejaVu Sans", fontWeight="bold",
unicodeRange="U+0020-U+007E")]
public static const BOLD:Class;

ITALIC

• Likewise, if the font has an ITALIC version (most CJK fonts do not have italic versions), you may embed that version by defining a static variable (or constant) with the name ITALIC and declaring the “fontStyle” value as “italic”:

[Embed(mimeType="application/x-font", systemFont="DejaVu Sans", fontName="DejaVu Sans", fontStyle="italic",
unicodeRange="U+0020-U+007E")]
public static const ITALIC:Class;

BOLD_ITALIC

• If the font has both BOLD and ITALIC versions, you may embed a BOLD_ITALIC version:

[Embed(mimeType="application/x-font", systemFont="DejaVu Sans", fontName="DejaVu Sans", fontWeight="bold", fontStyle="italic",
unicodeRange="U+0020-U+007E")]
public static const BOLD_ITALIC:Class;

unicodeRange

• The “unicodeRange” value in the [Embed] meta tag determines which glyphs to include. In the above example, we have embedded glyphs from the basic latin range:

  // BASIC LATIN
  U+0020-U+002F // punctuation
  U+0030-U+0039 // 0-9
  U+003A-U+0040 // punctuation
  U+0041-U+005A // A-Z
  U+005B-U+0060 // punctuation
  U+0061-U+007A // a-z
  U+007B-U+007E // punctuation

• If you happen to need Japanese glyphs, the following range would be useful:

  // JAPANESE KANA
  // Japanese-style punctuation
  U+3000-U+303F
  // Hiragana
  U+3040-U+309F
  // Katakana
  U+30A0-U+30FF
  // Half-width katakana
  U+FF61-U+FF9F
  // Full-width roman characters (suggest omit)
  U+FF00-U+FF60
  // CJK unifed ideographs – Common and uncommon kanji (huge!)
  U+4E00-U+9FAF

• The font you are embedding must of course contain the respective glyphs in the specified unicode range(s).

Using with the uiFonts manager

• Once you have compiled the font SWF, put it in the project’s “assets/fonts/” folder to make it available for use in your application.
• Calling the uiFonts.manager.load() method will load “DejaVu_Sans.swf” from the fonts folder (note: specify the font name when calling the load() method, not the file name).

  uiFonts.manager.load("DejaVu Sans");

• As shown in the previous demo, the uiFonts manager will work hand-in-hand with the uiTextStyles manager to automatically apply embedded fonts to uiText instances on the stage (instances that are using the respective font(s)) after loading completes.

Other Posts You Might Enjoy:

• Unicode Character Charts By Script
• Loading embedded fonts on-demand using the uiFonts manager
• Using uiTextStyles: Defining Faux Bold Weights (Embedded Fonts)
• [AS3] Embossed and Engraved Text Effects (Embedded Fonts)
• Using uiTextStyles: Drawing Outline on Text Glyphs

Trackback URI | Comments RSS