CODEWITHSUNDEEP
apache-flexfontsflex-actionbar
jlehenbauer
jlehenbauer

Reputation: 599

embedded font won't work in Flex mobile ActionBar

i've got a few fonts embedded and am using them in my mobile application, and they are all working, except for the ones i try to use for the "ActionBar". They work everywhere else, and substituting "Comic Sans MS" for "titleCGF" changes it to Comic Sans. So why won't it work with my custom 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>

this is what i get:

FontView

EDIT: i tried to make my own skin, and part of the pre-written code is this:

<!-- 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
-->

when i try to define something like the first three, <s:Group .../>, it works fine. But nothing shows up for spark.core.IDisplayText. ie, <s:IDisplayText .../> yeilds nothing...

Upvotes: 5

Views: 4068

Answers (6)

Jeff Spicer
Jeff Spicer

Reputation: 51

Here's a stylesheet that i use to style mobile apps (Action Bar, TextAreas, Buttons, and Labels.) It's compiled from blogs and forum posts.

/* 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;
}

Upvotes: 0

nantitv
nantitv

Reputation: 3733

I had the same problem for mx buton in flex4 what I did was mentioned font weight in both place as bold. Then it got working.

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

Upvotes: 2

Jason San Jose
Jason San Jose

Reputation: 111

Here's an example of embedding fonts twice, once with embedAsCFF=false and again using embedAsCFF=true. View the full explanation at http://blogs.adobe.com/jasonsj/2011/08/embedding-fonts-in-flex-mobile-projects.html.

Edit 1: Fixed font file name

/* 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";
}

Upvotes: 7

Sean Fujiwara
Sean Fujiwara

Reputation: 4546

Try adding this to the ActionBar tag, to remove the bold styling:

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

If that works, then you can try a better solution like extending the ActionBar class, or embedding the font in a bold style as well.

Upvotes: 0

Nate
Nate

Reputation: 2881

Embed a separate copy of the font with embedAsCFF: true; and apply that to the label in the skin and it will work. I can't remember the reasoning for it off hand (deadline=wtfever), but I know this solved this exact issue for me.

True story. =)

P.s. make sure the bold / italics are correct in the style as well.

Upvotes: 0

Amy Blankenship
Amy Blankenship

Reputation: 6961

I know that Button on Flex 3 had this issue, because its default font was bold, and many people did not think to embed the bold version of the font. Is it possible that the default action bar mobile skin uses bold/italic/something else and that you need to either make your own skin or embed both?

===========new stuff below==============

I don't have FB 4.5 installed on this machine yet, but I think you can right click in the package explorer and select New>Mobile As3 skin (or words to that effect). The dialog will ask you what component you want to select, and you should browse for action bar. I haven't done this (as I haven't needed mobile development yet), but it will probably create an as3 file with most of what you need to get started.

You'll probably find the code you need to edit in updateDisplayList and it will refer to titleDisplay.

HTH;

Amy

Upvotes: 0

Related Questions