Flex Examples » fontSharpness http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting the font sharpness for a Label control in Flex http://blog.flexexamples.com/2008/08/21/setting-the-font-sharpness-for-a-label-control-in-flex/ http://blog.flexexamples.com/2008/08/21/setting-the-font-sharpness-for-a-label-control-in-flex/#comments Fri, 22 Aug 2008 06:05:01 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/21/setting-the-font-sharpness-for-a-label-control-in-flex/ The following example shows how you can set the font sharpness on a Flex Label control by setting the fontSharpness and fontAntiAliasType styles.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/08/21/setting-the-font-sharpness-for-a-label-control-in-flex/ --> <mx:Application name="Label_fontSharpness_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> @font-face { src: local("Arial"); fontFamily: ArialEmbedded; } @font-face { src: local("Base 02"); fontFamily: Base02Embedded; } </mx:Style> <mx:ApplicationControlBar dock="true"> [...]]]> The following example shows how you can set the font sharpness on a Flex Label control by setting the fontSharpness and fontAntiAliasType styles.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/21/setting-the-font-sharpness-for-a-label-control-in-flex/ -->
<mx:Application name="Label_fontSharpness_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Arial");
            fontFamily: ArialEmbedded;
        }

        @font-face {
            src: local("Base 02");
            fontFamily: Base02Embedded;
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="fontFamily:">
                <mx:ComboBox id="comboBox"
                        dataProvider="[ArialEmbedded,Base02Embedded]" />
            </mx:FormItem>
            <mx:FormItem label="fontSharpness:" direction="horizontal">
                <mx:HSlider id="slider"
                        minimum="-400"
                        maximum="400"
                        value="0"
                        snapInterval="10"
                        tickInterval="50"
                        liveDragging="true" />
                <mx:Label text="{slider.value}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Label id="lbl"
            text="The quick brown fox jumped over the lazy dog."
            fontFamily="{comboBox.selectedItem}"
            fontSize="16"
            fontAntiAliasType="advanced"
            fontSharpness="{slider.value}" />

</mx:Application>

View source is enabled in the following example.

You can also set the fontSharpness style in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/21/setting-the-font-sharpness-for-a-label-control-in-flex/ -->
<mx:Application name="Label_fontSharpness_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: Base02Embedded;
        }

        Label {
            fontAntiAliasType: advanced;
            fontFamily: Base02Embedded;
            fontSize: 16;
            fontSharpness: 400;
        }
    </mx:Style>

    <mx:Label id="lbl"
            text="The quick brown fox jumped over the lazy dog." />

</mx:Application>

