Встроенный шрифт выглядит иначе, чем предполагалось

Question

Когда для метки используется встроенный шрифт, он выглядит правильно, но когда тот же шрифт используется для комбинированного списка, шрифт выбранного элемента выглядит иначе, чем выпадающий и шрифт метки.

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

Почему они выглядят иначе (кроме размера и цвета)?

Answer 1

Вы встраиваете шрифт и указываете, что он должен использоваться всякий раз, когда fontWeight нормальный. Вот что означает стиль fontWeight: normal.

Однако метки в комбинированных полях по умолчанию выделены жирным шрифтом (это делается в среде Flex), поэтому они не будут использовать встроенный шрифт.

Исправление: Либо создайте еще одну копию вашей декларации @font-face и сделайте ее fontWeight: bold, либо укажите fontWeight: normal в своем правиле .comboBox.

Answer 2

Вам необходимо создать «полное» семейство шрифтов. Для этого создайте по одному «@ font-face» для каждого из ожидаемых граней семейства: обычное, полужирное, курсив и полужирное. Убедитесь, что каждое определение «@ font-face» использует одно и то же имя в своем атрибуте «fontFamily». Документы об этом ясны, но многословны.

г. Petrowski прав в том, что фреймворк Flex будет выбирать, какую грань он использует, в зависимости от контекста, но здесь необходимо упомянуть, что обычно файл ttf / otf включает только одну грань шрифта. Так что вам, вероятно, понадобятся другие ttf / otf, на которые ссылается ваш атрибут 'src'.