Styling a Flex Button control using embedded fonts

The following example shows how you can customize the appearance of a Flex Button control by using an embedded font and removing the Button’s default skin.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>

<!-- http://blog.flexexamples.com/2007/08/28/styling-a-flex-button-control-using-embedded-fonts/ -->

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

View source is enabled in the following example.

I didn’t include the TrueType font in the source code ZIP. If you want to grab that exact font, head over to the creator’s site @ http://www.stereo-type.net/ and download “Base 02″.

转载：http://blog.flexexamples.com/2007/08/28/styling-a-flex-button-control-using-embedded-fonts/