The following example shows how you can check whether an embedded font has a specific glyph by passing a string to the hasGlyph() method which returns a Boolean value indicating whether the font has the specified character(s).
Full code after the jump.
To filter the fonts by glyph, type a few characters into the “Chars” text input. If a font does not have the specified characters it will be removed from the font list. Each of the fonts have the traditional A-Z, 0-9, so to see the filtering in all its glory, try typing “#” or “$” and the embedded ‘Base 02’ font should disappear from the list.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/31/determining-whether-a-font-has-specific-glyphs-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" verticalAlign="top" backgroundColor="white" initialize="init();"> <mx:Style source="fonts.css" /> <mx:Script> <![CDATA[ import mx.events.ListEvent; private const START:uint = 0x0020; private const END:uint = 0x007E; private function init():void { arr = Font.enumerateFonts(false) arrColl.source = arr; var str:String = ""; var idx:uint; for (idx = START; idx < END; idx++) { str += String.fromCharCode(idx); } textArea.text = str; } private function arrColl_filterFunc(item:Font):Boolean { return item.hasGlyphs(textInput.text); } private function list_rollOut(evt:MouseEvent):void { var f:Font = List(evt.currentTarget).selectedItem as Font; if (!f) { // No selected item, abort! return; } textArea.setStyle("fontFamily", f.fontName); samplePanel.title = "Sample: " + f.fontName; } private function list_itemClick(evt:ListEvent):void { var f:Font = List(evt.currentTarget).selectedItem as Font; if (!f) { // No selected item, abort! return; } textArea.setStyle("fontFamily", f.fontName); samplePanel.title = "Sample: " + f.fontName; } private function list_rollOver(evt:ListEvent):void { var f:Font = evt.itemRenderer.data as Font; textArea.setStyle("fontFamily", f.fontName); samplePanel.title = "Sample: " + f.fontName; } ]]> </mx:Script> <mx:Array id="arr" /> <mx:ArrayCollection id="arrColl" filterFunction="arrColl_filterFunc"> <mx:sort> <mx:Sort> <mx:SortField name="fontName" caseInsensitive="true" /> </mx:Sort> </mx:sort> </mx:ArrayCollection> <mx:Panel id="panel" title="Fonts:" status="{arrColl.length}/{arr.length}"> <mx:List id="list" dataProvider="{arrColl}" labelField="fontName" width="100%" rowCount="{arr.length}" itemClick="list_itemClick(event);" itemRollOver="list_rollOver(event);" rollOut="list_rollOut(event);"> <mx:itemRenderer> <mx:Component> <mx:Label fontFamily="{data.fontName}" /> </mx:Component> </mx:itemRenderer> </mx:List> <mx:ControlBar> <mx:Label text="Chars:" /> <mx:TextInput id="textInput" width="90" change="arrColl.refresh();" /> </mx:ControlBar> </mx:Panel> <mx:Panel id="samplePanel" title="Sample:" width="100%" height="100%"> <mx:TextArea id="textArea" fontSize="{slider.value}" color="black" letterSpacing="10" width="100%" height="100%" /> <mx:ControlBar> <mx:Label text="Font size:" /> <mx:HSlider id="slider" minimum="10" maximum="60" value="20" snapInterval="1" tickInterval="4" liveDragging="true" width="100%" /> </mx:ControlBar> </mx:Panel> </mx:Application>
View source is enabled in the following example.