3 Replies Latest reply on Sep 13, 2011 5:09 PM by Flex harUI

    Embedded fonts display differently in mx and spark

    theMadPenguin

      Hi there,

      My apologies if this is an known issue but I have not been able to find any posts describing this problem. As the title of the discussion describes the problem I see is that when embedding the same font for spark and mx components they display differently to the point of making the application look sloppy. I created a small app to illustrate the problem:

       

      <?xml version="1.0" encoding="utf-8"?>

       

      <s:Application

          minWidth="955" minHeight="600"

          xmlns:fx="http://ns.adobe.com/mxml/2009"

          xmlns:s="library://ns.adobe.com/flex/spark"

          xmlns:mx="library://ns.adobe.com/flex/mx">

       

          <fx:Declarations>

              <!-- Place non-visual elements (e.g., services, value objects) here -->

          </fx:Declarations>


          <fx:Style>

      @namespace s "library://ns.adobe.com/flex/spark";

      @namespace mx "library://ns.adobe.com/flex/mx";

       

       

      @font-face

      {

      src:url("arial.ttf");

      fontFamily: arialCFF;

      embedAsCFF: true;

      }

       

       

      @font-face {

      src:url("arial.ttf");

      fontFamily: arialNoCFF;

      embedAsCFF: false;

      advancedAntiAliasing: false;

      }

       

       

      s|Label

      {

      fontFamily: arialCFF;

      fontSize: 20px;

      }

       

       

      mx|Label

      {

      fontFamily: arialNoCFF;

      fontSize: 20px;

      }

      </fx:Style>


          <s:layout>

              <s:VerticalLayout

                  paddingLeft="10"

                  paddingTop="10"/>

          </s:layout>


          <s:Label text="This is a label that uses spark"/>


          <mx:Label text="This is a label that uses mx"/>


      </s:Application>

       

       

      I used the Arial.ttf font I found in my mac, though I have also tried with courier new and even the myriad web pro provided with an example in the SDK. Also I have tried with SDKs 4.1, 4.5 and 4.5.1. I have played with the value of advancedAniAliasing as well. Regardless of the combination I will still see differences such as this:

       

      fonts.png

      Is this a known issue? Any solutions at hand?

       

      Thanks in advance for the help!!