Fontura anwenden

E

rst im Zusammenspiel mit HTML und CSS kommen Fonturas Möglichkeiten, Schrift zu formatieren, richtig zur Geltung. Erfahren Sie alle Einstellungen und ein paar hilfreiche Tricks.

  1. PHP kann Netzseiten auf verschiedene Weise aufbauen. Für Fontura ist es die beste Wahl, Dokumente möglichst in HTML zu verfassen und Font-Elemente als Tags einzustreuen.
  2. Sie können mehrere Schriftarten parallel verwenden. Erzeugen Sie dazu jeweils ein font-Objekt und benennen Sie es passend:
    1. $cooper = new font('cooper.ttf');
    2. $stencil = new font('stencil.ttf');
  3. Bei der Erzeugung eines font-Objekts können Sie bis zu vier verschiedene Schrift-Dateien für die Stile 'normal', 'kursiv', 'fett' und 'zier' angeben. Nur die angegebenen Stile stehen für die Textausgabe zur Verfügung.
    1. $schrift = new font('schrift-normal.ttf', 'schrift-kursiv.ttf', 'schrift-fett.ttf', 'schrift-umriss.ttf', TRUE, 'steuersatz-schrift.inc');
    Ungeachtet der Stilnamen können Sie beliebige Dateien zuordnen. Das ist nützlich, weil nicht alle Schriften in den gleichen Stilen vorliegen. Es wäre auch denkbar, ein einziges font-Objekt mit vier ganz verschiedenen Schriften zu laden. Tatsächlich verwenden auch Textverarbeitungen mehrere Dateien pro Schrift, es bleibt dem Benutzer nur verborgen.
  4. Der Parameter TRUE besagt, dass es sich um eine Frakturschrift handelt, deren Ligaturen Fontura entsprechend der typografischen Regeln von 1901 in den Text einsetzen soll. Im letzten Parameter wird dazu ein Steuersatz angegeben, der den genauen Zeichenvorrat und die Lage der Sonderzeichen in dieser Schrift beschreibt.
  5. Auch Antiqua-Schriften können Ligaturen aufweisen; sie müssen als Fraktur deklariert werden, damit Fontura eine Ersetzung durchführt.
  6. Unmittelbar nach der Erzeugung des font-Objekts können Sie die Farben setzen. Tipp: Farbkonstanten erhöhen die Übersicht.
    1. define ('DUNKELGRAU', '#35352F');
    2. define ('HINTERGRUND', '#E8E5D8');
    3. define ('ROT', '#B1261F');
    4.  
    5. $font->color(DUNKELGRAU, HINTERGRUND, ROT, TRUE);
    Der erste Parameter gibt die Schriftfarbe an, der zweite den Hintergrund. Als dritte Fabe kann noch einmal die Schriftfarbe angegeben werden. Steht hier eine abweichende Farbe, stellt Fontura große Anfangsbuchstaben so dar. Der vierte Parameter stellt einen transparenten Hintergrund ein. Um einen hässlichen Farbrand zu vermeiden, empfielt es sich, auch bei Transparenz immer die Hintergrundfarbe anzugeben.
  7. Ebenso können Sie Formatanweisungen setzen. Erster Parameter ist die Schriftgröße in Punkt, zweiter der Schriftstil. Als dritter Parameter kann eine CSS-Klasse übergeben werden. Diese muss im Behälterelement selbst deklariert werden und dient z.B. dazu, ein Wort hoch/tief zu stellen oder umfließen zu lassen.
    1. $font->style('15', 'normal', 'Versalie', FALSE, FALSE);
    Der vierte Paramater inline_box legt fest, ob jedes Worte so in ein Kästchen gezeichnet wird, dass der ganze Text auf einer Grundlinie steht. Bei FALSE, wird jedes Wort stattdessen in das kleinstmögliche Kästchen gezeichnet, in das es hineinpasst. Das ist manchmal nützlich für Versalien oder Überschriften, wo der zusätzliche Rand stören würde.
  8. Der fünfte Parameter alt_text bestimmt, ob der im Wort-Bild dargestellte Text zusätzlich im alt-Tag ausgegeben wird. Sie können FALSE setzen, um z.B. eine EMail-Adresse vor Spidern zu verstecken.
  9. Manchmal liegt HTML-Text in ausgelagerten Zeichenketten als Template vor. Wenn so eine Zeichenkette einen Fontura-Aufruf enthält, kann man diesen mit der Funktion eval() trotzdem ausführen.
    1. $template = '<h1><?=$font->text("Überschrift")?><h1>';
    2. echo eval($template);
    Die eval()-Funktion bewirkt, dass nicht das PHP-Tag ausgegeben, sondern der Text "Überschrift" erzeugt wird.
  10. Ein Tipp: Die Funktionen color() und style() haben lange Parameterlisten. Man kann diese Parameter von hinten nach vorn weglassen, wenn man die entsprechende Eigenschaft nicht ändern will. Für Eigenschaften, die bei der Objekt-Erzeugung weggelassen werden, verwendet Fontura Voreinstellungen.
  11. Um Stil und Farbe mitten im Text zu ändern, gibt es drei Funktionen, die sowohl Formatierungsparameter übernehmen als auch Text ausgeben. Diese Funktionen sind auch als Kurzform nützlich.
    1. $font->color_text('ROT', 'Rotkäppchen traf den').
    2. $font->style_text('30, fett', 'bösen Wolf').
    3. $font->style_color_text('20', 'GRUEN', 'im Wald.')
    Die Reihenfolge der Parameter ist identisch mit den Einzelfunktionen. Auch hier können Sie wahlweise nur die ersten Parameter setzen und die hinteren weglassen. Die Parametergruppen werden in Anführungszeichen eingeschlossen, als letzte Zeichenkette folgt der Ausgabetext.
  12. Wird eine Eigenschaft einmal gesetzt, bleibt sie solange erhalten, bis sie erneut geändert wird. Es ist sinnvoll, nur mit $font->text() zu arbeiten, solange das Format gleich bleibt.
    1. <p><?=$font->style_text('15', 'Schläft ein Lied in allen Dingen,')?></p>
    2. <p><?=$font->text('Die da träumen fort und fort,')?></p>
    3. <p><?=$font->text('Und die Welt hebt an zu singen,')?></p>
    4. <p><?=$font->text('Triffst du nur das Zauberwort.')?></p>
    So wird interne Rechenzeit gespart und die Formatierung kann bei Bedarf leichter angepasst werden.
  13. Um Fließtexte sauber zu formatieren, muss die CSS-Klasse des Behälters ein paar Vorkehrungen treffen. Fontura erwartet die Angabe des Schriftgrades in Punkt, die fertigen Wort-Bilder haben jedoch eine genaue Höhe in Pixel. Einen passenden Wortabstand erzielen Sie, wenn Sie font-size in Pixel auf etwa ¾ des Schriftgrades und word-spacing:0.1 setzen – experimentieren Sie ein wenig. Wegen möglicher Rundungsfehler die Werte nicht ganz auf Null setzen.
    1. <head>
    2. <style type="text/css">
    3. .FliessText {
    4. font-size:15px;
    5. word-spacing:0.1;
    6. line-height:0.1;
    7. text-align:justify;
    8. }
    9. .FliessText img { display:inline; border:0; }
    10. </style>
    11. </head>
  14. Die Wort-Bilder enthalten am unteren Rand bereits einen Leerraum für die Unterlängen. Um zu verhindern, dass der Benutzeragent einen weiteren Zeilenabstand einfügt, wird line-height:0.1 gesetzt.
  15. Durch display:inline funktionieren die Blocksatz-Formate left, right, center und justify. Ohne border:0 zeichnen manche Betrachter einen hässlichen Rand um Bilder.
  16. Die Funktion $font->text() nimmt auch Texteingaben an, die über mehrere Zeilen gehen. In diesem Fall müssen Sie die Zeichenkette an jedem Zeilenende abschließen, verketten und am Beginn der Folgezeile fortsetzen.
    1. <p><?=$font->text('Franz jagt im '.
    2. 'komplett verwahrlosten Taxi '.
    3. 'quer durch Bayern.')?></p>
  17. Der obige Text wird als eine Zeile ausgegeben. Einen Zeilenumbruch können Sie an jeder beliebigen Stelle mit \n einfügen.
    1. "Erste Zeile\nZweite Zeile"
    Damit Fontura das Zeilenendezeichen interpretiert, muss die Zeichenkette hier in doppelten Anführungszeichen stehen.
  18. Die Funktion text_bild() gibt den Dateinamen ohne umgebendes img-Tag zurück. Damit können Sie Text als src="Text" an HTML oder als url(Text) an CSS übergeben.
    1. <?php
    2. $zdingbats = new font('zdingbats.ttf');
    3. $zdingbats->style(20, 'normal', '', FALSE, FALSE);
    4. ?>
    5. <style type="text/css">
    6. ul { list-style-image:
    7. url(<?=$zdingbats->text_bild('+')?>);
    8. }
    9. </style>
    Dieses Beispiel stellt die zeigende Hand aus dem Dingbats-Font als Bullet-Symbol ein, wie man auf Verweise anschauen kann. Mit der Funktion können auch Schaltflächen erstellt werden.
  19. Hat man eine Weile mit Fontura experimentiert, bleiben im Cache-Verzeichnis überflüssige Wort-Bilder zurück. Ein Aufruf von $font->clear_cache() leert das Verzeichnis, ohne ein FTP-Programm zu erfordern. Funktionsaufrufe sollten aus fertigen Seiten wieder entfernt werden, damit der Cache funktionieren kann.
  20. Fontura gibt für die meisten Bedienfehler qualifizierte Fehlermeldungen aus. So brauchen Sie nicht lange nach der Ursache zu suchen.

weiter

C