Setting a font’s 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 {
            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.

Tagged as: fontAntiAliasType, fontGridFitType, fontSharpness, fontThickness