Dynamic Image Replacement Praktische Techniken und Werkzeuge

Wenn es um Webdesign geht, sollte die Kreativität des Designs nicht durch die begrenzte Auswahl an unterstützten Webschriftarten, die wir nennen, behindert werden Websichere Schriftarten. Designer sollten die Freiheit haben, Schriftarten, die sie für Titel und Inhalte bevorzugen, frei zu verwenden.

Im Jahr 2005 wurde die dynamische Bildersetzung mit einer Technik namens populär gemacht Skalierbarer Inman-Flash-Ersatz (sIFR). Entwickelt von Shaun Inman, sIFR nutzt Javascript und Adobe Flash, um Webdesignern die Möglichkeit zu geben, benutzerdefinierte Schriftarten zu verwenden, die auf der Website beliebt sind, und dennoch für diejenigen sichtbar zu bleiben, die diese Schriftart nicht haben. Und während sich das Web ständig weiterentwickelt, haben wir heute mehr alternative Lösungen mit verschiedenen Technologien, nur für den Fall, dass Sie kein großer Flash-Fan sind.

Schauen wir uns ein paar weitere an Techniken, um dynamische Bildersetzungen zu erzielen.

Häufig verwendete Techniken

Hier sind einige der am häufigsten praktizierten Techniken zum Ersetzen dynamischer Bilder.

Skalierbarer Inman-Flash-Ersatz (sIFR)

sIFR ist eine der beliebtesten Methoden zum Einbetten benutzerdefinierter Schriftarten auf Websites. Es verwendet Javascript und Flash, um eine benutzerdefinierte Schriftart für Ihre Website zu erstellen, und ermöglicht die Konvertierung der konvertierten Schriftart. Abgesehen davon bleibt die konvertierte Schrift als Text in den Quellcodes, so dass sie von der Suchmaschine weiterhin gecrawlt werden kann.

sIFR 2 (empfohlen) ist die aktuelle stabile Version. Wenn Sie sich jedoch mit der Implementierung von sIFR beschäftigen, sollten Sie dies auch wissen siFR 3 Beta ist auch zum Download verfügbar. Es könnte ein wenig fehlerhaft sein, aber zumindest löst es das Problem mit der Font-Erweiterung von sIFR 2.

Tools für sIFR, die sich als nützlich erweisen könnten:

sIFRvaultsIFRvault ist ein Repository mit sIFR-Schriftarten, die Sie herunterladen können.
sIFR GeneratorOnline-Tool, mit dem Sie mit wenigen Mausklicks sIFR-SWF-Dateien erstellen können. Laden Sie einfach die TTF-Schriftart der Schriftart hoch, die Sie konvertieren, in der Vorschau anzeigen und herunterladen möchten.
Konvertieren Sie Schriftarten in sIFRLaden Sie eine .TTF-Schriftart hoch und diese Website wird in eine sIFR-Flash-Datei konvertiert.

SIFR Lite

Die ursprüngliche SIFR ist also 22k Dave beschlossen, es mit einem objektorientierteren Ansatz zu überarbeiten, und das Ergebnis? 3x kleiner bei 3,7k.

PHP + CSS Dynamic Text Replacement (P + C DTR)

Wie der Name vermuten lässt, handelt es sich hierbei um eine Textersetzungsmethode, die PHP und CSS verwendet, die die von. Beschriebene ursprüngliche Methode verwenden Steward Rosenberger. Es ist auch eine Erweiterung der vorherigen Version von R. Marie Cox das unterstützt keine Textumbrüche und innere Tags. Eine weitere coole Sache bei P + C DTR ist, dass der Bildtext mit CSS-Tags anpassbar sein kann.

typeface.js

Was macht typeface.js Das Besondere ist, dass sie nur JavaScript verwenden, um benutzerdefinierte Schriftarten einzubetten. Der Stil kann mit HTML und CSS weiter angepasst werden. Es ist kein Flash erforderlich. Es ist Open Source und unterstützt die meisten Browser, die wir derzeit verwenden, egal ob Safari, Firefox, IE (6 und höher)..

Nach einigen Experimenten mit typeface.js denken wir, dass möglicherweise Verbesserungsbedarf besteht. Erstens neigen die Schriftarten dazu, in den verschiedenen Browsern etwas anders dargestellt zu werden. Wenn Sie typeface.js verwenden, sollten Sie eine browserübergreifende Überprüfung durchführen, bevor Sie davon ausgehen, dass das, was Sie in Firefox sehen, das ist, was Sie in Safari sehen. Text kann auch nicht mit typeface.js ausgewählt werden.

Benutzerdefinierte Schriftarten in typeface.js werden nicht kompiliert. Dies bedeutet, dass Benutzer die Schriftarten herunterladen können. Das könnte zu einem Copyright-Problem führen. Es wird empfohlen, gründlich zu prüfen, ob die verwendeten Schriftarten für die Weiterverteilung geeignet sind.

