February 23rd, 2007 by Kyle
Tags: ActionScript, as3, css, embedded-fonts.-embedded-true-type-fonts, Flex, Flex Builder, flex-builder-2.0.1, fonts, modules, mxml, runtime, runtime-stylesheets, style-sheet, stylesheets, true-type-fonts, ttf
Posted in: Flex
This is installment 3 in the series.
The previous 2 related posts are:
Changing embedded True Type fonts at Runtime in Flex Applications
Using Modules to Change embedded True Type fonts at Runtime in Flex Applications
This approach is a little different.
The application is very similar, but instead of using a loader or module loading, I use the StyleManager to load a runtime CSS swf (which was compiled from a CSS file).
Here is one of the style sheets that is tuned into a CSS swf:
@font-face {
src:url("assets/arial.ttf");
fontFamily: myFont;
}
@font-face {
/* Note the different filename for boldface. */
src:url("assets/arialbd.ttf");
fontFamily: myFont; /* Notice that this is the same alias. */
fontWeight: bold;
}
@font-face {
/* Note the different filename for italic face. */
src:url("assets/ariali.ttf");
fontFamily: myFont; /* Notice that this is the same alias. */
fontStyle: italic;
}
@font-face {
/* Note the different filename for bold-italic face. */
src:url("assets/arialbi.ttf");
fontFamily: myFont; /* Notice that this is the same alias. */
fontWeight: bold;
fontStyle: italic;
}
.myPlainStyle {
fontSize: 11;
fontFamily: myFont;
}
.myBoldStyle {
fontSize: 11;
fontFamily: myFont;
fontWeight: bold;
}
.myItalicStyle {
fontSize: 11;
fontFamily: myFont;
fontStyle: italic;
}
.myBoldItalicStyle {
fontSize: 11;
fontFamily: myFont;
fontWeight: bold;
fontStyle: italic;
}
1 Comment »
Recent Comments