<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Flex Examples &#187; embedFonts</title>
	<atom:link href="http://blog.flexexamples.com/tag/embedfonts/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.flexexamples.com</link>
	<description>Just a bunch of Adobe Flex Examples</description>
	<lastBuildDate>Wed, 26 Jan 2011 18:09:51 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Styling a Flex Button control using embedded fonts</title>
		<link>http://blog.flexexamples.com/2007/08/28/styling-a-flex-button-control-using-embedded-fonts/</link>
		<comments>http://blog.flexexamples.com/2007/08/28/styling-a-flex-button-control-using-embedded-fonts/#comments</comments>
		<pubDate>Tue, 28 Aug 2007 15:33:26 +0000</pubDate>
		<dc:creator>Peter deHaan</dc:creator>
				<category><![CDATA[Button]]></category>
		<category><![CDATA[Embed]]></category>
		<category><![CDATA[Fonts]]></category>
		<category><![CDATA[@font face]]></category>
		<category><![CDATA[embedFonts]]></category>

		<guid isPermaLink="false">http://blog.flexexamples.com/2007/08/28/styling-a-flex-button-control-using-embedded-fonts/</guid>
		<description><![CDATA[<p>The following example shows how you can customize the appearance of a Flex Button control by using an embedded font and removing the Button&#8217;s default skin.</p> <p></p> &#60;?xml version="1.0" encoding="utf-8"?&#62; &#60;!-- http://blog.flexexamples.com/2007/08/28/styling-a-flex-button-control-using-embedded-fonts/ --&#62; &#60;mx:Application name="Button_style_test" xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="init()" layout="vertical" verticalAlign="middle" backgroundColor="white"&#62; &#60;mx:String id="fileName" /&#62; &#60;mx:String id="fileSize" /&#62; &#60;mx:Script&#62; &#60;![CDATA[ private function init():void { var appInfo:LoaderInfo = [...]]]></description>
			<content:encoded><![CDATA[<p>The following example shows how you can customize the appearance of a Flex Button control by using an embedded font and removing the Button&#8217;s default skin.</p>
<p><span id="more-78"></span></p>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;!-- http://blog.flexexamples.com/2007/08/28/styling-a-flex-button-control-using-embedded-fonts/ --&gt;
&lt;mx:Application name="Button_style_test"
    xmlns:mx="http://www.adobe.com/2006/mxml"
    applicationComplete="init()"
    layout="vertical"
    verticalAlign="middle"
    backgroundColor="white"&gt;

    &lt;mx:String id="fileName" /&gt;
    &lt;mx:String id="fileSize" /&gt;

    &lt;mx:Script&gt;
        &lt;![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);
            }
        ]]&gt;
    &lt;/mx:Script&gt;

    &lt;mx:Style&gt;
        @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");
        }
    &lt;/mx:Style&gt;

    &lt;mx:ApplicationControlBar id="applicationControlBar" dock="true"&gt;
        &lt;mx:Label id="info" text="{fileName} ({fileSize}kb)" /&gt;
    &lt;/mx:ApplicationControlBar&gt;

    &lt;mx:Button id="btn" label="{btn.getStyle('fontFamily')}" styleName="myButtonStyle" /&gt;

&lt;/mx:Application&gt;
</pre>
<p class="information"><a href="http://blog.flexexamples.com/wp-content/uploads/Button_style_test/bin/srcview/index.html">View source</a> is enabled in the following example.</p>
<p><iframe src="http://blog.flexexamples.com/wp-content/uploads/Button_style_test/bin/main.html" width="100%" height="150"></iframe></p>
<p class="alert">Base 02 font by <a href="http://www.stereo-type.net/">www.stereo-type.net</a>.</p>
<div class="evernoteSiteMemory"><a href="javascript:" onclick="Evernote.doClip({title: 'Styling a Flex Button control using embedded fonts on FlexExamples.com',url: 'http://blog.flexexamples.com/2007/08/28/styling-a-flex-button-control-using-embedded-fonts/',contentID: 'post-78',code: 'Pete9667',suggestNotebook: 'FlexExamples',suggestTags: '@font face,embedFonts',providerName: 'FlexExamples.com',styling: 'text' });return false" class="evernoteSiteMemoryLink"><img src="http://static.evernote.com/article-clipper-remember.png" class="evernoteSiteMemoryButton" />
				</a>				<div class="evernoteSiteMemoryClear">&nbsp;</div>
</div>]]></content:encoded>
			<wfw:commentRss>http://blog.flexexamples.com/2007/08/28/styling-a-flex-button-control-using-embedded-fonts/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>

