The following example shows how you can use an embedded font with the Flex NumericStepper control by setting the fontFamily
style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/05/18/using-embedded-fonts-with-the-numericstepper-control-in-flex/ --> <mx:Application name="NumericStepper_fontFamily_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; } </mx:Style> <mx:NumericStepper id="numericStepper" fontFamily="Base02Embedded" fontSize="32" width="100" textAlign="right" /> </mx:Application>
View source is enabled in the following example.
You can also set the fontFamily
style in an external .CSS file or <mx:Style /> block, as seen in the following snippet:
<mx:Style> @font-face { src: local("Base 02"); fontFamily: Base02Embedded; } NumericStepper { fontFamily: Base02Embedded; fontSize: 32; textAlign: right; } </mx:Style>
Or, you can set the fontFamily
style using ActionScript, as seen in the following snippet:
numericStepper.setStyle("fontFamily", "Base02Embedded"); numericStepper.setStyle("fontSize", 32); numericStepper.setStyle("textAlign", "right");
Due to popular demand, here is the “same” example, written in ActionScript:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/05/18/using-embedded-fonts-with-the-numericstepper-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comps="comps.*" layout="vertical" verticalAlign="middle" backgroundColor="white"> <comps:MyComp id="myComp" /> </mx:Application>
/** * http://blog.flexexamples.com/2008/05/18/using-embedded-fonts-with-the-numericstepper-control-in-flex/ */ package comps { import mx.containers.Canvas; import mx.controls.NumericStepper; public class MyComp extends Canvas { [Embed(systemFont="Base 02", fontName="Base02Embedded", mimeType="application/x-font")] public var Base02Embedded:Class; public var numericStepper:NumericStepper; public function MyComp() { super(); init(); } private function init():void { numericStepper = new NumericStepper(); numericStepper.width = 100; numericStepper.setStyle("fontFamily", "Base02Embedded"); numericStepper.setStyle("fontSize", 32); numericStepper.setStyle("textAlign", "right"); addChild(numericStepper); } } }
View source is enabled in the following example.
[Base02]
thank you for this amazing example in as3
do you know where I can find more information about the Embedded asset classes?
like the documentation you can find of the classes in the Adobe® Flex™ 2 Language Reference documentation?
example:
http://www.adobe.us/livedocs/flex/2/langref/mx/controls/Button.html
thank you.
Thanks for this. I really appreciate it!
jose luis garcia,
Try the Flex 3 documentation for “Embedding Assets” at http://livedocs.adobe.com/flex/3/html/embed_1.html.
Peter
Thank you peter, that’s just the information I was seeking.