开发者

Flex font rendering differences from 4.1 to 4.5

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; 
            embedAsCF开发者_高级运维F: 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:

Flex font rendering differences from 4.1 to 4.5

Note that in 4.5 the font looks slightly squashed.

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


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;
}


To temporally fix this just specify SWF version 10 on the flex-config.xml

look for <swf-version>11</swf-version> and make that a 10

(the "target-player" tag remains as 10.2.0)

This config will allow you to use the 10.2 new API but I guess it will miss the Hardware Optimizations (maybe no StageVideo... warning: I am not sure and haven't tested yet. The only thing I did was to check it the 10.2 specific methods was there, like "requestSoftKeyboard")

I guess this issue has something to do with the new "Sub-pixel Text Rendering" Adobe promoted on 10.2 release OR maybe the new player is just rendering the text differently.

By the way, this issue is really ugly, small fonts gets blurry and medium size fonts gets noticeably squashed!

Any real fix, that allow us to target SWF 11, please let us know.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