Question

我正在尝试将自定义字体嵌入到我的移动应用的所有元素中仅更改操作栏和按钮，同时 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设备上运行良好。

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

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

Flex 4.5嵌入字体不适用于选项卡和列表项

2 个答案: