Oscar Trelles

Bug or Feature?: CSS and Embedded Fonts

I’ve been lurking around the forums and mailing lists archives during the weekend, looking for an answer. Unfortunately, I’ve been unable to find any helpful information, and I’m just concluding that it is impossible to use CSS and a mix of embedded and non-embedded typefaces.

I have been using these four examples to explore the behaviors of different HTML strings. What I wanted to accomplish is to display dynamic text from a database, formatted using a Stylesheet using common typefaces, thus eliminating the need for embedded fonts. However, at the end, I needed to embed just one special typeface like in the example above. So, we create a new Font from the Library, and set “Header” as it’s identifier; here goes the code:

// Create StyleSheet
var myCSS = new TextField.StyleSheet();
// Create .header Style
myCSS.setStyle (".header", {fontFamily:"Header", color:"#CC0000", fontSize:"30px", fontWeight:"bold"});
// Set the textfield to embed the typeface
greeting_txt.embedFonts = true;
// Assign StyleSheet to the Textfield
greeting_txt.styleSheet = myCSS;
// Assign the formatted text
greeting_txt.htmlText = "<span class="header">Season's Greetings</span><br>Lorem Ipsum ...";

The result is Example #2, which truncates the text and displays only the header. Now, this is the first time I attempted to use CSS and embedded fonts in a single textfield, but I guess the expected behavior would be being able to display the whole thing without any more work. So, if there’s is a way to show embedded and device fonts in the same Textfield, I haven’t been able to find it, and if it doesn’t exit… well, it should.

So, in order to see the rest of the text I need to embed another font: Arial, which is ubiquitous and will add unnecessary bytes to my swf. So, to accomplish what you see on Example #4, we need to add another Font to the Library, and modify the code a little bit.

// Create StyleSheet
var myCSS = new TextField.StyleSheet();
// Create .header and .subheader Styles
myCSS.setStyle (".header", {fontFamily:"Header", color:"#CC0000", fontSize:"30px", fontWeight:"bold"});
myCSS.setStyle (".subheader", {fontFamily:"ArialNormal", color:"#000000", fontSize:"12pt"});
// Set the textfield to embed the typeface
greeting_txt.embedFonts = true;
// Assign StyleSheet to the Textfield
greeting_txt.styleSheet = myCSS;
// Assign the formatted text
greeting_txt.htmlText = "<span class="header">Season's Greetings</span><br><span class="subheader">Lorem Ipsum ...</span>";