Flex font rendering differences from 4.1 to 4.5

Question

I'm currently upgrading an app from Flex 4.1 to 4.5

We've noticed that the Arial font is rendered differently between the two versions when used at small sizes.

Here's a simple app example:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        @font-face { 
            src: url("/assets/fonts/ARIAL.ttf"); 
            fontFamily: arial; 
            embedAsCFF: true; 
        }
        @font-face { 
            src: url("/assets/fonts/ARIALBD.ttf"); 
            fontFamily: arial; 
            embedAsCFF: true; 
            font-weight: bold;
        }
        global
        {
            font-family: arial;
        }
    </fx:Style>
    <s:Label text="Hello world" fontWeight="bold" x="20" y="20"  />
</s:Application>

When run against the 2 different sdks, here's an image of the font rendering we get:

Note that in 4.5 the font looks slightly squashed.

What's the cause of this, and how do we resolve it?

Answer 1

My best guess is that it's related to the changes that were made to support fonts on handheld devices. To fix it you may have to play around with your style sheet settings a bit.

CSS Media Queries
You can now use @media rules in your style sheets to filter CSS rules based on the device’s DPI classification. There are two properties you can filter on currently, os-platform and application-dpi. Here’s an example of filtering on them to set a button font for instance (from Adobe’s prerelease docs):

@media (os-platform: "Android") and (application-dpi: 240) {
s|Button {
     fontSize: 10;
}