如何在Flex移动项目的Spark皮肤中使用CSS嵌入式字体？

Question

以下是一个简短的示例，用于描述问题。使用以下文件（和OpenSans字体）设置一个常规的Flex移动项目。

Main.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>

style.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"/>

- Holger Stitz

Answer 1

我不确定原因，但是尝试在您的CSS中添加fontWeight: normal;，这将有所帮助。我是通过将字体族更改为Verdana并发现按钮标签变为粗体后得出了这个结论。

- Art

---

你说得对。即使嵌入的字体是粗体风格，我也必须明确添加 fontWeight: bold;。对于斜体字样式，您需要添加 fontStyle: italic;。 - Holger Stitz

这是因为fontWeight作为字体的分类器或者说子类型起作用。 - jediz

谢谢。我不得不在字体和单独的“styleName”中添加“fontWeight: normal”。 - Tim B James

Answer 2

对于按钮，您应该使用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;
}

- Antonos

---

我的测试用例中这个不起作用——按钮仍然具有默认字体而不是OpenSans。 - Holger Stitz