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

我已经尝试过其他 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 回答