Fonts are not displayed correctly
TroubleshootingSummary
Description
System fonts may not always display special characters correctly. Another problem with using system fonts appears when text is rotated, e.g. in rotated labels: Rotating text is only available with embedded fonts.
The
Adobe Flex documentation explains how to embed fonts in ActionScript:
// Flex 3:
[Embed(systemFont='serif', fontName='MyEmbeddedSerif', mimeType='application/x-font')]
private var Serif:Class;
// Flex 4: don't embed as CFF:
[Embed(systemFont='serif', fontName='MyEmbeddedSerif', mimeType='application/x-font', embedAsCFF='false')]
private var Serif:Class;
'serif' refers to the default serif system font (Times New Roman in Windows). Depending on the system, this font should support a large character set. If 'serif' doesn't work, try embedding and using a different font. The
Adobe Flex documentation explains how to embed fonts in ActionScript.
Using this font as default font for all labels is easy. Before creating any labels set the default font:
FontManager.INSTANCE.defaultFont = "MyEmbeddedSerif";
To set the font to the text of one or more specific labels, one has to create a UITextFormat
instance and set the font property (by using the fontName) of that instance.
var format:UITextFormat = FontManager.INSTANCE.getDefaultTextFormat();
format.font = "MyEmbeddedSerif";
For label text, that text format has to be passed to the label style:
graph.defaultNodeLabelStyle = new SimpleLabelStyle(null,format);
To use an embedded font with a server-generated graph, set the fontName attribute of the embedded font to the name, the server side used font is serialized with. Alternatively, it is possible to map the embedded font to the server side font name:
FontManager.INSTANCE.mapFont(SERVER_FONT, "MyEmbeddedSerif");
Where SERVER_FONT is the name, the font is serialized with on the server, as String. This line has to be added before the graph is deserialized, i.e. usually before the call to RoundtripHandler.run().
As embedding fonts within an SWF will increase the SWF's size, it is recommended to use embedded fonts only if the text is not displayed correctly with system fonts. Especially the symbolic fonts 'serif' and 'dialog' can add some 100 kB to the SWF.
The size of an embedded font can be reduced by embedding only a range of characters using the unicodeRange attribute in the Embed statement.
The following example demonstrates how to embed the font system font 'dialog' as font with the name 'Dialog' to be displayed as normal and bold characters. To reduce the size of the SWF only a small subset of characters is embedded.
[Embed(systemFont='dialog', fontName='Dialog', mimeType='application/x-font',
unicodeRange="U+0020-U+007E,U+00A0-U+00FF")]
private var Dialog:Class;
[Embed(systemFont='dialog', fontWeight='bold', fontName='Dialog', mimeType='application/x-font',
unicodeRange="U+0020-U+007E,U+00A0-U+00FF")]
private var DialogBold:Class;