Embedded font looks different than supposed to

When an embedded font is used for a label it looks correct, but when the same font is used for a combobox, the selected item font looks different from the dropdown and label font.

@font-face
{
开发者_运维知识库    src:url("/assets/fonts/Helvetica.TTF");
    fontFamily: "Helvetica Neue Bold Condensed";
    fontStyle:   normal;
    fontWeight: normal;
}

.comboBox
{
    fontFamily: "Helvetica Neue Bold Condensed"; 
    fontSize:   11;
    color:     #666666;
}

.label
{
    fontFamily: "Helvetica Neue Bold Condensed";
    fontSize:   12;
    color:     #CCCCCC; 
}

Why would these look different (besides the size and color)?

You are embedding a font and specifying that it should be used whenever the fontWeight is normal. This is what the fontWeight: normal style means.

However, the labels in combo boxes are bold by default (this is done by the Flex framework), so they will not use the embedded font.

To fix: Either create another copy of your @font-face declaration and make that one fontWeight: bold, or specify fontWeight: normal on your .comboBox rule.

You need to create a "full" font family. To do this, create one "@font-face" for each of the expected faces of the family: normal, bold, italic and bold-italic. Make sure each "@font-face" definition uses the same name in its "fontFamily" attribute. The docs are clear on this, but verbose.

Mr. Petrowski is correct that the Flex framework will choose which face it uses depending on context, but the thing that needs to be called out here is that it's common that a ttf/otf file only includes one font face. So you will likely need different ttf/otf referenced in your 'src' attribute.