Another day, another fight with Flash

Today once again I was confronted with strange Flash behaviour. This time the struggle was about using CSS style on html text in a Flash TextField using an embedded font. I hope I help someone with writing down what I found out.

Okay the problem was this. When using an embedded font in combination with a TextField.StyleSheet, part of my html text disappeared. I solved this by specifying for each HTML tag the font to be used. This is part of what my CSS initialization looked like:

var globalCSS:TextField.StyleSheet = new TextField.StyleSheet();
globalCSS.parseCSS(“a:link {color: #1b5085; font-family: Frutiger55_Bold_Font; font-weight: bold; text-decoration: none; } a:hover {color: #1b5085; font-family: Frutiger55_Bold_Font; font-weight: bold; text-decoration: underline; } b { font-family: Frutiger55_Bold_Font; font-weight: bold; } i { font-family: Frutiger55_Font; } ul { font-family: Frutiger55_Font; } li { font-family: Frutiger55_Font; } .blogHeader { font-family: Frutiger55_Bold_Font; font-size: 14; } .blogDate { font-family: Frutiger55_Bold_Font; font-size: 10; }”);

The font names that I used for the “font-family” CSS property correspond to the library linkage identifier for “export for ActionScript”. (You can set this by right clicking on your embedded font in the library and checking the checkbox “export for ActionScript”.) As you see I included a separate ‘regular’ (Frutiger55_Font) and ‘bold’ (Frutiger55_Bold_Font) font. Just to display parts of the text bold and others not. This was necessary in my situation, but I’ve seen fonts that did not require this. Hope this is of some help to someone. It would have saved me a lot of frustration if I had found something similar!