1. Inkludieren Sie das JavaScript für Cufón und die Cufón-Schriftart
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/TitilliumMaps.font.js"></script>
2. HTML
Normale Tags
<h1>Business Solutions</h1>
<h2>Business Insurance</h2>
3. Cufón mitteilen, die Schriftarten für die angegebenen CSS-Selektoren zu ersetzen
<script type="text/javascript">
Cufon.replace('h1, h2', { fontFamily: 'TitilliumMaps26L', hover: true });
</script>
4. JavaScript-Fehlerbehandlung hinzufügen, falls ein Ladefehler auftritt
function handleError() { return true; }
window.onerror = handleError;
5. CSS
Die Schriftfarbe, Größe und Hover-Farbe werden über die CSS-Klassen gesteuert, die dem HTML-Element zugeordnet sind.
h1 {
font-size: 50px;
color: red;
}
Hallo, ich habe Cufon für bestimmte Schriftarten verwendet, aber ein Problem, auf das ich gestoßen bin, ist, dass verschiedene Schriftarten in unterschiedlichen Größen dargestellt werden. Das heißt, ein 36px Arial wäre viel größer als die 36px für meine Cufón-induzierte Schriftart, sodass die Website durcheinander aussieht, wenn jemand JavaScript deaktiviert hat.
Irgendwelche Hinweise, wie man das mildern kann? Danke.
Deane,
Schauen Sie sich den Abschnitt „Sonderfälle“ unter an
http://wiki.github.com/sorccu/cufon/styling
Wenn Cufon Ihre Elemente ersetzt, können Sie spezielles CSS anwenden, nachdem Cufon den Text ersetzt hat.
h1 {
font-size:2em;
}
So funktioniert das: Wenn Cufon sich nicht anwenden lässt, erhält Ihre Standard-CSS für das Element h1 die Größe von 2em.
Wenn Cufon erfolgreich ist, können Sie eine Regel wie diese erstellen
.cufon-active h1 { /* für Cufon.replace(‘h1’) */
font-size: 3em;
}
damit die von Cufon gerenderte Schrift größer ist.
Ja, verwenden Sie diesen Mist nicht! Verwenden Sie stattdessen Web-Schriftarten, es ist nur Text… Jesus, Leute tun ihr Bestes, um das Internet zu ruinieren! Man kann es schlimmer machen als Cufon, aber FLASH!
Gefällt mir nicht
@Dennis „Ja, verwenden Sie diesen Mist nicht! Verwenden Sie stattdessen Web-Schriftarten, es ist nur Text…“
Manchmal reichen Web-Schriftarten einfach nicht aus. Manchmal braucht man Avenir oder Gill Sans und billige Web-Nachahmungen reichen nicht aus.
Gibt es einen Code oder Hack, um den Vorladeeffekt für Cufon zu überspringen?
Fügen Sie einfach hinzu
.cufon-loading { visibility: hidden; }
Cufon unterstützt kein Arabisch..
sicher werden wir eine Lösung finden..:-)
Irgendein Glück mit arabischfähiger Lösung??
Wir können Biffon für Persisch oder ich glaube arabische Schriftarten haben,
auch für RTL-Sprachen:http://averta.net/labs/fa/?p=10
@Deane
Ich würde Cufon normal laden und dann ein normales Stylesheet mit der gewünschten Textgröße haben. Dann würde ich JavaScript laden, das ein weiteres Stylesheet lädt, das das erste Stylesheet überschreibt und die benötigten Schriftgrößen für Cufon enthält. Auf diese Weise laden sie Cufon oder das zugehörige Stylesheet nicht, wenn JavaScript deaktiviert ist. Sie laden einfach das normale Stylesheet. Wenn JavaScript jedoch aktiviert ist, werden die Stile geladen, die die normalen Stile überschreiben und die richtigen Cufon-Schriftstilanpassungen ermöglichen.
Hier ist ein Beispiel:
<code&rt;
<script&rt;
var file = document.createElement(‘script’);
file.setAttribute(“type”,”text/css”);
file.setAttribute(“src”,theFile.ext)
</script&rt;
</code&rt;
Gibt es eine Möglichkeit, Cufin die Ersetzungsschriftarten laden zu lassen, ohne zuerst die nicht ersetzte Schriftart in IE aufblitzen zu lassen? Ich benutze Cufon, und es sieht in Firefox großartig aus, aber in IE ist es inakzeptabel, weil die Seite zuerst die „hässliche“ Version lädt, bevor Cufon mit den hübschen Schriftarten einsetzt. Weiß jemand eine Methode zum Ersetzen von Schriftarten, die das nicht tut? Danke!
Schauen Sie sich Cufon.now() in der Dokumentation und #5 in den FAQs an.
Ich setze das Element normalerweise auf display:none in CSS, füge Text für das Element hinzu (normalerweise über AJAX), cufoniere das Element und zeige es dann mit jQuery an (.show()).
Ich habe es auf der Homepage einer Reiseagentur verwendet, um dynamischen Text auf einem Feature-Rotator und Sonderangeboten zu gestalten (http://shipsandtripstravel.com).
Ich habe es auch mit mehreren Schriftarten auf ihrer Testimonial-Seite verwendet (http://shipsandtripstravel.com/about/testimonials.html).
Entschuldigung, ich meinte Cufon nicht Cufin @~@
Es ist nicht die beste Idee, aber es gibt Flash-Schriftart-Ersetzungen…
Test
Hallo,
Cufon funktioniert nicht für arabische Zeichen.
Könnten Sie mir bitte bei diesem Problem helfen?
Danke
In einer WordPress-Vorlage habe ich einen HTML-Tag wie . Was bedeutet das?
@heena und @wdalhaj
Ich habe einen Blogbeitrag über Den Zustand arabischer Web-Schriftarten geschrieben, der für das, was Sie erreichen möchten, hilfreich sein könnte. Cufon unterstützt die arabische Schrift noch nicht vollständig.
funktioniert großartig mit .html-Dateien, aber weiß jemand, wie man das Skript so platziert, dass es mit einer .hta-Datei funktioniert?
Es wird nicht einfach durch Umbenennen der Datei funktionieren.
Mit freundlichen Grüßen
Thomas
Relative Einheiten der Schriftgröße beeinflussen die visuelle Darstellung unterschiedlich. Fast jeder Browser stellt die gleiche Ansicht dar, wenn die Schriftgröße in Punkten (pt) angegeben ist. Das Problem der Schriftgröße kann mit Ausnahmen für bestimmte Browser oder einer grafischen Benutzeroberfläche gelöst werden.
Tipp: Hohe x-Höhe für gute Lesbarkeit in allen Größen.
IE9: Registrierung von Schriftarten erfordert spezielle Technik.
Hallo zusammen,
Gibt es eine Möglichkeit, eine Cufón-Schriftart basierend auf dem Stylesheet-Umschalter zu „färben“?
Ich habe die „Farbänderung“ der Website gut funktionierend, aber die Cufón-Schriftarten werden von der Stylesheet-Umschaltung nicht beeinflusst.
Ich habe einige kleine Tricks ausprobiert, aber die Cufón-Schriftart lässt sich nicht in der Farbe ändern.
Bei der Farbänderungsoption denken Sie an schwarzen Text auf weißem Grund vs. weißen Text auf schwarzem Grund.
Danke für jeden Tipp,
rob
So frustriert, bitte helfen Sie mir. Ich benutze das All-in-One-Cufon-Plugin und im Allgemeinen ist alles gut. ABER, wenn ich Text ändern möchte, der mehr als einen Aspekt hat (z. B. ich möchte meinen H3-Sidebar-Text ändern), kann ich das nicht! Ich kann den Sidebar-Text ändern und ich kann den gesamten H3-Text ändern, aber nicht auf den H3-Sidebar-Text eingrenzen. Hier sind Dinge, die ich versucht habe. Bitte helfen Sie.
Cufon.set( ‘fontFamily’, ‘Hominis’).replace(h3 , ‘.sidebar’);
Cufon.set( ‘fontFamily’, ‘Hominis’).replace(‘#h3′.sidebar’);
Cufon.set( ‘fontFamily’, ‘Hominis’).replace (‘.sidebar.h3’);
Sam, versuche es mit
Cufon.set( ‘fontFamily’, ‘Hominis’).replace (‘.sidebar h3′);
Wie können wir eine :hover-Farbänderung für Cufon hinzufügen?
Hallo,
Ich habe Probleme mit meinem Dropdown-Menü. Ich habe Cufon so eingestellt:
Cufon.replace(‘#nav ul li’, {hover: {color: ‘#ffffff’}, fontSize: ’15px’, color: ‘#c64e07’});
aber das Problem ist, dass der Code mein Untermenü ständig ersetzt. Was soll ich tun?
Ich arbeite daran auf meinem Localhost
Bitte antworten Sie so schnell wie möglich
Gruß,
Jason
Ich habe einen Zweifel.
Einige Websites sagen, dass die Verwendung von Cufon sich schlecht auf SEO auswirkt, da Suchmaschinen diesen Text nicht durchsuchen können. Stimmt das?
.cufon-loading { visibility: hidden; }
Die obige CSS-Datei blendet den normalen Text aus, den Cufon ersetzt, bevor Cufon geladen wird.
Die Lösung ist inzwischen ziemlich bekannt, aber ich wollte sie hier trotzdem hinzufügen.
@Ankur – nein: falsch. Es hat normale Auswirkungen auf SEO, normal im Vergleich zu, wenn Sie das Dokument mit H1, H2, H3-Tags usw. gestylt hätten. Es hat eine viel bessere Auswirkung auf SEO (leichter zu crawlen) als die Verwendung von Bildern zum Stylen von Überschriften oder Flash etc.
Wenn Sie sich den Quellcode Ihres Dokuments ansehen, mit aktiviertem Cufon, sehen Sie ein HTML-Dokument, das Google/Suchmaschinen leicht crawlen können.
Der Vorteil dieses Modells ist, dass, wenn Ihr Gerät JavaScript nicht verarbeiten kann (oder die Verwendung von JavaScript deaktiviert ist), das HTML-Dokument „gracefully degrade“ (elegant abwärtskompatibel) ist, d.h. es stützt sich auf die Tags, ohne die JavaScript-Formatierung, und ist gleichermaßen hochgradig crawlbar.
Ich hoffe, das ergibt Sinn.
@Deane. Das Stylen von Schriftarten mit em erzeugt bessere Ergebnisse.
Wir haben einen bedingten Schalter am Anfang des Dokuments gefunden, der für so ziemlich alle IE-Browser eine gute Möglichkeit darstellt, eine alternative CSS-Datei bereitzustellen.
Cufon ist großartig!
Es funktioniert wie „auf der Dose steht“. Es ist ein einfaches, aber effektives Werkzeug zur Ersetzung von Schriftarten.
Ja, es ist nicht für alle Anwendungen geeignet, aber es gibt andere, die es können. Für den einfachen Gebrauch ist Cufon genau das Richtige.
Alternative: Google Web Fonts : http://www.google.com/webfonts
Hallo zusammen! Ich bin total eine WordPress-Frau, mache aber gelegentlich Styling auf Blogger-Blogs. Habe versucht und bin gescheitert, nachdem ich diesen und anderen Online-Anleitungen gefolgt bin, um Cufon für benutzerdefinierte „Nicht-Google“-Schriftarten auf Blogger zu verwenden. Kein Erfolg. Hat jemand Erfahrung damit? Vielen Dank!
Es hat für mich funktioniert, Angie.
– Die Skripte in functions.php einfügen.
– Fügen Sie das #3 JavaScript (oben) irgendwo später auf der Seite hinzu – ich habe das im Footer hinzugefügt.
Es funktioniert gut in WordPress, also ist vielleicht etwas Seltsames passiert, als Sie den Generator ausgeführt haben. Jedenfalls habe ich es am Ende gelöscht, weil die Höhen nicht richtig berechnet wurden und ich in meinem Fall keine Lösung gefunden habe, die gut genug war, um mich dazu zu bewegen, 33k zu meinen mobilen Designs hinzuzufügen. Vielleicht später.
Ich benutze Cufon mit einigen chinesischen Schriftarten, und jetzt ragen sie über den Container hinaus, was es wirklich hässlich macht. Ist es möglich, dass Cufon neue Zeilenumbrüche macht, wenn er diese Breite erreicht? (wie normale Schriftarten?)
Danke für den Tipp! Aber es funktioniert bei mir nicht, ich verstehe nicht, warum ich die Schritte wie oben ausgeführt habe :(
Ich wollte wissen, wie man externe Schriftarten mit Cufon anwendet. Bitte helfen Sie mir.
Es funktioniert gut, aber ich versuche, fontWeight: ‚bold‘ für eine Schriftart anzuwenden (es ist eine leichte Version), sie wird nicht angewendet. Gibt es eine Möglichkeit, eine leichte Version einer Schriftart fetter darzustellen?
Ich habe ein WordPress-Theme gekauft und einige Schriftgrößen bei einigen Titeln geändert, und jetzt rendern diese Titel in IE9 überhaupt nicht mehr die Cufon-Schriftart. Die Standard-Cufon-Schriftgrößen funktionieren also, aber überall, wo ich die Schriftgröße aktualisiert habe, werden jetzt Times Roman angezeigt. Irgendwelche Ideen, warum das so ist und wie ich das beheben kann?
Ich habe kürzlich eine Website übernommen, die Cufon verwendet. Gibt es eine einfache Möglichkeit, es loszuwerden? Es wurde in eine WordPress-Site eingebettet – cwmnida.tv
Da ich keine Vorerfahrung damit habe, möchte ich es nicht vermasseln.
Dies ist eine viel einfachere und bessere Möglichkeit, Cufon zu ersetzen. Besonders bei der Arbeit mit bestimmten Zeichen. Hier ist der Link http://www.fontsquirrel.com/tools/webfont-generator Ich habe ihn oft benutzt. Funktioniert super.
Die Eigenschaft **Line_height** funktioniert in Cufon nicht!!
Irgendeine Lösung???
RTFM!
line-height funktioniert gut, wenn Sie einen strikten Doctype haben.
Hallo,
Ich habe Cufon verwendet, aber jetzt möchte ich, dass meine Schriftart von Google Fonts ausgewählt wird. Aber auch wenn ich das Cufon-Plugin deaktiviert habe, wird die Schriftart zur Schriftart, die ich vorher verwendet habe, bevor ich Cufon verwendet habe. Meine style.css-Datei funktioniert nicht mehr. Wie kann ich Cufon vollständig von meiner Website entfernen?
Grüße
Ist es möglich, altes Cufon für einige neueste Schriftarten zu verwenden und/oder gibt es Anleitungen zum Erstellen eigener Cufon-Schriftarten?