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  />
    <mx:String  />

    <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 >
        <mx:Label  />
    </mx:ApplicationControlBar>

    <mx:Button  />

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