встроенный шрифт не будет работать в Flex Mobile ActionBar

Question

У меня есть несколько встроенных шрифтов, и я использую их в своем мобильном приложении, и они все работают, кроме тех, которые я пытаюсь использовать для «ActionBar».Они работают везде, и замена "Comic Sans MS" на "titleCGF" заменяет его на Comic Sans.Так почему же он не работает с моим собственным fontFamily?

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @font-face {
            src: url("assets/Comic_Book.ttf");
            fontFamily: comic;
            embedAsCFF: false;
        }
/******************************
        @font-face{
            src: url("assets/CGF_Locust_Resistance.ttf");
            fontFamily: titleCGF;
            embedAsCFF: false;
        }
        @font-face{
            src: url("assets/CGF_Locust_Resistance.ttf");
            fontFamily: titleCGF;
            embedAsCFF: true;
        }
**********************************/
        .titleStyle{
            fontFamily: titleCGF;
            color: #FFFFFF;
        }
        .comicMessage{
            fontFamily: titleCGF;
            color: #838689;
            fontSize: 14;
        }
        s|IconItemRenderer{
            fontFamily: comic;
            color: #FEBA03;
            fontSize:18;
        }
        s|ActionBar{
            defaultButtonAppearance: beveled;
            accentColor: #FEBA03;
        }
        s|ActionBar #titleDisplay{
            fontFamily: "titleCGF";

        }
    </fx:Style>

вот что я получаю:

РЕДАКТИРОВАТЬ: я пытался сделать свой собственныйСкин и часть предварительно написанного кода:

<!-- SkinParts
name=titleGroup, type=spark.components.Group, required=false
name=actionGroup, type=spark.components.Group, required=false
name=navigationGroup, type=spark.components.Group, required=false
name=titleDisplay, type=spark.core.IDisplayText, required=false
-->

, когда я пытаюсь определить что-то вроде первых трех, <s:Group .../>, все работает нормально.Но ничего не появляется для spark.core.IDisplayText.то есть <s:IDisplayText .../> ничего не дает ...

Answer 1

Вот пример встраивания шрифтов дважды, один раз с embedAsCFF = false и снова с использованием embedAsCFF = true. Посмотреть полное объяснение на http://blogs.adobe.com/jasonsj/2011/08/embedding-fonts-in-flex-mobile-projects.html.

Редактировать 1: исправлено имя файла шрифта

/* StyleableTextField, regular */
@font-face {
    src: url("assets/COMIC.TTF");
    fontFamily: "comic";
    embedAsCFF: false;
}

/* StyleableTextField, bold */
@font-face {
    src: url("assets/COMICBD.TTF");
    fontFamily: "comic";
    fontWeight: bold;
    embedAsCFF: false;
}

/* Label, regular */
@font-face {
    src: url("assets/COMIC.TTF");
    fontFamily: "comicCFF";
    embedAsCFF: true;
}

/* Label, bold */
@font-face {
    src: url("assets/COMICBD.TTF");
    fontFamily: "comicCFF";
    fontWeight: bold;
    embedAsCFF: true;
}

s|Label
{
    fontFamily: "comicCFF";
}

s|ActionBar
{
    fontFamily: "comic";
}

s|LabelItemRenderer
{
    fontFamily: "comic";
}

Answer 2

У меня была та же проблема для mx buton в flex4, что я упоминал, что вес шрифта в обоих местах выделен жирным шрифтом. Тогда это заработало.

<fx:Style>

@font-face
        { 
            src: url("assets/fonts/Quasari1.ttf");
            fontFamily: msd;
            embedAsCFF: true; 
            fontWeight : bold;

        }
mx|Button{   
            fontFamily: msd;
            fontSize:22;
            color: red;
            fontWeight : bold;
            textFieldClass: ClassReference("mx.core.UIFTETextField"); 
        } 
</fx:Style>
<mx:Button label="submit" >

Answer 3

Вот таблица стилей, которую я использую для стилизации мобильных приложений (панель действий, TextAreas, кнопки и ярлыки.) Она составлена ​​из блогов и сообщений на форуме.

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

@font-face
{ 
    src: url("styles/acmesab.TTF"); 
    fontFamily: comicStrip; 
    embedAsCFF: false; 
}

@font-face
{ 
    src: url("styles/acmesab.TTF"); 
    fontFamily: comicStrip2; 
    embedAsCFF: true; 
}

s|ActionBar
{
    chromeColor: #EEEEEE;
    titleAlign: center;
    defaultButtonAppearance: beveled;
}

s|ActionBar #titleDisplay
{
    fontFamily: comicStrip;
    fontWeight: normal;
    color: #000000;
    textShadowColor: #FFFFFF;
}

s|ActionBar.beveled s|Group#actionGroup s|Button 
{
    fontFamily: comicStrip;
    fontWeight: normal;
    color: #000000;
    textShadowColor: #FFFFFF;
}

s|ActionBar.beveled s|Group#navigationGroup s|Button 
{
    fontFamily: comicStrip;
    fontWeight: normal;
    color: #000000;
    textShadowColor: #FFFFFF;
}

.textArea
{
    fontFamily: comicStrip;
    fontSize: 14;
    skinClass: ClassReference("spark.skins.mobile.TextAreaSkin");
}

.button
{
    fontFamily: comicStrip;
    fontSize: 14;
    fontWeight: normal;
    skinClass: ClassReference("spark.skins.mobile.ButtonSkin");
}

.label
{
    fontFamily: comicStrip2;
    fontSize: 14;
    fontWeight: normal;
}

Answer 4

Попробуйте добавить это к тегу ActionBar, чтобы удалить выделение жирным шрифтом:

creationComplete="event.currentTarget.titleDisplay.setStyle('fontWeight', 'normal')"

Если это сработает, то вы можете попробовать лучшее решение, например расширение класса ActionBar или встраивание шрифта в жирный шрифт.а также стиль.

Answer 5

Вставить отдельную копию шрифта с помощью embedAsCFF: true; и примените это к этикетке в коже, и это будет работать. Я не могу вспомнить причину этого от руки (дедлайн = wtfever), но я знаю, что это решило именно эту проблему для меня.

Правдивая история. =)

P.s. убедитесь, что жирный шрифт / курсив также верны в стиле.

Answer 6

Я знаю, что у Button на Flex 3 была эта проблема, потому что шрифт по умолчанию выделен жирным шрифтом, и многие не думали вставлять жирный шрифт. Возможно ли, что в стандартном скине панели действий по умолчанию используется жирный шрифт / курсив / что-то еще, и вам нужно либо создать свой собственный скин, либо встроить оба?

=========== Новые материалы ниже ==============

У меня еще нет установленного FB 4.5 на этом компьютере, но я думаю, что вы можете щелкнуть правой кнопкой мыши в проводнике пакетов и выбрать New> Mobile As3 skin (или слова на этот счет). Диалог спросит вас, какой компонент вы хотите выбрать, и вы должны найти панель действий. Я этого не делал (поскольку мне пока не требовалась разработка для мобильных устройств), но он, вероятно, создаст файл as3 с большей частью того, что вам нужно для начала.

Вы, вероятно, найдете код, который нужно отредактировать, в updateDisplayList, и он будет ссылаться на titleDisplay.

НТН;

Amy