嵌入式字体在Flex移动版的ActionBar中无法使用

Question

我在我的移动应用程序中嵌入了几个字体，并且它们都可以使用，除了我尝试用于“ActionBar”的那些字体。它们在其他地方都可以使用，将"titleCGF"替换为"Comic Sans MS"会将其更改为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 .../> 没有任何输出...

- jlehenbauer

---

我给你点赞。我的一个客户在使用Flex Mobile时遇到了类似的字体问题，但我从未能够准确追踪到问题所在；但似乎有些组件会选择嵌入字体，而其他组件则不会。我相信我们的自定义组件从Flex Framework继承了这些问题，所以我猜你也遇到了类似的问题。 - JeffryHouser

为什么你将actionbar的fontFamily用引号括起来了？此外，你可以尝试在global选择器下将该字体作为整个应用程序的默认字体，以查看是否有效。如果不行，建议检查ActionBar的代码或皮肤。 - J_A_X

由于某些原因，将默认字体应用于ActionBar的唯一方法是将其用引号括起来。我刚刚尝试过，通过Flex添加了字体，但仍然没有运气 :( - jlehenbauer

我遇到了这个问题，最终找到了一个解决方法，我会试着找出来的 - 但我知道它是可以做到的！ - Nate

当我在数值中有多个字体时，例如“fontFamily：Courier，Courier New，Andalus;”时，我遇到了一些问题。它在某些设备上无法正常工作。我尝试给一些添加引号，然后全部添加引号，然后删除带空格的字体，但结果不一致。最后，我进行了多个声明，.myStyle { font-family:Andalus } .myStyle { font-family:Courier New } .myStyle {font-family: Courier } 一个接一个地进行。这似乎有效。顺序很重要。最后一个声明的获胜。希望这有意义并能帮助某人。当字体名称有空格时，引号也可能很重要，但我不确定。 - 1.21 gigawatts

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

- Jason San Jose

---

关键是确保每个 fontWeight 都指定相同。默认值为 bold，而我的字体是 normal。我添加了这个，问题就解决了！谢谢！！ - jlehenbauer

你能否重载字体族名称？例如，对于embeddedAsCFF为true和false的声明，你是否可以都使用“comic”？ - 1.21 gigawatts

Answer 2

我在Flex4中遇到了与mx按钮相同的问题，我所做的是在两个位置上都将字体重量设置为粗体。然后它就可以正常工作了。

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

- nantitv

Answer 3

尝试将以下内容添加到ActionBar标签中，以去除粗体样式：

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

如果这个方法可行的话，你可以尝试更好的解决方案，比如扩展ActionBar类或者将字体嵌入到粗体样式中。

- Sean Fujiwara

---

这没有任何效果:/ 我也尝试在<fx:Style>标签中将fontWeight设置为正常，但也没有效果。 - jlehenbauer

好的，请试一下。移除 embedAsCFF: true 的 font-face 块。然后，在 s|ActionBar #titleDisplay 块中添加 fontWeight: normal。 - Sean Fujiwara

Answer 4

这是我用来为移动应用程序（操作栏、文本区域、按钮和标签）设置样式的样式表。它是从博客和论坛帖子中编译而来的。

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

- Jeff Spicer

Answer 5

我知道Flex 3上的按钮存在这个问题，因为它的默认字体是粗体，许多人没有考虑嵌入字体的粗体版本。可能默认的操作栏移动皮肤使用了粗体/斜体/其他样式，你需要制作自己的皮肤或者嵌入两种字体。

===========以下是新内容==============

我还没有在这台机器上安装FB 4.5，但我认为你可以在包资源管理器中右键单击，然后选择New>Mobile As3 skin（或类似的词语）。对话框会询问你要选择哪个组件，你应该浏览操作栏。我还没有做过这个（因为我还没有需要移动开发），但它可能会创建一个as3文件，其中包含你需要开始的大部分内容。

你可能会发现需要编辑的代码在updateDisplayList中，并且它将引用titleDisplay。

希望有所帮助；

Amy

- Amy Blankenship

---

不行。我已确认它被正确嵌入，但仍然没有运气 :/ 我该如何构建自己的皮肤？ - jlehenbauer

我做了这个，我觉得我可能已经接近问题了。它为我构建了一个基本文件（.mxml格式），并包含了以下内容：<!-- 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 .../> 时，一切都很好。但是对于 <s:IDisplayText .../> 或 <s:core .../>，没有任何显示。 - jlehenbauer

IDisplayText是一个接口，它允许您更自由地选择要使用的组件。我相信Label实现了IDisplayText，并且可能还有RichEditableText。请查看文档。 - Amy Blankenship

Answer 6

将字体的单独副本嵌入并使用embedAsCFF: true;应用于皮肤中的标签，它就可以工作了。我手头上记不起来原因了（截止日期=无所谓），但我知道这对我解决了这个确切的问题。

真实的故事。 =)

另外，请确保样式中的粗体/斜体是正确的。

- Nate

---

我修改了上面的代码以反映您建议的更改，但它仍然不会显示:/ 我做错了什么吗？ - jlehenbauer