apache-flex - 埋め込みフォントが Flex モバイル ActionBar で機能しない

Question

いくつかのフォントが埋め込まれており、それらをモバイルアプリケーションで使用しています。「ActionBar」に使用しようとしているものを除いて、それらはすべて機能しています。それらは他の場所でも機能し、代わりに Comic Sans"Comic Sans MS"に変更します。"titleCGF"では、なぜ私のカスタム 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>

これは私が得るものです:

FontView

編集:私は自分のスキンを作ろうとしましたが、事前に作成されたコードの一部は次のとおりです:

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

最初の 3 つのようなものを定義しようとすると、<s:Group .../>正常に動作します。しかし、spark.core.IDisplayText には何も表示されません。つまり、<s:IDisplayText .../>何も得られません...

score 8 · Accepted Answer

これはフォントを 2 回埋め込む例です。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";
}

score 2 · Accepted Answer

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

score 0 · Accepted Answer

これを ActionBar タグに追加して、太字のスタイルを削除してみてください。

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

それが機能する場合は、ActionBar クラスを拡張するか、フォントを太字スタイルに埋め込むなど、より良い解決策を試すことができます。

score 0 · Accepted Answer

EmbedAsCFF: true; を使用して、フォントの別のコピーを埋め込みます。それをスキンのラベルに適用すると機能します。私はその理由を思い出すことはできませんが (deadline=wtfever)、これでこの正確な問題が解決したことはわかっています。

実話。=)

Ps 太字/斜体がスタイルでも正しいことを確認してください。

score 0 · Accepted Answer

Flex 3 の Button にこの問題があったことは知っています。デフォルトのフォントが太字であり、多くの人が太字バージョンのフォントを埋め込むことを考えていなかったためです。デフォルトのアクションバーモバイルスキンがボールド/イタリック/その他を使用していて、独自のスキンを作成するか、両方を埋め込む必要がある可能性はありますか?

===========以下の新しいもの==============

このマシンにはまだ FB 4.5 がインストールされていませんが、パッケージエクスプローラーを右クリックして、[新規] > [モバイル As3 スキン] (またはその旨の言葉) を選択できると思います。どのコンポーネントを選択するかをダイアログが尋ねてくるので、アクションバーを参照する必要があります。私はまだこれを行っていませんが (モバイル開発はまだ必要ではないため)、開始するために必要なもののほとんどを含む as3 ファイルがおそらく作成されます。

おそらく updateDisplayList で編集する必要があるコードを見つけることができ、それは titleDisplay を参照します。

HTH;

エイミー

score 0 · Accepted Answer

これは、モバイルアプリ (アクションバー、テキストエリア、ボタン、およびラベル) のスタイルを設定するために使用するスタイルシートです。ブログやフォーラムの投稿からコンパイルされています。

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

apache-flex - 埋め込みフォントが Flex モバイル ActionBar で機能しない

6 に答える 6

Related

Reference