Monday, 9 April 2012

Different font size in dynamic text field

I recently came across a problem where I had to display two different font sizes in one dynamic text field. An easy solution would be to use two dynamic text fields with each text field displaying an alternative size font. However, due to time constraints and file size limitation this was not possible. I decided to use the Stylesheet class with html text to display the text at different sizes. Here is an example of my solution.

var css:StyleSheet = new StyleSheet();
css.setStyle(".big", {fontFamily:new Font1().fontName,fontSize:28});
css.setStyle(".small", {fontFamily:new Font1().fontName, fontSize:18 });

myTxt.multiline = false;
myTxt.styleSheet = css;
myTxt.htmlText = "

Hello" + "


You will need to make sure your text field height is large enough to hold both sizes of text. It is also possible to use html text without using Stylesheets. You can use the font tag with the size attribute to change the size of the text.

myTxt.multiline = false;
myTxt.htmlText = "<font size='28'>Hello</font>" + " <font size='18'>ilike2flash</font>";

The text field can also be created dynamically using code.

var css:StyleSheet = new StyleSheet();
css.setStyle(".big",{fontFamily:new Font1().fontName,fontSize:28});
css.setStyle(".small",{fontFamily:new Font1().fontName, fontSize:18 });

var tf:TextField = new TextField();
tf.embedFonts = true;
tf.styleSheet = css;
tf.multiline = false;
tf.styleSheet = css;
tf.htmlText = "

Hello" + "

ilike2flash"; tf.width = tf.textWidth + 4; tf.height = tf.textHeight + 4; addChild(tf);

Note I have set the text field’s width and height so the text characters don’t get cut off. For more information about auto sizing text field, take a look at this post.


  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP