Flex: Schriften zur Laufzeit laden
/ Autor: Jürgen, 24 Jul 2009Um Schriften korrekt in Flex / Flash darstellen zu können, vor allem wenn Transparenzen oder Effekte darauf angewendet werden sollen, müssen sie in das swf eingebettet sein. Das Einbetten von Schriften verlängert allerdings die Kompilierungszeit und vergrößert die Dateigröße des SWFs enorm. Um dieses Problem zu umgehen können Schriften in ein eigenes SWF eingebettet werden, das dann zur Laufzeit geladen wird.
Vorgehensweise
Über den @font-face tag wird die Schrift in eine externe CSS Datei eingebettet.
@font-face {
fontFamily: Arial;
fontWeight: normal;
src: url("Arial.ttf");
}
Der Flash / Flex Builder bietet die Möglichkeit CSS Dateien direkt als SWFs zu kompilieren.
Über das Kontextmenü lässt sich das CSS als SWF kompilieren
Das erstellte SWF kann dann über den StyleManager geladen werden:
StyleManager.loadStyleDeclarations('fonts/Arial.swf');
Sobald die Schrift geladen ist kann diese verwendet werden. Darum sollte dieser Aufruf am Besten im initialize Handler der Hauptapplikation stehen. Wenn die Schrift erst später verwendet wird kann man sie natürlich auch erst laden wenn man sie wirklich braucht. Das macht vor allem Sinn wenn viele verschiedene Schriften verwendet werden, es aber nicht sicher ist ob alle Schriften tatsächlich gebraucht werden.
Mit Hilfe der Font Klasse lässt sich nachprüfen welche Schriften bereits geladen und verfügbar sind und zwar mit folgender Funktion:
Font.enumerateFonts(enumerateDeviceFonts:Boolean=false):Array
Es wird ein Array zurückgegeben das alle verfügbaren Schriften enthält. Standardmäßig werden nur die eingebetteten Schriften angezeigt (Der Parameter ist Standardmäßig auf false). Wenn dieser Parameter auf true gesetzt wird werden auch alle auf dem System installierten Schriften angezeigt.
Hier nochmal das ganze Beispiel
/**
* Event handler for the initialize event of the main application.
*/
private function initializeHandler(event:FlexEvent):void {
var e:IEventDispatcher = StyleManager.loadStyleDeclarations('fonts/Arial.swf');
e.addEventListener(StyleEvent.COMPLETE,styleLoadedHandler);
}
/**
* Event handler for the complete event of the StyleManager.loadStyleDeclarations function.
* Traces all embedded fonts.
*/
private function styleLoadedHandler(event:StyleEvent) : void {
var embeddedFonts:Array = Font.enumerateFonts(false);
embeddedFonts.sortOn('fontName',Array.CASEINSENSITIVE);
for(var i:Number = 0; i < embeddedFonts.length; i++){
var item:Font = embeddedFonts[i];
trace("[" + i + "] name:" + item.fontName + ", style: " + item.fontStyle + ", type: " + item.fontType);
}
}
Wenn man die Kompilierungszeit des Flex Projekts beschleunigen will muss sich entweder das CSS das zum SWF kompiliert wird in einem eigenen Projekt befinden, oder der Haken vor “Compile CSS to SWF” im Kontextmenu muss wieder entfernt werden. Ansonsten wird das CSS jedesmal wenn das Projekt gebuildet wird auch kompiliert. Und man hat keine Zeitersparnis. Eine gute Möglichkeit ist, den bin-debug Ordner des Schriften Projekts direkt in den html-template Ordner des eigentlichen Projekts zu legen. So werden die Schriften immer gleich am richtigen Ort abgelegt.
Leave a Reply