Flex 4.5 嵌入字体不适用于标签栏和列表项答案

【问题标题】：Flex 4.5 embedding font not working for tabbars and list itemsFlex 4.5 嵌入字体不适用于标签栏和列表项
【发布时间】：2014-01-01 03:32:21
【问题描述】：

我正在尝试将自定义字体嵌入到我的移动应用程序的所有元素中。
只有 Action Bar 和 Buttons 改变了，而 Tabbars 和 ListItems 没有改变。

这是我的 style.css 代码

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

/* StyleableTextField, regular */
@font-face {
    src: url("assets/fonts/Roboto-Light.ttf");
    fontFamily: "robotoLight";
    fontWeight: bold;
    embedAsCFF: false;
}

/* Label, regular */
@font-face {
    src: url("assets/fonts/Roboto-Light.ttf");
    fontFamily: "robotoLightCFF";
    fontWeight: normal;
    embedAsCFF: true;
}

s|Label {fontFamily: "robotoLightCFF";}
s|ActionBar {fontFamily: "robotoLight";}
s|LabelItemRenderer {fontFamily: "robotoLight";}
s|Button {fontFamily: "robotoLight";}
s|TabbedViewNavigator #tabBar {fontFamily: "robotoLight";}
s|TextInput {fontFamily: "robotoLight";}
s|View {fontFamily: "robotoLight";}

global
{
    text-align: left;
    content-background-color: #FFFFFF;
    content-background-alpha: 0.59;
    fontFamily: "robotoLight";
}

/** this is the bar the top of the app **/
s|ActionBar{
    chromeColor:#4D99E0; /* more like background color */
    titleAlign:center; 
    textShadowAlpha: 0;
}

/* This is the styling of the tabbed navigator */
s|TabbedViewNavigator #tabBar { 
    chromeColor: #4D99E0; /* color of background on buttons */
    color: #ffffff; /* color of text on tab names */
}

.playButton,.pauseButton,.resumeButton,.initButton {
    chromeColor: #4D99E0;
    color: #fff;
}

下面是它的屏幕截图： screenshot http://samzkingdom.com/wp-content/uploads/2014/01/Capture.png

我该怎么做？还是我做错了什么？

[编辑]

我刚刚在我的桌面上的模拟器上测试完全是我的错误。它可以在 Android 设备上完美运行。

【问题讨论】：

标签： apache-flex mobile flex4.5 flexbuilder

【解决方案1】：

试试这个选项卡导航器。换个字体就好了..

.tabNavigator
{
font-family: "Helvetica Neue";
font-weight:normal;
horizontal-gap:1; 
tab-style-name:"myTabs";
corner-radius:0;
selected-tab-text-style-name: "myselectedTabs";
border-color:#D6D6D6;
}

.myTabs
{
font-size:13;
font-family: "Helvetica Neue";
font-weight:normal;
fill-colors:"#e5e5e5","#f6f6f6";
fill-alphas:1,1; 
color:#000000;
corner-radius:0;
text-selected-color:#000000;
text-roll-over-color:#000000;
border-color:#D6D6D6;
 }

.myselectedTabs
{
font-size:13;
font-family: "Helvetica Neue";
font-weight:normal;
fill-colors:"#FFFFFF","#FFFFFF";
fill-alphas:1,1;
color:#0d7dbd;
corner-radius:0;
text-selected-color:#0d7dbd;
text-roll-over-color:#0d7dbd;
}

【讨论】：

【解决方案2】：

对于 StyleableTextField（用于移动 Flex 中的许多 UI 元素，例如在 ListItemRenderer 中），您应该使用 embedAsCFF: false;，如 Adobe 的博客 Embedding Fonts in Flex Mobile Projects 中所述

例如以下对我有用（对于列表）：

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

s|ActionBar {
    chromeColor: #0066CC;
    color: #FFFFFF;
    titleAlign: center;
    /* textShadowAlpha: 0; */
    textShadowColor: #000000;
}

@font-face { 
    src: url("/assets/fonts/arial.ttf"); 
    fontFamily: embFont;
    embedAsCFF: false; /* required for StyleableTextField */
    unicodeRange:
        U+0020-U+0040, /* Punctuation, Numbers */
        U+2660-U+2666, /* Card suits */
        U+0041-U+005A, /* Upper-Case A-Z */
        U+0061-U+007A, /* Lower-Case a-z */
        U+0410-U+0451; /* Cyrillic */   
}

s|LabelItemRenderer {
    fontFamily: embFont;
}

【讨论】：