Little-known secrets of embedding fonts in flex

 

Core Tip: The flashtype attribute cannot be used here. The value of this attribute is determined by the SWF file and cannot be changed. Before using this font, make sure that the SWF file has been loaded.
 

When processing text, for the sake of appearance, sometimes some special fonts will be selected for the text, so that the text is not so monotonous, this will lead to a problem: because each user's system is different, when the specified font is not installed on the recipient's machine, Flash Player automatically selects a proper font, which cannot ensure that the text looks under control and may be out of the box. How can this problem be avoided?
There are two solutions: use the device font and use the embedded font. The font feature of a device is that all fonts on the user's machine can simulate their appearances as much as possible, so that the text style will not change significantly; embedded font refers to compiling the font file into the SWF file or loading it into the SWF file at runtime for use by the SWF file. In this way, the font is displayed normally no matter whether the font is installed or not. The benefits of using an embedded font include: the text has anti-aliasing, the edge is smoother, the text can be set to transparency, and the text can be rotated. Of course, there are also disadvantages. The first step is to increase the file size of the program, and the embedded font only supports the TrueType (font standard jointly developed by Microsoft and Apple) type. When the font size is smaller than 10, text is hard to recognize.
Generally, it is enough to use the device font. Flash Player supports three types of device fonts: _ SANS, _ Serif, and _ typewriter. To ensure the effect, you can define the style as follows:
Application {
Fontsize: 12;
Fontfamily: Arial, "_ sans ";
}
When the user's machine does not have the Arial font, Flash Player automatically uses the "_ sans" device font. Unlike the system font, the device font must be enclosed in quotation marks.
In some cases, embedded fonts are required, such as fade (Fade-in and fade-out effect), rotate (rotate effect), and dissolve (dissolve effect ). You can embed a font in the style definition:
<Mx: style>
@ Font-face {
SRC: Local ("Arial"); // embed the local font
Fontfamily: myfont; // font alias
Fontstyle: normal; // normal by default; normal; optional values: italic | oblique | normal
Fontweight: normal; // normal by default; normal; optional values: bold | heavy | normal
Flashtype: true; // The default value is true. This parameter adds additional text information so that the text can be displayed smoothly.
}
Application {
Fontsize: 12;
Fontfamily: myfont; // specifies the font and uses the alias of the embedded font.
}
</MX: style>
When embedding some double-byte fonts, such as Chinese and Japanese fonts, the font information is complex and the font file is large. To reduce the file size of the program, you can restrict the character range of the embedded font so that unused character information is not included in the file. For example, if the English font is used, only characters in the English range can be used. If the Chinese character is used, it cannot be displayed.
Use unicoderange in font-face to specify the character range. For example:
@ Font-face {
SRC: Local ("Arial ");
Fontfamily: myfont;
Flashtype: true;
Unicoderange:
U + 0041-u + 005a,/* uppercase letter [A. Z] */
U + 0061-u + 007a,/* lowercase letter A-z */
U + 0030-u + 0039,/* number [0 .. 9] */
U + 002e-u + 002e;/* point [.] */
}
The character encoding must be used to define the character range. Here, the character encoding adopts the Unicode (unified character encoding) standard.
Another way to define the character range is to add relevant information in the flex-config.xml. Open the flex SDK 2/frameworks/flex-config.xml file in the flex builder 2 installation directory in the text editor and find the <fonts> tag.
<Fonts>
<Ages>
<Language-range>
<Lang> englishrange </lang>
<Range> U + 0020-u + 007e </range>
</Language-range>
</Fonts>
Add the character range of the font according to the preceding format and set the tag name in the <Lang> label. In this way, you can use this name in a program to define the character range. For example:
@ Font-face {
SRC: Local ("Arial ");
Fontfamily: myfont;
Flashtype: true;
Unicoderange: "englishrange" // equivalent to U + 0020-u + 007e
}
There is also a flex-config.xml file under the same directory of the flash-unicode-table.xml, which lists the Unicode character range of most languages for developers to refer to, which also has Chinese information:
<Language-range>
<Lang> Chinese (all) </lang>
<Range> U + 3000-u + 303f, U + 3105-u + 312c, U + 31a0-u + 31bf, U + 4e00-u + 9faf, U + FF01-U + ff60, U + F900-U + faff, U + 201c-u + 201d, U + 2018-u + 2019, U + 2014, U + 2026, U + ffe5, U + 00b7 </range>
</Language-range>
Another way to embed a font is to place the font in an external SWF and then load the SWF file. For example:
@ Font-face {
SRC: URL ("./arial.swf"); // specify the file address
Fontfamily: "myfont ";
}
The flashtype attribute cannot be used here. The value of this attribute is determined by the SWF file and cannot be changed. Before using this font, make sure that the SWF file has been loaded.
To use this font in a program:
@ Font-face {
SRC: URL ("./arial.swf ");
Fontfamily: "myfont ";
}
. Plaintext {
Fontfamily: "myfont ";
Fontsize: 12;
}
. Boldtext {
Fontfamily: "myfont ";
Fontsize: 12;
Fontweight: bold;
}

Note: When using an embedded font, different styles, such as italic and bold, must be defined separately, independent of each other and cannot be mixed together.
The script can also be used to embed the font:
[Embed (mimetype = 'application/X-font', source = '../assets/Arial. ttf', fontname = 'myarialfont')]
Private var myfont: class;
Define style:
. Plaintext {
Fontfamily: myarialfont;
Fontsize: 12;
}
If the embedded font is large and the generated program file is large, it takes a long time to load the file. To avoid this problem, you can package the font file into a SWF file, then load it into the program. Let's talk about this problem next time.
Article from: Flash client (www.flashas.net) Detailed reference: http://www.flashas.net/html/Flex/20080612/3235.html