Share
Hast du genug von Arial? Müde von Times New Roman? Die Methoden zum Ersetzen von Schriftarten haben sich in den letzten zwei Jahren erheblich verbessert, aber es ist oft schwierig, die verschiedenen Methoden herauszufinden, wenn Sie nicht ständig darüber lesen. In diesem Artikel werden verschiedene Techniken zum Ersetzen von Schriftarten beschrieben, die derzeit verfügbar sind.
Erneut veröffentlichtes TutorialAlle paar Wochen besuchen wir einige der Lieblingsbeiträge unserer Leser aus der gesamten Geschichte der Website. Dieses Tutorial wurde erstmals im November 2010 veröffentlicht.
Wir werden uns die Vor- und Nachteile der jeweiligen Art, die Frage der Zeichensatzlizenzen und die besten Ressourcen für Schriftarten im Web ansehen, sodass Sie sie in Ihren eigenen Webdesigns verwenden können.
"Von Anfang an waren Designer auf eine begrenzte Anzahl von Schriftarten beschränkt."
Die Gestaltungsmöglichkeiten im Internet scheinen von Tag zu Tag zuzunehmen. Die Anwendung von Technologien wie HTML5, CSS3 und Javascript hat zu vielen aufregenden und innovativen Website-Designs geführt. Das Web scheint seit den Tagen des Nur-Text-Browsers weit fortgeschritten zu sein. Trotzdem gibt es einen Aspekt des Webdesigns, der relativ stagniert.
Die Typografie und die Auswahl der Schriftarten sind ein wesentlicher Bestandteil eines Arsenals für Designer, um das Erscheinungsbild einer Website zu gestalten. Leider waren Designer seit Beginn des Internets auf eine begrenzte Anzahl von Schriftarten beschränkt. Helvetica, Arial und Georgia sind drei der wenigen ansprechenden Schriften (nicht zu vergessen Comic Sans), auf die sich Designer sicher verlassen können, um für die Mehrheit der Webbenutzer korrekt dargestellt zu werden.
Die traditionelle Methode, mit der Designer solche Einschränkungen umgehen und Kreativität mit Schriftarten ausdrücken können, besteht darin, Text in Bilder zu integrieren. Diese Methode hat jedoch zahlreiche Nachteile. Es treten mehrere Probleme mit der Zugänglichkeit auf, und die Leistung der Website wird auch durch längere Ladezeiten beeinträchtigt.
In diesem Artikel werden verschiedene aufregende Methoden beschrieben, mit denen Sie nicht standardmäßige Schriftarten in Ihre Webseiten integrieren können, ohne Bilder zu verwenden. Wir werden die Vor- und Nachteile der einzelnen Methoden, die Probleme bei der Verwendung von Schriftarten und die Bedeutung dieser Technologie für Webdesigner untersuchen.
Cuf? N ist eine unglaublich einfache und effektive Methode, um nicht standardisierte Schriftarten in eine Webseite zu integrieren, und deren Funktionalität nicht von serverseitigen Sprachen oder Plug-Ins abhängig ist. Cufon arbeitet nur mit wenigen Zeilen Javascript-Code und verwendet eine Kombination aus VML (Vector Markup Language), für Internet Explorer und der Canvas5-Funktion von HTML5, um die Schriftarten zu rendern.
Cuf? N bietet auf ihrer Homepage ein Font-Konvertierungs-Tool an, mit dem Sie die gewählte Schriftart in SVG konvertieren und eine Javascript-Datei erstellen können, die Sie in Ihrem HTML-Code referenzieren können. Der Herausgeber von Nettuts +, Jeffrey Way, hat zuvor ein hervorragendes Schritt-für-Schritt-Tutorial zur Integration von Cuf? N in Ihre Webseite geschrieben.
Cuf? N ist aufgrund seiner vielen Vorteile und relativ wenigen Nachteile eine beliebte Wahl für viele Webdesigner. Da es nicht auf andere Skriptsprachen oder Plug-Ins angewiesen ist, ist es für ein sehr breites Publikum zugänglich und wird auch von aktuellen Versionen aller gängigen Browser einschließlich IE 9 unterstützt. Sie können CSS-Stil auch direkt auf Cufon ersetzen, das ersetzt wird Text, einschließlich neuerer CSS 3-Funktionen wie Farbverläufe. In Bezug auf die Geschwindigkeit ist es viel schneller als sIFR und weniger intensiv, sollte jedoch nicht für große Textkörper verwendet werden.
Es gibt jedoch einige negative Punkte zu Cufon. Es ist immer noch auf Javascript angewiesen, das einige Webbenutzer möglicherweise deaktiviert haben. Enttäuschend kann der ersetzte Text nicht ausgewählt und daher kopiert und eingefügt werden.
Pros:
Nachteile:
"@ font-face ist im Grunde die ultimative Lösung für Schriftarten im Web."
@ font-face hat wahrscheinlich die meiste Aufmerksamkeit einer der Methoden zum Ersetzen von Schriftarten erhalten, aber es gibt einen sehr guten Grund dafür. @ font-face ist im Wesentlichen die ultimative Lösung für Schriftarten im Web und eine, bei der alle anderen vor der vollständigen Realisierung die Replikation hofften. @ font-face war eigentlich in der CSS2-Spezifikation enthalten, hat sich aber bisher durchgesetzt.
@ font-face verwendet keine andere Web-Technologie als CSS, um benutzerdefinierte Schriftarten auf einer Webseite zu implementieren. Dies bedeutet, dass Flash, PHP oder gar Javascript nicht mehr benötigt werden. Der tatsächliche Typ wird gerendert, wenn @ font-face anstelle von Vektorobjekten oder Bildern verwendet wird. Daher kann der Text mithilfe von CSS ausgewählt, skaliert und formatiert werden.
Unglücklicherweise haben, wie bei vielen anderen Problemen im Web, hauptsächlich die Browser (zusammen mit Lizenzproblemen, die wir weiter unten besprechen werden) den Fortschritt von @ font-face behindert. Jeder der dominanten Browser unterstützt unterschiedliche Schriftformate. Internet Explorer verwendet .EOT (Embedded Open Type), während aktuelle Versionen von Firefox, Chrome, Safari und Opera alle .ttf (True Type Format) unterstützen. Das Open Type Format wird auch von einer Mischung aus Browsern unterstützt und SVG (Scalable Vector Graphics) wird für iPhone und iPad benötigt. Es kann alles ziemlich verwirrend sein und manchmal können viele Leute versuchen, es zu benutzen. Zum Glück ist jedoch Licht am Horizont. Das Web Open Font-Format (oder .WOFF) wird als Standardformat für Webschriftarten festgelegt und wird derzeit vom W3C standardisiert. Firefox unterstützt das Format seit Version 3.6, Chrome seit 5.0 und kürzlich wurde bekannt, dass Internet Explorer 9 auch das Format unterstützt. Hoffen wir, dass Opera und Safari bald der Party beitreten.
Das einzige andere kleinere Problem mit @ font-face ist, dass einzelne Browser und Betriebssysteme, da es als tatsächlicher Typ dargestellt wird, alles etwas anders darstellen. Einige Web-Font-Dienste, über die wir noch näher eingehen werden, zielen darauf ab, diese geringfügigen Abweichungen mit Hilfe von Font-Hinweisen zu korrigieren, die die Kontur des Typs in Browsern glätten und einen ästhetisch ansprechenden Typ schaffen.
Wenn Sie weitere Informationen zur Implementierung von @ font-face auf Ihrer Website wünschen, hat Jeffrey Way wieder ein nützliches Tutorial zur Verfügung gestellt.
Pros:
Nachteile:
Die nächste Handvoll Lösungen setzt bei der Lieferung der Waren auf @ font-face - jeder von ihnen ist mehr oder weniger ein "Service". Das bedeutet: Alle verwenden die gleiche Basistechnologie, bieten jedoch unterschiedliche Font-Bibliotheken, Lizenzierungsoptionen und Zahlungspläne; Ja, die meisten von ihnen verlangen, dass Sie dafür bezahlen, aber es besteht die Chance, dass dies der Weg der Zukunft für alle Schriftarten im Web ist.
Font Squirrel ist momentan vielleicht die beliebteste Ressource zum Ersetzen von Schriftarten. Font Squirrel nimmt Ihre Sorgen um die Lizenzierung von Fonts auf, da alle zur Verfügung gestellten Fonts für kommerzielle Zwecke frei verfügbar sind. Die Website bietet Hunderte von Schriftarten zur Auswahl, von serifenlosen Schriftarten bis hin zu Schriftarten im Novelty-Stil.
Um sicherzustellen, dass @ font-face in allen Browsern funktioniert, benötigen Sie, wie oben beschrieben, mehrere unterschiedliche Formate der Schriftart. Hierfür hat Squirrel eine Lösung. Die Site bietet @ font-face-Kits, die Ihnen alle benötigten Formate zur Verfügung stellen, sowie HTML und CSS. Wenn Sie das @ font-face-Kit für die gewünschte Schriftart nicht finden können, wird auch ein Generator bereitgestellt, der Ihre Schriftartendatei in die verschiedenen Formate konvertiert, die Sie kostenlos benötigen. Wenn Sie den Generator verwenden, müssen Sie sicherstellen, dass Sie über die richtige Lizenz verfügen, mit der Sie die Schriftart auf Ihrer Website verwenden können.
Pros:
Nachteile:
Die Font-API von Google wird in Verbindung mit ihrem eigenen Font-Verzeichnis verwendet, in dem alle Fonts Open Source sind und allen zur Verfügung stehen. Das Verzeichnis wird ständig erweitert und wird ständig erweitert. Es enthält derzeit mehr als 200 Beispiele.
Es könnte wirklich nicht einfacher sein, Schriften aus dem Verzeichnis in Ihre Website zu integrieren. Sie müssen lediglich die Schriftart auswählen, die Sie verwenden möchten, und die gewünschten Varianten der Schriftart auswählen. Google stellt Ihnen den von Ihnen benötigten Javascript-Code zur Verfügung. Passen Sie Ihr CSS an, um die verwendete Schriftart aufzulisten, und Sie können loslegen. Es ist wirklich so einfach!
Pros:
Nachteile:
Typekit war einer der ersten abonnierten Web-Font-Services und erfreut sich nach wie vor großer Beliebtheit. Typekit und andere ähnliche Dienste befassen sich mit der Lizenzierung von Zeichensätzen, indem sie den Benutzern gegen eine jährliche Abonnementgebühr Zugang zu einer großen Anzahl benutzerdefinierter Zeichensätze bieten. Diese Methode ermöglicht es den Font-Foundries, etwas für ihre harte Arbeit zu erhalten, und sie schützt sie vor Piraterie, da alle Fonts zentral auf den geschützten Servern von Typekit gehostet werden. Benutzer des Dienstes hosten die Schriftarten nicht auf ihrem eigenen Webspace, sondern verlinken sie einfach.
Typekit hat sich mit einigen der weltweit größten Schriftgießereien zusammengetan, um eine breite und unterschiedliche Auswahl an Schriftarten für Sie bereitzustellen. Typekit bietet Ihnen eine Vielzahl von Optionen und die Kontrolle über die verwendeten Schriftarten. Wählen Sie verschiedene Schriftvarianten, Gewichte und Glyphen aus. Sie können auch CSS-Stapel erstellen und Fallback-Schriftarten auswählen, die verwendet werden sollen, wenn @ font-face nicht unterstützt wird. Sie müssen auch die spezifischen HTML-Tags oder CSS-Klassen auswählen, auf die die benutzerdefinierte Schriftart angewendet werden soll. Sobald Sie mit Ihrer Auswahl zufrieden sind, wird ein Stück Javascript-Code generiert, den Sie auf Ihrer Website verwenden können.
Ein weiterer Vorteil von Typekit besteht darin, die Abweichungen in der Art und Weise zu steuern, wie verschiedene Browser Text und Schriftarten mit Hilfe von Hinting verwenden.
Typekit bietet verschiedene Preispakete für unterschiedliche Bedürfnisse an. Ein kostenloses Paket ist verfügbar, mit dem Sie zwei Schriftarten aus ihrer Testbibliothek auf einer Website verwenden können. Die Website kann bis zu 25.000 Seitenaufrufe pro Monat erhalten. Außerdem müssen Sie das Typekit-Badge auf der Website anzeigen, das Links zu Informationen zu den verwendeten Schriftarten enthält. Am anderen Ende der Skala befindet sich das Performance-Paket, mit dem Sie auf alle Schriftarten zugreifen können, die auf einer unbegrenzten Anzahl von Websites verwendet werden können, ohne die Anzahl der Seitenaufrufe zu begrenzen. Die Performance bietet all diese Funktionen für eine Jahresgebühr von 99,99 Euro.
Pros:
Nachteile:
Die beliebte Font-Ressource fonts.com hat außerdem einen speziellen Web-Font-Dienst eingeführt, der über 8000 Schriften für Ihre Websites enthält. Ähnlich wie bei Typekit handelt es sich um einen abonnementbasierten Dienst, mit der Ausnahme, dass der Preis monatlich festgesetzt wird. Im Vergleich zu Typekit ist das teurer, aber die Schriften sind weit weniger eingeschränkt. Das kostenlose Paket ist sehr günstig und bietet unbegrenzten Zugriff auf 8000 Schriftarten, die Sie auf beliebig vielen Websites verwenden können. Mit dem Professional-Paket können Sie außerdem bis zu 50 Schriftarten herunterladen und auf Ihrem Computer installieren, um sie in Ihren Designs zu verwenden.
Fonts.com Web Fonts bietet einige wirklich großartige Schriften als Teil seiner Sammlung - wie Helvetica, Univers und Franklin Gothic.
Pros:
Nachteile:
Das renommierte Webdesign-Unternehmen Clear Left, das für einige der größten Unternehmen der Welt gearbeitet hat, hat sich mit OmniTI zusammengetan und das Font Deck veröffentlicht. Font Deck ist ein weiterer Dienst auf Abonnementbasis, außer Sie zahlen nur eine jährliche Gebühr für jede einzelne Schriftart, die Sie verwenden. Dies ist ideal für alle, die nur eine oder zwei Schriftarten für ihr persönliches Blog verwenden möchten.
Die Preise für Schriftarten beginnen bei 2,50 US-Dollar pro Jahr und sind für unbegrenzte Seitenaufrufe zulässig. Die gesamte Schriftartauswahl ist auch für einen kostenlosen Versuch verfügbar, auch wenn nur 20 eindeutige IP-Adressen angezeigt werden können. Dieses kostenlose Paket soll die Tatsache kompensieren, dass Sie keine Zeichensätze auf Ihren lokalen Computer herunterladen und während der Entwurfsphase verwenden können. Da das Font-Deck nur relativ neu für die Szene ist, ist die Auswahl an Fonts zur Zeit nicht sehr groß.
Pros:
Nachteile:
Font Spring verfolgt einen etwas anderen Ansatz als die abonnementbasierten Dienste und greift auf die traditionelle Art zurück, Zeichensätze zu kaufen. Schriften werden einzeln erworben und müssen von Ihnen heruntergeladen und auf Ihrem eigenen Webserver gehostet werden. Font Spring schlägt vor, dass 99,9% der verfügbaren Fonts mit @ font-face verwendet werden können.
Jede einzelne Schrift kann im Preis variieren und Sie müssen eine zusätzliche Gebühr für die Lizenz zahlen, um die Schrift mit @ font-face verwenden zu können. Die @ font-face-Lizenz enthält die Desktop-OpenType-Version der Schriftart und die verschiedenen Formate, die Sie für die Verwendung im Web benötigen.
Die Verwendung dieser Methode bietet viele Vorteile. Wenn Sie sich wirklich nur auf eine bestimmte Schriftart festgelegt haben, ist dies möglicherweise die billigere Alternative zu Abonnementdiensten. Sie können die Schriftart für beliebig viele Domains verwenden, sofern Sie die direkte Kontrolle über sie haben und die Anzahl der Seitenaufrufe nicht begrenzt ist.
Als zusätzliche Warnung können Sie die Schriftart nicht mit anderen Technologien wie sIFR oder Cufin konvertieren oder einbetten.
Pros:
Nachteile:
Dies sind nur einige der verfügbaren Font-Services. Es gibt viele weitere, wie zB Typotheque und Webtype. Jeder hat seine eigenen positiven und negativen Ergebnisse und Ihre Wahl sollte auf Ihren persönlichen Bedürfnissen basieren. Einige mögen die Benutzerfreundlichkeit eines Abonnementdienstes genießen, während andere den Gedanken nicht mögen, die Kontrolle über ihre Website einem Dritten zu überlassen. Wenn letzteres der Fall ist, können Sie Ihre eigenen Webfonts mithilfe von Websites wie Font Squirrel herunterladen und hosten.
Die nächsten beiden (sIFR und FLIR) werden im Allgemeinen als "alte Schule" bezeichnet, weil sie viele Probleme haben, aber es lohnt sich, darüber zu diskutieren und zu wissen.
SIFR gibt es schon seit einiger Zeit. Als es zum ersten Mal herauskam, bot es eine effektive Methode, um nicht standardisierte Schriftarten zu integrieren, wenn es wirklich keine andere Option als Bilder gab. sIFR oder Scalable Inman Flash Replacement verwendet eine Kombination aus Flash und Javascript, um Text auf Webseiten in ein Flash-Element zu ändern. sIFR bietet viele Vorteile, da der Text für Bildschirmlesegeräte weiterhin verfügbar ist und weiterhin ausgewählt werden kann.
Der Begriff "skalierbar" im Namen kann jedoch zu Verwirrung führen. sIFR ist skalierbar in dem Sinne, dass das Flash-Element auf die Größe des ursprünglichen Browsertextes skaliert wird. Dadurch kann der gesamte Text innerhalb der angegebenen Abmessungen so groß wie möglich dargestellt werden. Text, der durch ein Flash-Element ersetzt wurde, kann jedoch nicht angepasst werden, wenn ein Benutzer den Text auf einer Seite ändert. was natürlich ein Problem mit der Zugänglichkeit verursacht. sIFR setzt außerdem voraus, dass Flash und Javascript auf dem Computer eines Benutzers aktiviert sind, damit es funktionieren kann.
Mike Davidson, einer der Entwickler von sIFR, erkennt auch die Einschränkungen der Technologie. Mike hat offen erklärt, dass sIFR nicht für große Textkörper verwendet werden sollte, da dies einen spürbaren Einfluss auf die Leistung der Website hat. Mike erkennt auch, dass seine Technologie nicht die endgültige Lösung für die Typografie im Web ist, und bezeichnet sie einfach als "Notlösung"..
Pros:
Nachteile:
FLIR oder Facelift Image Replacement ähnelt sIFR, verwendet jedoch Javascript und PHP, um Bilder anstelle von Flash zu generieren, um Text zu ersetzen. Diese Methode hat den offensichtlichen Vorteil, dass Sie keine Zeit für das Erstellen einzelner Bilder für jeden Text verwenden müssen, für den Sie eine benutzerdefinierte Schriftart verwenden möchten. Wenn Sie sich für eine andere Schriftart oder Farbe für Ihren Text entscheiden, ist es auch viel einfacher, den Text auf Ihrer Website zu aktualisieren.
Abgesehen von der Benutzerfreundlichkeit und dem zeitsparenden Aspekt von FLIR bietet es leider keine große Verbesserung gegenüber der herkömmlichen Methode, Text als Bilder zu speichern. Das Endergebnis bleibt als Text erhalten, der als Bild dargestellt wird, in dem der Text nicht auswählbar oder skalierbar ist.
Pros:
Nachteile:
Das Problem mit Zeichensatzlizenzen ist ein andauerndes Problem, das zum langsamen Fortschritt und zur Einführung von Methoden zum Ersetzen von Zeichensätzen beigetragen hat. Genau wie bei Bildern benötigen Sie die Erlaubnis des Autors in Form eines Endbenutzer-Lizenzvertrags (Endbenutzer-Lizenzvertrag), um eine Schriftart auf Ihrer Website zu verwenden. Einige Lizenzen erlauben die kostenlose Verwendung der Schrift, auch für kommerzielle Zwecke, während andere nur die persönliche Verwendung auf einem lokalen Computer zulassen.
Wenn Sie eine der oben beschriebenen Methoden zum Ersetzen von Schriftarten verwenden, binden Sie effektiv eine Schrift in Ihre Website ein oder verlinken auf eine auf Ihren Webserver hochgeladene Schrift. Dies ist bei vielen, auch nicht bei kostenlosen Schriftlizenzen, zulässig. Der Grund, warum viele Schriftsteller und Hersteller dies nicht zulassen, liegt darin, dass Benutzer der Site direkten Zugriff auf die Schriftdatei haben und sich Sorgen darüber machen, dass ihre Schrift illegal heruntergeladen und verteilt werden kann. Dieses Problem hat verhindert, dass viele Schriftsteller ihre Schriften für Methoden wie @ font-face zur Verfügung stellen.
Es ist daher äußerst wichtig, dass Sie bei Verwendung einer der oben beschriebenen Methoden unbedingt sicherstellen, dass die Zeichensatzlizenz dies zulässt.
Glücklicherweise hat dieses Problem die Entwicklung von Methoden zum Ersetzen von Schriftarten nicht vollständig behindert, und es stehen viele Ressourcen zur Verfügung, mit denen Sie benutzerdefinierte Schriftarten auf Ihrer Website verwenden können.
"Auf Perfektion lohnt es sich nicht zu warten, denn Sie riskieren dabei aufregende neue Möglichkeiten."
Wir haben oben viel diskutiert, und es ist klar, dass es viele Optionen für diejenigen gibt, die in ihren Site-Designs benutzerdefinierte Schriftarten verwenden möchten. Die gute Nachricht ist, dass alle diese Methoden jetzt zur Verfügung stehen. Es ist wahr; Keine der Methoden ist perfekt, jede hat ihre eigenen guten und schlechten Punkte. @ font-face hält offensichtlich das größte Versprechen, aber es wird wahrscheinlich noch einige Jahre dauern, bevor es absolut kugelsicher ist. Die Wahrheit ist, dass die Situation in der Welt des Webdesigns selten perfekt ist. Es gibt immer Kompromisse und Umgehungen, um neue Technologien zu implementieren. Auf Perfektion lohnt es sich nicht zu warten, denn Sie riskieren dabei aufregende neue Möglichkeiten.
Dies ist wirklich eine aufregende Zeit für Webdesign, und es scheint, dass die Typografie im Web immer mehr geschätzt und verstanden wird. Die Methoden zum Ersetzen von Schriftarten bieten eine großartige Möglichkeit, innovative neue Designs zu entwickeln. Ich glaube, der Schlüssel ist nicht, diese Technologie zu missbrauchen. Bieten Sie immer Fallbacks an, wenn etwas schief geht, und wenden Sie jede Methode sinnvoll an (ändern Sie nicht den gesamten Text auf Ihrer Website entsprechend). Nehmen Sie sich die Zeit, um den guten Typ zu schätzen und zu lernen, und das Internet wird ein besserer Ort dafür sein.
Hast du deine eigenen Gedanken dazu? Hast du eine Frage? Wenn wir eine Ihrer Lieblingsmethoden verpasst haben, posten Sie sie unten in den Kommentaren. Wir werden sie in diesen Beitrag aufnehmen!
Accentsconagua