3

問題を説明する短い例。次のファイル (およびOpenSans フォント)を使用して、通常の Flex モバイル プロジェクトをセットアップします。

メイン.mxml

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           applicationDPI="160">
    <s:layout><s:VerticalLayout/></s:layout>

    <fx:Style source="style.css"/>

    <s:Label text="Static Label"/>
    <s:Button label="Static Button" skinClass="MyButtonSkin"/>
</s:Application>

スタイル.css

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

@font-face {
    src: url("fonts/opensans/OpenSans-Bold.ttf");
    fontFamily: OpenSansBoldEmbedded;
    embedAsCFF: true;
}

s|Label,
s|Button
{
    fontFamily: OpenSansBoldEmbedded;
    font-lookup: embeddedCFF;
}

MyButtonSkin.mxml

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>

    <s:Label id="labelDisplay" />
</s:Skin>

その結果、単純なラベルは埋め込みフォントでスタイル設定されますが、ボタンのラベルはそうではありません。これは次のようになります: http://img813.imageshack.us/img813/44/skinningtest.png

color や font-size などの他の CSS プロパティを試してみましたが、両方で機能します。埋め込みフォントのみが Spark スキンで機能しません。

埋め込みフォントを使用してボタンのラベルのスタイルを設定するには何が欠けていますか?

解決

インポート時 (@font-face) および使用時 (.OpenSansEmbeddedBold) に属性 fontWeight および fontStyle を使用します。太字フォントを埋め込んで使用するだけでは十分ではありません。

/* Import the different font weights and styles */
@font-face {
        src: url("fonts/opensans/OpenSans-Regular.ttf");
        fontFamily: OpenSansEmbedded;
}

@font-face {
        src: url("fonts/opensans/OpenSans-Bold.ttf");
        fontFamily: OpenSansEmbedded;
        fontWeight: bold;
}

@font-face {
        src: url("fonts/opensans/OpenSans-Italic.ttf");
        fontFamily: OpenSansEmbedded;
        fontStyle: italic;
}

@font-face {
        src: url("fonts/opensans/OpenSans-BoldItalic.ttf");
        fontFamily: OpenSansEmbedded;
        fontWeight: bold;
        fontStyle: italic;
}

/* Register fonts as styleNames for further use */
.OpenSansEmbedded
{
        fontFamily: OpenSansEmbedded;
}

.OpenSansEmbeddedBold
{
        fontFamily: OpenSansEmbedded;
        fontWeight: bold;
}

.OpenSansEmbeddedItalic
{
        fontFamily: OpenSansEmbedded;
        fontStyle: italic;
}

.OpenSansEmbeddedBoldItalic
{
        fontFamily: OpenSansEmbedded;
        fontWeight: bold;
        fontStyle: italic;
}

定義されたクラスを MXML で styleName として使用する

<s:Label text="Static Label" styleName="OpenSansEmbeddedBold"/>
4

2 に答える 2

2

正確な理由はわかりませんがfontWeight: normal;、css を追加してみてください。これが役に立ちます。fontFamily を Verdana に変更し、ボタンのラベルが太字になっているのを見て、この結論に達しました。

于 2012-04-17T10:29:05.083 に答える
0

ボタンにはembedAsCFF: falseを使用する必要があります

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

@font-face {
    src: url("fonts/opensans/OpenSans-Bold.ttf");
    fontFamily: OpenSansBoldEmbedded;
    embedAsCFF: true;
}

@font-face {
    src: url("fonts/opensans/OpenSans-Bold.ttf");
    fontFamily: OpenSansBoldEmbeddedForBtn;
    embedAsCFF: false;
}

s|Label
{
    fontFamily: OpenSansBoldEmbedded;
    font-lookup: embeddedCFF;
}

s|Button
{
    fontFamily: OpenSansBoldEmbeddedForBtn;
}
于 2012-04-17T21:29:55.867 に答える