Cufon

Kein Flash erforderlich, Cufon ist eine großartige Alternative zu sIFR und es ist ziemlich einfach zu implementieren. Zuerst verwenden Sie den Cufon-Generator zum Generieren und Anpassen der gewünschten Schriftart. Dann fügen Sie das Cufon-Javascript in den Quellcode ein und teilen dem Skript mit, welche Selektoren Sie für die Anpassung der Schriftarten verwenden möchten.

Das größte Problem bei Cufon wäre das rechtliche Problem bei der Verwendung dieser benutzerdefinierten Schriftarten online. Da es in Javascript eingebettet ist, kann es von jedem, der den Quellcode betrachtet, problemlos gerippt werden. Benutzerdefinierte Cufon-Schriftarten können nicht ausgewählt werden.

Facelift

Auch bekannt als Facelift Image Replacement (FLIR), Es ist eine weitere großartige Methode für sIFR, die kein Flash benötigt. Sieht aus, als würde eine andere Alternative in der Flash-Ausgabe von sIFR auftreten.

Facelift verwendet die GD-Bibliothek von PHP und PHP. Sie erben das alte Problem der Ersetzung benutzerdefinierter Schriftarten - der Text kann nicht ausgewählt werden. Abgesehen davon finden wir es auch toll.

Weitere Methoden

Die oben genannten Techniken sind zwar weit verbreitet, wir haben jedoch auch andere Möglichkeiten entdeckt, wie Sie Ihren Text in schöne benutzerdefinierte Schriftarten konvertieren können.

Typ auswählen

TypeSelect Die Funktionen von typeface.js, jQuery, Canvas, toDataURL, CSS-Hintergrundeigenschaften und echtem überlagertem Text sorgen für eine benutzerdefinierte Schriftart auf Ihrer Website. Die Textauswahl funktioniert für Firefox, Safari und sogar Chrome, jedoch nicht für den IE.

SWF Image Replacement (swfIR)

swfIR gibt Ihnen die Möglichkeit, eine Auswahl visueller Effekte auf ein oder alle Bilder Ihrer Website anzuwenden. Sie können zum Beispiel beliebige Bilder auf Ihrer Website hinzufügen, und swfIR fügt einen runderen Rand hinzu, dreht die Position oder fügt sogar Schatten hinzu.

Neun Techniken zum Ersetzen von CSS-Bildern

Dies sind keine dynamischen Textersetzungen, sondern Chris Coyier demonstriert bis zu neun verschiedene CSS-Techniken, um Text durch Bilder zu ersetzen; Jeder verfügt über eine Berichtskarte, in der der Zustand des - Was ist, wenn Bilder ein- / ausgeschaltet sind, CSS ein / aus ist.

Font Burner

Font Burner Nutzen Sie Scalable Inman Flash Replacement (SIFR), um Ihre Titel in benutzerdefinierte Schriftarten umzuwandeln. Sie müssen nur die Schriftart finden, auswählen und den Code in den Kopf einfügen. Der Titel wird in kürzester Zeit geändert.

WordPress + Dynamic Image Replacement

Wenn Sie ein WordPress-Benutzer sind, der nach einer dynamischen Bildersetzungslösung für den Titel oder sogar den Inhalt Ihres Blogs sucht, sind die Chancen groß, dass dafür ein Plugin vorhanden ist. Hier sind einige Textersetzungs-Plugins, über die wir erfahren.

sIFR WordPress Plugin - WP sIFRWP sIFR wurde erstellt, um die Komplikationen vom Abrufen benutzerdefinierter Schriftarten auf einer WordPress-Site zu entfernen. Mit WP sIFR müssen Sie nur Ihre SWF-Schriftartdatei in das Plugin-Verzeichnis hochladen und sich anmelden, aktivieren und ihre Formatvorlagen im Bereich Einstellungen konfigurieren.

Cufon WordPress Plugin - WP-CufonDas einzige, was Sie tun müssen, ist Ihre Fontdateien zu konvertieren und in das Plugins-Verzeichnis hochzuladen. Sie können die Objekte, die Sie ersetzen möchten, im Admin-Menü von WordPress aktivieren.

Facelift Image Replacment (FLIR) Wordpress PluginFLIR für WordPress ist SEO-freundlich und rendert das Bild im Browser nur, wenn JavaScript aktiviert ist. Ihr HTML / XHTML-Code bleibt unverändert, sodass Ihre Head-Tags für Suchmaschinen lesbar sind und die Seite für diejenigen ohne JavaScript lesbar ist.

Font Burner SystemsteuerungDas Font Burner Mit dem Control Panel-Plugin können Sie problemlos alle über 1000 kostenlosen Schriftarten, die auf der Font Burner-Website verfügbar sind, zu Ihrem WordPress-Design hinzufügen.