Share
Letzte Woche hat Philo Ihnen gezeigt, wie Sie sIFR3 implementieren. Dieses Mal werde ich Ihnen zeigen, wie Sie Facelift Image Replacement (oder FLIR) implementieren, eine Alternative zu sIFR benötigt kein Flash.
Beachten Sie, dass die Demo aus Gründen des Kopierrechts andere als die im Tutorial verwendeten Schriften verwendet.
Der erste Schritt ist das Herunterladen von FLIR. Entpacken Sie den Download und legen Sie den Ordner irgendwo auf Ihrem Webserver ab (Facelift-1.1.1). Ich habe den Ordner in "Facelift" umbenannt, um die Arbeit zu erleichtern.
Im Facelift-Ordner befindet sich eine Javascript-Datei mit dem Namen "flir.js". Sie können es dort belassen oder an einen anderen Ort verschieben, beispielsweise einen zentralen Ordner für Javascript-Dateien. Für dieses Tutorial machen wir genau das und verschieben es in einen Ordner namens "js" im Stammverzeichnis unserer Site.
Öffnen Sie jetzt flir.js in Ihrem bevorzugten Texteditor und gehen Sie zu Zeile 30. Es sollte ungefähr so aussehen:
,Pfad:"
Wir müssen einen absoluten oder relativen Pfad zu unserem Facelift-Verzeichnis zwischen den beiden einfachen Anführungszeichen einfügen. Relative Pfade beziehen sich jedoch auf die Seite und nicht auf die Datei flir.js. Dies kann zu Problemen bei Websites führen, die mit mod_rewrite hübsche URLs erstellen. Die sicherste Methode, um alles zum Laufen zu bringen, ist die Bereitstellung eines absoluten Pfades.
,Pfad: '/ Pfad / zu / Facelift /'
Öffnen Sie die Seite, der Sie FLIR hinzufügen möchten, und fügen Sie zwischen den Head-Tags Folgendes hinzu, um flir.js anzuhängen:
Fügen Sie dann vor dem schließenden body-Tag Folgendes hinzu:
Dieser Schritt ist ziemlich einfach. Laden Sie die Schriftarten herunter, die Sie verwenden möchten. Ich werde Delicious, Tallys und Tusj verwenden. Platzieren Sie Ihre Schriftarten im Ordner "Schriftarten" im Ordner "Facelift". Öffnen Sie die Datei config-flir.php. Dort finden Sie einen Codeblock, der ungefähr wie folgt aussieht:
// Jede Schriftart, die Sie verwenden möchten, sollte einen Eintrag im Fonts-Array haben. $ fonts = array (); $ fonts ['tribalbenji'] = 'Tribal_Font.ttf'; $ fonts ['antagea'] = 'Antagea.ttf'; $ fonts ['illuminating'] = 'ArtOfIlluminating.ttf'; $ fonts ['bentham'] = 'Bentham.otf'; $ fonts ['geo'] = 'Geo_Oblique.otf'; $ fonts ['puritan'] = 'Puritan_Regular.otf'; $ fonts ['konstytucyja'] = 'Konstytucyja_1.ttf'; $ fonts ['promocyja'] = 'Promocyja.ttf'; $ fonts ['stunfilla'] = 'OPN_StunFillaWenkay.ttf'; $ fonts ['animaldings'] = 'Animal_Silhouette.ttf'; // Die Schriftart wird standardmäßig wie folgt verwendet (setzen Sie hier die gebräuchlichste Schriftart ein). $ fonts ['default'] = $ fonts ['puritan'];
Wie Sie den Kommentaren wahrscheinlich entnehmen können, handelt es sich bei jedem Eintrag im $ fonts-Array um eine Schriftart im Ordner fonts. Der Array-Schlüssel zwischen den Klammern verwenden wir in unseren CSS-Deklarationen, wenn wir die Schrift verwenden möchten. Fügen wir die Schriftarten hinzu, die wir zuvor heruntergeladen haben.
$ fonts ['ffftusj'] = 'FFF Tusj.ttf'; $ fonts ['deliciousheavy'] = 'Delicious-Heavy.otf'; $ fonts ['tallys'] = 'Tallys_15.otf';
Was auch immer $ fonts zugewiesen wird ["default"] wird verwendet, wenn keine Schriftart angegeben wird. Lassen Sie uns Delicious Heavy als Standard festlegen.
$ fonts ['default'] = $ fonts ['deliciousheavy'];
Es gibt eine Reihe weiterer Einstellungen in der Datei config-flir.php, diese können jedoch in Ruhe gelassen werden. Was jede Einstellung macht, ist ziemlich selbsterklärend und es gibt Kommentare, wenn Sie sie anpassen möchten.
Standardmäßig führt FLIR nur für Überschriften Bildersetzungen durch. Sie können angeben, was ersetzt werden soll, indem Sie ein Array von CSS-Selektoren an die FLIR.auto () - Funktion übergeben, die wir in Schritt 1 hinzugefügt haben.
FLIR.auto (['h1', 'h2', 'h3.alert', 'strong # important']));
Dadurch wird FLIR angewiesen, die Bildersetzung auf h1-Tags, h2-Tags, h3-Tags mit einer Klasse "alert" und starke Tags mit der ID "wichtig" anzuwenden..
Jetzt müssen wir CSS-Stile wie gewohnt anwenden. Verwenden Sie die Schlüssel des $ fonts-Arrays als Schriftart in Ihrer CSS-Deklaration, um diese Schriftart zu verwenden. Wir können Tusj auf alle h1 tas, Delicious Heavy auf alle h2-Tags und Tallys auf alle h3-Tags mit einer Alarmklasse anwenden.
h1 font-family: ffftusj, Georgia, serif; h2 font-family: deliciousheavy, Arial, serifenlos; h3.alert font-family: Tallys, Arial, serifenlos;
Das ist es! Die starken Tags mit der ID "Important" greifen auf die Standardschriftart zurück, die wir in der Datei config-flir.php angegeben haben. In diesem Fall handelt es sich um Delicious Heavy. Der generierte Bildtext wird auf die im CSS festgelegte Schriftgröße skaliert. CSS-Farben werden ebenfalls übernommen, Textumwandlungen jedoch nicht.
Obwohl FLIR eine ziemlich nette Lösung für das Ersetzen von Textbildern ist, gibt es einige kleinere Probleme. In der PHP-GD-Bibliothek werden die feinen Details nicht sehr gut dargestellt, was in der Tusj-Schrift ziemlich auffällig ist. Der obere Text wurde in Photoshop und der untere Text von der von FLIR verwendeten PHP-GD-Bibliothek dargestellt.
Ein weiterer Nachteil von FLIR ist, dass ein Webserver mit PHP und der GD-Bibliothek erforderlich ist. Die meisten Hosts haben jedoch beide, so dass dies vernachlässigbar ist.
Ein Vorteil von FLIR gegenüber sIFR, seinem Hauptkonkurrenten, ist, dass es einfacher zu implementieren ist und zum Erstellen oder Anzeigen von Flash nicht erforderlich ist.
Sowohl FLIR als auch sIFR sind ausgezeichnete Lösungen und werden Sie gut unterstützen. Die meisten Besucher können beides ohne viel Mühe betrachten, aber für die wenigen am Rand der Glockenkurve, die kein Flash haben, könnte FLIR die bessere Lösung sein.
Accentsconagua