Categories

Wie arbeitet man mit Schriften, die mit Cufon generiert wurden (Fortgeschritten)

Norman Fisher November 21, 2011
Rating: 5.0/5. From 2 votes.
Please wait...

Dieses Tutorial zeigt Ihnen, wie man Sonderzeichen dem vorhandenen Text, der mit cufon tab getaggt ist, hinzufügt oder ihn in einer anderen Schriftart, die mit Cufon generiert wurde, setzt.

Cufon ist ein online Schriftgenerator, der jede Schrift aus Ihren Computer in speziellen JavaScript konvertieren kann. Später sollen Sie ihn mit dem Skript-Tag hochladen, um einen Schrift auf einer Webseite einzubinden. Vor der Schrifttransformation können Sie verschiedene Schriftfunktionen, wie zum Beispiel Zeichensätze und Glyphen, testen, um einen Schrift für eine bestimmte Web-Anwendung zu optimieren. Es ist auch SEO-freundlich.

Wenn Ihre Vorlage mit Cufon ist und Sie diese Schriften durch die andere ersetzen oder einige spezielle Zeichen dort hinzufügen möchten, sollen Sie:

1. Zunächst finden Sie welcher Schriftart für den bestimmten Text verwendet wird .

In Ihrem Vorlage-Paket gehen Sie zum Ordner sources(+symbols)/psd. In Adobe Photoshop öffnen Sie die .psd Datei, die die Seite mit den benötigen Schriftarten repräsentiert. In der “Toolpalette” wählen Sie das “Type”-Tool aus und klicken Sie auf den Text oder markieren Sie ihn. Per DropDown-Feld Set the Font Family (Schriftfamilie setzen) wählen Sie die Schriftart aus.

(So sieht das Dropdown-Feld mit Schriftarten in der Optionsleiste von Photoshop aus)

2. Zweitens sollen Sie prüfen, ob diese Schriftart die Sonderzeichen der Sprache, die Sie im Template nutzen, unterstützt.

Falls Sie auf dem PC arbeiten, verwenden Sie Font Runner. Es ist ein kostenlosen Fontmanager für Windows mit Hilfe von denen können Sie ihre Schriftdateien verwalten und die im gewünschten Ordner halten. Er erlaubt Ihnen Ihre Schriftarten zu untersuchen. Außerdem können Sie in Detail jedes Fronts untersuchen

Nach der Installation vom Font Runner öffnen Sie ihn und gehen Sie zum Schriftenordner auf Ihrem Computer (z.B. C:\Windows\Fonts) aus dem Menü auf der linken Seite.

In der rechten Seitenwand tippen Sie den Name Ihrer Schriftart, um sie zu finden. Achten Sie bitte daran, dass sie markiert wird und dann setzen Sie den Mode (Modus) auf “Font Map”.

Beachten Sie bitte, wenn Sie keine Sonderzeichen Ihrer Sprache in der “Font Map” Tabelle sehen, bedeutet dies, dass die von der gewählten Schriftart nicht unterstützt werden und Sie sollen dann die andere auswählen. Zu besseren Übereinstimmungen nutzen Sie einen WhatThe Font Online-Dienst.

3. Jetzt generieren Sie Ihre .js Schriftdatei durch den Upload Ihrer Schriftdatei auf http://cufon.shoqolate.com/generate/. Dafür

  • kopieren Sie die gewünschte Schriftdatei vom “Fonts” Ordner auf Desktop oder in ein anderes Verzeichnis, wo Sie die Schriftart leicht erreichen können. Es kann dieselbe Schriftart sein, die im Template verwendet wird, wenn Sie sicher sind, dass sie Sonderzeichen unterstützt (wie oben gezeigt) oder eine absolut andere Schriftart sein, die die Zeichen unterstützt;
  • wählen Sie aufhttp://cufon.shoqolate.com/generate/ die Schriftart aus, die Sie verwenden möchten (zurzeit werden nun.ttf(TrueType); otf(OpenType); PFB (Printer Font Binary) Formate unterstützt) Mit Hilfe von “Regular Typeface” Feld oder bold, italic und bold italicspeichern Sie auf Desktop alle ihre Variante. Hängen Sie unbedingt die Hacken auf EULA box, um Web-Font-Einbettung zu erlauben.
  • Die Optionen Include the following glyphs (if available) (die folgenden Zeichen enthalten (falls verfügbar)) erlaubt die Auswahl der entsprechenden Gruppe von Symbolen um die Schriftart-Datei hinzuzufügen. Dabei darf nicht vergessen werden, dass jede zusätzliche Gruppe von Symbolen die Größe der Schriftdatei vergrößert. Daher müssen Sie versuchen die Anzahl den Symbolen in der Schriftdatei zu beschränken, damit Internetseiten nicht langsam laden. Normalerweise reicht es neben der Option Basic Latin ein Hacken zu hängen.

