Migrating Flex 3.x application to Flex 4.5 – Tip No. 4

The next tip refers to fonts embedded either with CSS or style tag.

The format we know and used in Flex 3.x was:

    @font-face {
        font-family: myFont;
        src:url("../assets/fonts/arial.ttf");
        advancedAntiAliasing: true;
    }

That worked with Flex 3.5, but with Flex 4.x there are a few problems with this format.

First, we must remember that the Flash Text Engine (FTE) is now used for spark text components and when using spark text components an additional statement is required for the font to be visible. That statement is embedAsCFF and in this case should be set to true.

Second, MX text components do not use the FTE, and so when using those the statement embedAsCFF should be set to false.

This means two things:
1. The embedAsCFF is always required, only the value changes per the case.

2. If you use both MX and Spark text components that should use the same embedded font, you should embed it twice, once with embedAsCFF set to true and once with embedAsCFF set to false.

     @font-face {
        src:url("../assets/MyriadWebPro.ttf");
        fontFamily: myCFFFont;
        embedAsCFF: true;
     }

     @font-face {
        src:url("../assets/MyriadWebPro.ttf");
        fontFamily: myFontNoCFF;
        advancedAntiAliasing: true;
        embedAsCFF: false;
     }

You can also check out the links here and here with some more info.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: