Seit Flash CS4, dem Flex SDK 3.2 und AIR 1.5 kann schon das neue Flash Text Layout Framework (TLF) verwendet werden, siehe mein Beitrag von 3. April. Dieses benutzt die Text Engine des Flash Players 10.
Die neuen Spark Komponenten in Flex 4 (Codename Gumbo) (siehe Beitrag von Artur) benutzen auch schon diese neuen Funktionalität.

Doch jetzt zum eigenlichen Thema, das einbetten von Schriften: Wie schon gesagt, müssen Systemschriften nicht mehr eingebettet werden um Anti-Aliasing, Rotation oder Alpha verwenden zu können. Aber wenn eine Schrift verwendet werden soll, von der nicht auszugehen ist, dass sie bei jedem der Benutzer auf dem Rechner installiert ist, muss diese natürlich nach wie vor ins swf eingebettet werden.
Es gibt nun zwei Arten Schriften einzubetten: Um Schriften für die “alten” Halo-Komponenten verwenden zu können muss die alte Art und Weise “DefineFont3″ verwendet werden. “DefineFont4″ heißt die neuen Methode, die für Schriften verwendet werden muss die im Text Layout Framwork oder in den neuen Spark-Komponenten benutzt werden sollen.

Beispiel

<fx:Style>

	@namespace s "library://ns.adobe.com/flex/spark";
	@namespace mx "library://ns.adobe.com/flex/halo";

	/* Einbetten für Halo Komponenten im DefineFont3 Format.
	    Heir ist alles wie gehabt */
	@font-face {
		src: url("arial.ttf");
		fontFamily: "ArialDF3";
	}

	/* Einbetten für Spak Komponenten und TLF im DefineFont4 Format.
	    Hier muss cff auf true gesetzt werden */
	@font-face {
		src: url("arial.tff");
		fontFamily: "ArialDF4";
		cff: true;
	}

	/* Das DataGrid wurde in Flex 4 (Beta) nicht überarbeitet
	    es ist also noch eine alte Halo Komponente und
	    braucht deswegen die Schrift im DefineFont3 Format */
	mx|DataGrid {
		fontFamily: "ArialDF3";
	}

	/* Das Texteingabefeld wurde für Flex 4 überarbeitet
	    ist also nun eine Spark Komponente und braucht deshalb
	    die Schrift im DefineFont4 Format */
	s|TextInput {
		fontFamily: "ArialDF4";
	}

</fx:Style>

Eingebettete Schriften im Text Layout Framwok verwenden
Um die eingebetteten Schriften im TLF zu verwenden müssen diese erstens im DefineFont4 Format eingebettet werden und zweitens muss bei dem verwendeten CharacterFormat “fontLookup” sowie “renderingMode” auf “cff” gesetzt sein:

var cf:CharacterFormat = new CharacterFormat();
cf.fontFamily = "ArialDF4";
cf.fontLookup = FontLookup.EMBEDDED_CFF;
cf.renderingMode = flash.text.engine.RenderingMode.CFF;
textFlow.characterFormat = cf;
textFlow.flowComposer.updateAllContainers();

Fazit
Es ist wie so oft, einiges wird besser, doch eine Neuerung macht nicht alles perfekt. Wird nämlich die gleiche Schrift für Spark und auch Halo Komponenten verwendet, muss sie zweimal eingebettet werden was zu größeren SWFs führt. Adobe ist wohl gerade dabei dafür eine Lösung zu finden, es ist ja noch Zeit bis zum endgültigen Release von Flex 4.
Beim Einbetten von Schriften ist es aber grundsätzlich sinnvon den UnicodeRange auf die Zeichen zu begrenzen die benötigt werden. (siehe Beitrag von Alex)
Eine andere Möglichkeit ist die Schriften zur Laufzeit zu laden (siehe mein Beitrag von 24. Juli)

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.

Um das Problem mit der leichten Pflegbarkeit zu lösen, bot sich das Typo3-Contentelement “Tabelle” an. Hier lässt sich leicht eine Tabelle aufbauen, ohne über HTML-Kenntnisse zu verfügen und auch ein Wizard wird angeboten, um die Erstellung noch weiter zu erleichtern.
Für den Redakteur ist hier nur wichtig, dass er die Option “Position der Kopfzeile” auf den Wert “oben” setzt.

