描述问题的简短示例。使用以下文件(和 OpenSans font )设置一个普通的 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;
}
我的按钮皮肤.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"/>
最佳答案
我不知道为什么,但尝试在您的 css 中添加 fontWeight: normal;
,这会有所帮助。在将 fontFamily 更改为 Verdana 并看到按钮标签为粗体后,我得出了这个结论。
关于apache-flex - 如何在 Flex 移动项目的 Spark 皮肤中使用带有 CSS 的嵌入式字体?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10186797/