*Um zu verstehen, ob Sie Häkchen neben die Optionen Latin-1 Supplement, Latin Extended-A,usw hängen sollen, gehen Sie zu http://jrgraphix.net/r/Unicode. Auf diese Website finden Sie welche Symbole mit welcher Kategorie verbunden sind.

Im Bereich …and also these single characters (und auch diese einzige Zeichen) geben Sie in einer Zeile die Sonderzeichen in Groß- und Kleinbuchstaben ein. Wie z.B.: aistaAISTA

  • Lassen Sie die andere Optionen überspringen. Die Standard Einstellungen werden für die meisten Anwender empfohlen.
  • Bedingungen: Akzeptieren Sie die Bedingungen mit dem Hacken in der entsprechenden Box. Drücken Sie danach den Button “Lets do this!” (los geht’s!) .

4. Speichern Sie die generierte .js Datei im “js” Ordner Ihrer Website (wenn Sie lokal arbeiten) oder auf Ihrem Desktop, um diese Datei später auf den Server hochzuladen.

5. Wenn Sie einige Sonderzeichen mit dem bestehenden Font via Cufón Generator eingebettet haben, müssen Sie nun die vorhandene .jscufon Datei, die sich im “js” Ordner befindet, durch die neu generierte ersetzen. Achten Sie bitte darauf, dass die beiden Dateien gleiche Namen haben müssen. Bei der Verschieben des Files in den “js” Ordnern sollen Sie die Dateiersetzung bestätigen.

Wenn Sie eine andere Cufon Schriftart generiert haben und den vorhandenen durch ihn ersetzen möchten, führen Sie die folgenden Schritte aus.

6. Kopieren Sie den Namen Ihrer generierten .js Datei (drücken Sie zuerst F2, dann Ctrl+ C)

7. In einen Text Editor oder in Dreamweaver öffnen Sie die index.php oder index.html Datei (das hängt je nach Template-Typ) und finden Sie den Namen der benötigen Schrift (Kehren Sie zu Schritt 3 in diesem Tutorial zurück, damit Sie den Namen herausfinden) mit Hilfe von Ctrl(Command) + F. Es sollte so aussehen

<script src=”js/font_name.font.js” type=text/javascript></script>

und ersetzen Sie den font_Namen durch den Namen Ihrer generierten .js Datei (Schritt 6). Danach speichern Sie die Änderungen.

8. Öffnen Sie Ihre generierte .js Datei und kopieren Sie den Namen einer Schriftfamilie wo es steht

  font-family:font  family name

9. Im “js” Ordnern Ihrer Vorlage öffnen die cufon-replace.js und ersetzen Sie den Namen einer Schriftfamilie von vorhandener Schriftart durch den den Namen einer Schriftfamilie von generierter Schriftart und speichern Sie die Änderungen.

10.Im Web-Browser öffnen Sie Ihre Website, um zu prüfen, ob die Schriftart ersetzt wurde. Wenn es benötigt wird, drücken Sie die F5, um die Caches zu leeren.

Um mehr Information zu erhalten, schauen Sie bitte das u.a. Video-Tutorial an

Wie arbeitet man mit Schriften, die mit Cufon generiert wurden (Erweitert)

Wordpress Vorlagen
Dieser Eintrag wurde um Mit Schriften arbeiten geschrieben und character, Cufon, font, script, specia, text markiert. Bookmarken Sie den permalink.

Submit a ticket

Sollte Ihre Frage durch die Tutorials nicht ausreichend beantwortet worden sein, benutzen Sie bitte den folgenden Link, um sich an unser Beratungsteam (Support) zu wenden. Wir bieten Ihnen unsere Hilfe und Unterstutzung an. 24 Stunden am Tag, 7 Tage die Woche!
Ticket Einrichten