Small text in spark label looks bloor

Question

I spent a few days to find solution to solve this problem. Before using spark label, im use mx label, and text with small size (textSize:11) looks clear. After change component on spark label, text looks blurry, not soo clear. Im embed font from my system. Font name is Tahoma. Changing values like cffHinting dont give me any result. I'm use flashDevelop, but same result in IDEA and FlashBuilder. I cant post screenShot bicouse of my small reputation level. Help me please find right solution.

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@font-face{
    src:url("Tahoma.ttf");
    font-family:TahomaS;
    embedAsCFF: true;
}

@font-face{
    src:url("Tahoma.ttf");
    font-family:TahomaMX;
    embedAsCFF: false;
}

s|Label
{
    font-family:TahomaS;
    font-size:11;
    color: #5c5c5c;
}

mx|Label
{
    font-family:TahomaMX;
    font-size:11;
    color: #5c5c5c;
}

And code from Main.mxml:

<?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">

   <fx:Style source="Fonts.css"/>

   <s:Label x="50" y="50" text="XYZ Corporation Directory" cffHinting="none" />
   <mx:Label x="50" y="65" text="XYZ Corporation Directory" />

</s:Application>

Answer 1

I think that blurry effect and size label text change is because that your flex compiler can't locate the specified font, so it use the default font.

1 - use local() to locate local font like this :

   @font-face {
        src: local("Tahoma");
        fontFamily: "TahomaS";
        embedAsCFF: true;
    }

    s|Label {
        fontFamily: "TahomaS";
        fontSize: 44;
    }

2 - create a flex config file local-font-config.xml in your src/ folder and specify your font path :

<?xml version="1.0" encoding="utf-8"?>
<flex-config>
    <compiler>
        <fonts>
            <local-font-paths>
                <path-element>/System/Library/Fonts/</path-element>
            </local-font-paths>
        </fonts>
    </compiler>
</flex-config>

3- give to your flex compiler the location of your config file :

-load-config+=local-font-config.xml

... i think that the best way to use fonts is to use it as a project resources, so you avoid additional configurations Just create an src/assets/fonts folder in your project and put in your fonts

and in your css file just do this :

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

  s|Label {
        fontFamily: "TahomaS";
        fontSize: 44;
     }