11 Replies Latest reply on Apr 28, 2010 10:32 AM by chanson78

    In Flex, why does an embedded font, behave differently from the same font installed in the system?

    chanson78

      Scenario:

       

      Flex application utilizing an @font-face declaration for embedding the font. (Embedded fonts are required to be able to rotate text.)

       

      The application was originally developed as an English application, but during localization it became necessary to locate a unicode font capable of displaying Asian characters.  The original implementation of the application uses four fonts to satisfy the various permutations of character emphasis.  Bold, Bold Italic, Italic and Normal are all supplied through the corresponding Arial fonts in the Arial family.

       

      Problem:

       

      When trying to compile in the font as one that could be used for the bold, italic, and bold italic through something like (yes its not ideal, this was just a test to see if it 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 that when compiling the application Flex gets cranky and gives the following error message:

       

      [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 with some investigation it was determined that since Unicode supports neither Italics nor Bold, that when the Flex compiler attempts to embed the font, it gets unhappy as it cannot locate a font at the specified location that will satisfy the css requirement.

       

      Now when the font-face declaration is taken back to its simplest form of:

       

          @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 style Asian characters fine.  However when displaying things that are to be displayed in Bold or Italic in the style sheet, a box appears denoting that there is no embedded font nor any system font that can render that character in those styles.

       

      Now here is where it gets weird.

       

      If the exact same Unicode font is installed onto the system, it begins displaying the Asian characters in bold and italic.  This makes no sense as the Bold and Italic characters are not in the font as demonstrated when Flex tried to embed that font to satisfy those css styles above.  Yet it is evident that this font is being utilized to display the bold and italic characters as before they were just boxes before it was installed as a system font.  Is this some kind of Flex voodoo? And if so is there some way I can programmatically invoke it as I cannot rely on the user having to go out and get the unicode font installed on their system.

       

      Thanks,

      C