embedded font won't work in Flex mobile ActionBar

房东的猫 提交于 2019-12-04 12:06:27

问题


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:

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


回答1:


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



回答2:


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



回答3:


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




回答4:


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.




回答5:


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.




回答6:


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


来源:https://stackoverflow.com/questions/6766319/embedded-font-wont-work-in-flex-mobile-actionbar

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!