Dadurch wird die erste Zeile von Typo3 nicht als normale Tabellenzeile an den Browser gegeben, sondern in folgendem Format:

<thead><th>...</th><th>...</th><th>...</th></thead>

Der Head-Bereich einer Tabelle kann mit CSS gesondert gestylt werden um ihn als Überschrift kenntlich zu machen.

Mit Hilfe von sIFR können in HTML-Seiten Überschriften in jeder beliebigen Schriftart dargestellt werden. Dazu benötigt der Client lediglich JavaScript und das Flash-Plugin.

Mein erster Versuch, die sIFR-Datei einzubinden sah so aus:

... sSelector:".contenttable thead th" ...

und das Ergebnis so:

Scheinbar kann sIFR die Breite der <th>-Elemente nicht korrekt auslesen und dadurch die Schrift in der eingebetteten SWF-Datei nicht in die richtige Größe bringen. Abhilfe dieses Problems schuf ein kleiner Trick:

Im TypoScript fügte ich diese Zeile ein, wodurch der Inhalt aller Tabellenzellen automatisch noch in ein <p>-Element gefasst werden.

tt_content.table.20.innerStdWrap.wrap = <p>|</p>

Der sIFR-Code wurde entsprechend angepasst

... sSelector:".contenttable thead p" ...

und das Resultat sah so aus:

Die Breite wurde korrekt erkannt, die Schriftgröße innerhalb der sIFR-Datei stimmte, aber aufgrund eines anderen Styles hat das <p>-Element einen Abstand nach unten, der hier in der Tabelle nicht erwünscht ist.

Also wurde das <p>-Element durch ein <div>-Element ersetzt. Sowohl im TypoScript

tt_content.table.20.innerStdWrap.wrap = <div>|</div>

als auch im sIFR-Aufruf

... sSelector:".contenttable thead div" ...

Wodurch das Ergebnis schließlich so war, wie vom Kunden gewünscht:

Die weitaus geringere Herausforderung war die abwechselnde Hintergrundfarbe der Tabellenzeilen.

Die Zeilen werden von Typo3 schon automatisch abwechselnd mit den CSS-Klassen tr-odd bzw. tr-even versehen. Somit reichen wenige Zeilen in der CSS-Definition, um die abwechselnde Hintergrundfarbe zu erzeugen:

tr.tr-odd td { background-color: #EBEBEB; }
tr.tr-even td { background-color: #E1E1E1; }

Order Deny,Allow
Deny from all

Auch der scheinbar komplizierte Fall, dass die Schriftdateien nicht in einem eigenen Ordner liegen, ist für die .htaccess-Datei kein Problem. Die Datei mit folgendem Inhalt könnte man z.B. direkt in den Ordner fileadmin legen und fortan wären alle Dateien mit der Endung .ttf die in diesem Verzeichnis oder einen Unterverzeichnis in beliebiger Tiefe liegen, von außen unerreichbar. Liegen Schriftdateien auch mit weiteren Endungen vor, muss die Datei dementsprechend angepasst werden.

<Files *.ttf>
Order Deny,Allow
Deny from all
</Files>

Das Tolle am Schutz der Dateien mittels .htaccess ist, dass diese von einem Web-Besucher über das http-Protokoll nicht erreichbar sind. Typo3 greift mit seinem GIFBUILDER jedoch nicht mit dem http-Protokoll auf die Datei zu, sondern nutzt dafür direkt das Dateisystem des Servers. Typo3 kann die Schriftdateien also weiterhin ungestört zum generieren von Grafiken nutzen, aber die Datei kann nicht herunter geladen werden.
Außerdem liegen die Schriften noch immer für den Typo3-Entwickler schön aufgeräumt in der Filelist.

Grundsätzlich sollten Sie das Verzeichnis, in dem Sie die Schriften ablegen, mit einem HTACCSS Passwortschutz versehen. Dann ist gewährleistet, dass das Verzeichnis nur über eine Eingabe eines Passworts und Benutzername erreichbar ist. Das macht einen Zugriff doch eher unwahrscheinlich.

Linotype wehrt sich derzeit heftig mit Abmahnungen gegen solche Verstöße.