Flex - Visible shadings in text color

Question

Hi!

I have an application with a css for skinning. I noticed that some texts are not displayed as they should regarding the colors. Here's an image to give you a better idea of the issue:

The texts should be kinda grey. The color is correctly displayed on the top part of the text, but the bottom is kind of faded. The same goes for "Europe". The text is not very clear.

Here is the CSS code, just in case:

.HPLabels
{
 padding-bottom: 0;
 padding-top: 2;
 fontFamily: Ericson;
 fontSize: 9;
 color: #58585A;
 fontWeight: normal;
 font-anti-alias-type: advanced;
 fontSharpness: -100;
}

And here is the mxml code:

<mx:Label text="..." width="20%" styleName="HPLabels"/>

Would anyone have an idea of what is going wrong?

Answer 1

In Flex some styles from the parent of a widget affect its children. Take a look at the CSS for the object that contains your label.

Answer 2

Your font-sharpness seems inappropriate for that font as well - does setting it to 0 fix the problem? Also, at what size did you embed the "Ericson" font? Since it's a pixel font - you may have to make sure it's embeded at the size you're using it, the font outlines may differ from size to size and cause this blurriness you're seeing.