In Adobe Flex, why does an embedded version of a font behave differently from the same font installed on the system

Scenario:

Flex application using @ font-face declaration to embed the font. (Embedded fonts should be able to rotate text.)

The app was originally developed as an English app, but during localization it became necessary to find a Unicode font capable of displaying Asian characters. The original application implementation uses four fonts to accommodate various permutations of character accent. Bold, Bold, Italic, Italic, and Normal are all supplied through their respective Arial fonts in the Arial family.

Problem:

When trying to compile a font like the one that can be used for bold, italic and bold italic through something like (yes, this is not ideal, it was just a test to see if this could be done):

@font-face { src:url("/fonts/ArialUnicode.ttf"); 
             fontFamily: myFamily;
             fontWeight: normal;
             fontStyle: normal;
             advancedAntiAliasing: true; }

@font-face { src:url("/fonts/ArialUnicode.ttf"); 
             fontFamily: myFamily;
             fontWeight: bold;
             fontStyle: normal;
             advancedAntiAliasing: true; }

etc.

      

        
        
        
      

    

The problem is when compiling the Flex application it becomes unstable and the following error message appears:

[ERROR] /dirpath/Style.css:[49,-1] exception during transcoding: Font for alias 'myFont' with italic style was not found at: file:/dirpath/fonts/ArialUnicode.ttf

So some research has found that since Unicode does not support italic or bold, that when the Flex compiler tries to embed a font, it becomes unhappy because it cannot find a font in the specified location that will satisfy the css requirement.

Now that the font-face declaration falls back to its simplest form:

@font-face { src:url("/fonts/ArialUnicode.ttf"); 
             fontFamily: myFamily;
             fontWeight: normal;
             fontStyle: normal;
             advancedAntiAliasing: true; }

      

        
        
        
      

    

everything compiles fine and the application displays all normal weight, normal Asian character style. However, when displaying things that should appear in bold or italicized in a stylesheet, a window pops up meaning there is no embedded font or any system font that can display that character in those styles.

Now here's where it gets weird.

If the same Unicode font is installed on the system, it starts displaying Asian characters in bold and italic. It doesn't make sense as the Bold and Italic characters are not in the font as shown when Flex tried to embed that font to satisfy those css styles above. However, it is obvious that this font is used to display bold and italic characters, since before they were only short, before it was installed as a system font. Is this some kind of flash voodoo? And if so, I can programmatically invoke the mentioned voodoo as I cannot rely on the user to log out and get the Unicode font installed on their system.

Edit: Here's some more information that might clarify the issue.

My question is not how do we make multiple facets and weights for roman characters, this is How Flex applies bold and italic to the system font. Especially when it says that this font doesn't support those when trying to insert this font".

The steps to make the problem reproducible are as follows:

• Paste only MS Arial Unicode into the application and deploy it.
• On a new Windows 2003 machine, open Firefox and select Japanese.
• Go to the app url and look at the fields that should be in bold and italic.
• Now exit Firefox. Install MS Arial Unicode font on Windows 2003 system.
• Open Firefox and try again. Areas that used to be boxes are now in bold / bold italic / italic Japanese characters.

This is not how to fix this problem. There are many viable solutions. However, I would like to know how Flex will apply bold and italic to a font that it says does not support bold or italic.

Thanks, S