Nicht-webfähige Schriften darstellen
Freitag, 25. April 2008Sicherlich kommt es Ihnen bekannt vor: Das Layout des Designer ist absolut treffend, aber bei der Umsetzung der Seite gibt es massive Unterschiede in den Schriften.
Der Webbrowser kann immer nur Schriften darstellen, die auf dem eigenen System installiert sind. Da es allerdings bei allen Systemen unterschiedliche Schriften gibt, greift der Browser auf eine Alternative zurück, bzw. die Webseiten werden direkt mit websicheren Schriften erstellt.
Durch das dynamische Erstellen von Schriften, in Form von Bildern, können Sie Ihr Design absolut perfekt im Internet nachbilden. Es werden außerdem mehrsprachige Inhalte unterstützt. Der einzige Nachteil, die Erstellung benötigt eine höhere Rechenleistung als eigentlicher Text (Es kann durch ein intelligentes temporäres Auslagern verhindert werden). Was allerdings bleibt, ist ein höheres Datenaufkommen, durch Bandbreiten ab 1 MBit ist das allerdings zu vernachlässigen. Zumal die Bilder auf die eigene Festplatte ausgelagert werden.
Ich stelle Ihnen heute ein Skript vor, welches direkt und einfach als Bild eingebunden werden kann, aber alle Schriftarten darstellen kann. Es handelt sich um eine Implementierung unter Verwendung von IMagick aus den PHP Bibliotheken.
Die Einbindung erfolgt folgendermaßen:
-
<img src="/examples/fonty.php?t=Beispiel" alt="Beispiel" />
Als Resultat erhalten wir folgende Ausgabe:
Ich habe für das Beispiel die Schriftart Visitor verwendet. Als weitere Optionen können noch die Vordergrundfarbe, die Hintergrundfarbe und die Schriftgröße übergeben werden.
Als Beispiel für eine Größe von 20pt mit blauem Hintergrund und weißer Schriftfarbe:
-
<img src="/examples/fonty.php?t=Beispiel&c=ffffff&b=0066CC&s=20" alt="Beispiel" />
Als Ausgabe erhalten wir folgendes Bild:
Natürlich ist das Skript erweiterbar z.B. durch das Verwenden von mehreren Schriftdateien, oder durch das Benutzen von Verläufen und eben alles was grafisch möglich ist. Die Standardwerte können angepasst werden, um es an persönliche Vorstellungen anzugleichen. Folgende optionale Werte können belegt werden:
-
/* configuration */
-
/* allowed referer - else, everyone can generate images over your server */
-
$referer = array( "localhost", "127.0.0.1", "pyades.com", "devqt.com", "imagy.com" );
-
/* default string */
-
$string = "pyades technologies gmbh";
-
/* max string len */
-
$maxStringLen = 24;
-
/* default font point size */
-
$size = 12;
-
/* maximal font point size possible */
-
/* note: a size like 1000pt can slow down or even break the server */
-
$maxSize = 20;
-
/* default font color */
-
$color = "#000000";
-
/* default background color */
-
$background = "transparent";
-
/* image comment */
-
$comment = "imagy.com by Pyades Technologies GmbH";
-
/* the font for writing */
-
$font = "visitor.ttf";
-
/* type of image - also possible, whatever Imagick can use */
-
$imageType = "png";
Durch das Nutzen von $referer haben Sie die Möglichkeit, die Bildausgabe auf bestimmte Hosts zu begrenzen, damit Ihr Server nicht unnötig belastet wird, falls es sich ein anderer zu eigen macht. In einer späteren Anpassung wird eine weitere Sicherung in Form der IP-Adresse oder sogar in Form von Cookies denkbar sein. Ich halte Sie natürlich wie immer auf dem Laufenden.
Download: /examples/fonty-0.1.zip (10,6 KB)
Sollten Sie eine Abwandlung benötigen, oder möchten Sie es in Ihre Webseite integriert haben? Dann sprechen Sie mit mir, wir werden unter Garantie eine Lösung finden. Haben Sie weitere Fragen? Dann rufen Sie mich doch an, oder schreiben Sie mir einfach eine eMail.
Florian Becker
–
Pyades Technologies GmbH
Römerstr. 4 L
55232 Alzey
Tel: +49 (0) 67 31.998 78 66
Mob: +49 (0) 163.680 35 64
Fax: +49 (0) 67 31.998 78 67
Webseite: www.pyades.com
Amtsgericht: Mainz HRB 41299
Geschäftsführer: Florian Becker