Or, you can set the fontSharpness style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/21/setting-the-font-sharpness-for-a-label-control-in-flex/ -->
<mx:Application name="Label_fontSharpness_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Arial");
            fontFamily: ArialEmbedded;
        }

        @font-face {
            src: local("Base 02");
            fontFamily: Base02Embedded;
        }

        .myLabel {
            fontAntiAliasType: advanced;
            fontFamily: ArialEmbedded;
            fontSize: 16;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
            import mx.events.SliderEvent;

            private function comboBox_change(evt:ListEvent):void {
                lbl.setStyle("fontFamily", comboBox.selectedItem);
            }

            private function slider_change(evt:SliderEvent):void {
                lbl.setStyle("fontSharpness", evt.value);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="fontFamily:">
                <mx:ComboBox id="comboBox"
                        dataProvider="[ArialEmbedded,Base02Embedded]"
                        change="comboBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="fontSharpness:" direction="horizontal">
                <mx:HSlider id="slider"
                        minimum="-400"
                        maximum="400"
                        value="0"
                        snapInterval="10"
                        tickInterval="50"
                        liveDragging="true"
                        change="slider_change(event);" />
                <mx:Label text="{slider.value}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Label id="lbl"
            text="The quick brown fox jumped over the lazy dog."
            styleName="myLabel" />

</mx:Application>

Base 02 font by www.stereo-type.net.

 
]]> http://blog.flexexamples.com/2008/08/21/setting-the-font-sharpness-for-a-label-control-in-flex/feed/ 4 Setting a font’s anti-alias type, sharpness, thickness and grid fit type in Flex http://blog.flexexamples.com/2007/10/24/setting-a-fonts-anti-alias-type-sharpness-thickness-and-grid-fit-type-in-flex/ http://blog.flexexamples.com/2007/10/24/setting-a-fonts-anti-alias-type-sharpness-thickness-and-grid-fit-type-in-flex/#comments Thu, 25 Oct 2007 03:43:45 +0000 Peter deHaan http://blog.flexexamples.com/2007/10/24/setting-a-fonts-anti-alias-type-sharpness-thickness-and-grid-fit-type-in-flex/ The following example shows you how to change an embedded font’s appearance by setting the fontAntiAliasType style, fontSharpness style, fontThickness style, and fontGridFitType style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/10/24/setting-a-fonts-anti-alias-type-sharpness-thickness-and-grid-fit-type-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> @font-face { src: local("Arial"); fontFamily: "ArialEmbedded"; } Label { [...]]]> The following example shows you how to change an embedded font’s appearance by setting the fontAntiAliasType style, fontSharpness style, fontThickness style, and fontGridFitType style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/24/setting-a-fonts-anti-alias-type-sharpness-thickness-and-grid-fit-type-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Arial");
            fontFamily: "ArialEmbedded";
        }

        Label {
            fontFamily: ArialEmbedded;
        }
    </mx:Style>

    <mx:Array id="antiAliasTypes">
        <mx:Object label="normal" />
        <mx:Object label="advanced" />
    </mx:Array>

    <mx:Array id="gridFitTypes">
        <mx:Object label="none" />
        <mx:Object label="pixel" />
        <mx:Object label="subpixel" />
    </mx:Array>

    <mx:Boolean id="isAdvanced">
        {antiAliasTypeComboBox.selectedIndex == 1}
    </mx:Boolean>

    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="fontSize:">
                <mx:HSlider id="sizeSlider"
                        minimum="6"
                        maximum="24"
                        value="10"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1" />
            </mx:FormItem>
            <mx:FormItem label="rotation:">
                <mx:HSlider id="rotationSlider"
                        minimum="-3"
                        maximum="3"
                        value="0"
                        liveDragging="true"
                        snapInterval="0.1"
                        tickInterval="1" />
            </mx:FormItem>
            <mx:FormItem label="fontAntiAliasType:">
                <mx:ComboBox id="antiAliasTypeComboBox"
                        dataProvider="{antiAliasTypes}" />
            </mx:FormItem>
            <mx:FormItem label="fontSharpness:"
                    enabled="{isAdvanced}">
                <mx:HSlider id="sharpnessSlider"
                        minimum="-400"
                        maximum="400"
                        value="0"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="20" />
            </mx:FormItem>
            <mx:FormItem label="fontThickness:"
                    enabled="{isAdvanced}">
                <mx:HSlider id="thicknessSlider"
                        minimum="-200"
                        maximum="200"
                        value="0"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="10" />
            </mx:FormItem>
            <mx:FormItem label="fontGridFitType:"
                    enabled="{isAdvanced}">
                <mx:ComboBox id="gridFitTypeComboBox"
                        dataProvider="{gridFitTypes}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Label id="lbl"
            text="The quick brown fox jumped over the lazy dog."
            fontSize="{sizeSlider.value}"
            fontAntiAliasType="{antiAliasTypeComboBox.selectedItem.label}"
            fontSharpness="{sharpnessSlider.value}"
            fontThickness="{thicknessSlider.value}"
            fontGridFitType="{gridFitTypeComboBox.selectedItem.label}"
            rotation="{rotationSlider.value}"
            truncateToFit="false" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/10/24/setting-a-fonts-anti-alias-type-sharpness-thickness-and-grid-fit-type-in-flex/feed/ 8