Share
CSS 3 ist am Horizont und wir sind alle aufgeregt. Dank der neuesten Browser-Updates können Entwickler mit zeitsparenden neuen Eigenschaften arbeiten, z. B. @ font-face. Leider ist die Verfügbarkeit dieser Funktionen auf einen winzigen Bruchteil unserer gesamten Userbasis beschränkt. Zumindest für das nächste Jahr müssen wir beim Einbetten von Schriftarten weiterhin die Flash- und Javascript-Alternativen verwenden.
Glücklicherweise hat ein neuer Anwärter, Cufón, den Prozess unglaublich einfach gemacht. Was macht es anders? Statt Flash verwendet es eine Mischung aus Canvas und VML, um die Schriftarten zu rendern. In wenigen Minuten zeige ich Ihnen, wie Sie eine beliebige Schriftart in Ihren Webanwendungen verwenden. Aufgeregt?
Besuchen Sie die Cufón-Website und klicken Sie oben rechts auf die Schaltfläche "Download". Wählen Sie "Speichern unter" und legen Sie es auf Ihrem Desktop ab.
Um funktionieren zu können, müssen wir das Dienstprogramm zur Fontkonvertierung auf der Website verwenden. Alternativ können Sie den Quellcode herunterladen und Ihre Schriftarten lokal konvertieren. Zu Demonstrationszwecken habe ich mich dazu entschieden, eine abscheuliche Schrift zu verwenden: "Jokerman". Hinweis - Windows-Benutzer: Möglicherweise müssen Sie die Schriftart aus Ihrem Ordner "FONT" auf den Desktop kopieren, damit dies funktioniert.
Wenn gewünscht, laden Sie auch die kursiven und fetten Dateien hoch.
Als Nächstes müssen Sie auswählen, welche Glyphen eingefügt werden sollen. Seien Sie nicht so schnell, einfach "ALLES AUSWÄHLEN". Dadurch wird die JS-Dateigröße drastisch erhöht. Zum Beispiel brauchen wir wahrscheinlich nicht alle lateinischen Glyphen. Stellen Sie daher sicher, dass sie nicht aktiviert sind. In meinem Fall habe ich die unten gezeigten geprüft.
In Cufón können Sie eine bestimmte URL für Ihre Datei festlegen, um die Sicherheit zu erhöhen. Es ist äußerst wichtig, dass Sie sicherstellen, dass Sie über die erforderlichen Berechtigungen für die Verwendung einer Schriftart verfügen. HIER können Sie die Bedingungen durchlesen. Wenn es vorteilhaft ist, geben Sie die URL Ihrer Site in dieses Feld ein.
Da wir gerade erst anfangen, können Sie die letzten beiden Abschnitte auf ihren Standardwerten belassen. Akzeptieren Sie die Bedingungen und klicken Sie auf "Lassen Sie uns das tun". Anschließend wird eine Download-Box angezeigt, in der Sie gefragt werden, wo das generierte Skript gespeichert werden soll. Speichern Sie es erneut auf Ihrem Desktop, um es einfach abzurufen.
Der nächste Schritt ist die Vorbereitung unseres Projekts. Erstellen Sie einen neuen Ordner auf Ihrem Desktop, fügen Sie eine index.html-Datei hinzu und ziehen Sie Ihre beiden Javascript-Dateien hinein.
Öffnen Sie die Indexdatei in Ihrem bevorzugten Code-Editor, fügen Sie die grundlegenden HTML-Tags hinzu und referenzieren Sie dann Ihre beiden Javascript-Dateien unmittelbar vor dem schließenden body-Tag (Sie können sie auch dem head-Abschnitt hinzufügen)..
Nun müssen wir entscheiden, welcher Text ersetzt werden soll. Da unser Dokument noch leer ist, können Sie es mit zufälligen Markierungen und Text versehen. Versuchen wir, die Standardschriftart in allen H1-Tags durch Jokerman zu ersetzen.
Wenn wir die "replace" -Methode aufrufen, können wir eine Zeichenkette anhängen, die den Tagnamen enthält, den wir ersetzen möchten - in unserem Fall alle H1-Tags. Speichern Sie die Datei und zeigen Sie sie in Ihrem Browser an.
Wie immer braucht IE ein bisschen mehr, um gut mit den anderen zu spielen. Wenn Sie diese Seite in IE anzeigen, bemerken Sie eine leichte Flickr / Verzögerung, bevor die Schriftart gerendert wird. Zur Abhilfe fügen Sie einfach Folgendes hinzu:
Stellen wir uns vor, Sie möchten mehr Kontrolle über Ihren Selector haben. Zum Beispiel möchten Sie vielleicht nicht ALLE H1-Tags ändern, sondern nur die Tags im Kopf Ihres Dokuments. Cufón hat keine eigene Selector Engine eingebaut. Diese Funktion wurde weggelassen, um die Dateigröße so klein wie möglich zu halten. Obwohl dies auf den ersten Blick wie ein Untergang wirkt, ist es tatsächlich eine großartige Idee. Angesichts der allgegenwärtigen Verbreitung von Javascript-Frameworks ist in letzter Zeit keine Verdoppelung erforderlich. Wir betrachten zwei Methoden, um auf bestimmte Elemente zu zielen.
Wenn Sie in Ihrem Projekt kein JS-Framework verwenden, verwenden wir einfach:
Accentsconagua
Cufon.replace (document.getElementById ('header'). GetElementsByTagName ('h1')); Im obigen Code heißt es: "Holen Sie sich das Element mit der ID" Header ". Suchen Sie dann alle H1-Tags in diesem Element und" ersetzen "Sie diese mit unserer neuen Schriftart.
Um von der Selector-Engine von jQuery abzusteigen, müssen Sie nur jQuery vor Cufón importieren.
Cufon.replace ('# header h1'); So einfach ist das! Bitte beachten Sie, dass Sie jQuery VOR dem Cufón-Skript importieren MÜSSEN, damit diese Methode funktioniert.
Ob Sie es glauben oder nicht, Sie sind fertig! Mit nur wenigen Zeilen einfachen Codes können Sie jede gewünschte Schriftart verwenden! Stellen Sie nur sicher, dass Sie über eine Berechtigung verfügen und mit der Lizenzierung von Type Foundries kompatibel sind.
Aus Sicht der Typ-Gießerei scheint die Hauptsorge zu sein, dass das von Cufón generierte Schriftbild-Skript verwendet werden könnte, um die Schrift selbst zu rekonstruieren.
-Cameron Moll
Was sind deine Gedanken? Ich habe eine bessere Methode, mit der ich nicht vertraut bin?
