Flex中通过设置嵌入字体以及替换默认Skin自定义Button风格的例子

By Minidxer | August 16, 2008

接下来的例子演示了Flex中通过设置嵌入字体以及替换默认Skin，自定义Button风格。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：

下面是完整代码(或点击这里察看)：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
applicationComplete="init()"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:String id="fileName" />
<mx:String id="fileSize" />
<mx:Script>
<![CDATA[
private function init():void {
var appInfo:LoaderInfo = Application.application.loaderInfo;
/* Just grab the filename from the SWF URL. */
fileName = (appInfo.url).split("/").pop();
/* Convert bytes to kilobytes. */
fileSize = (appInfo.bytesTotal / 1024).toFixed(2);
}
]]>
</mx:Script>
<mx:Style>
@font-face{
src: url("./fonts/base02.ttf");
fontFamily: "Base02";
}
.myButtonStyle {
embedFonts: true;
fontFamily: Base02;
fontWeight: normal;
fontSize: 24;
cornerRadius: 0;
letterSpacing: 4;
textRollOverColor: red;
skin: ClassReference(null);
icon: Embed(source="./assets/iconInstall.png");
}
</mx:Style>
<mx:ApplicationControlBar id="applicationControlBar" dock="true">
<mx:Label id="info" text="{fileName} ({fileSize}kb)" />
</mx:ApplicationControlBar>
<mx:Button id="btn" label="{btn.getStyle('fontFamily')}" styleName="myButtonStyle" />
</mx:Application>

代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | Tags: @font face, Button, embedFonts, 字体

One comment | Add One

中文Flex例子