Wie binde ich Schriftarten in HTML ein?

Ich versuche, eine anständige Lösung (insbesondere von der SEO-Seite) für das Einbetten von Schriftarten in Webseiten zu finden. Bisher habe ich die W3C-Lösung gesehen , die unter Firefox nicht einmal funktioniert, und diese ziemlich coole Lösung . Die zweite Lösung gilt nur für Titel. Gibt es eine Lösung für Volltext? Ich habe die Standardschriftarten für Webseiten satt.

Vielen Dank!

Die Dinge haben sich geändert, seit diese Frage ursprünglich gestellt und beantwortet wurde. Es wurde viel Arbeit geleistet, um die browserübergreifende Einbettung von Schriftarten für Textkörper mithilfe der Einbettung von @ font-face zu erreichen.

Paul Irish hat die Bulletproof @ font-face-Syntax zusammengestellt, die Versuche mehrerer anderer Personen kombiniert. Wenn Sie tatsächlich den gesamten Artikel durchgehen (nicht nur den oberen), kann eine einzelne @ font-face-Anweisung IE, Firefox, Safari, Opera, Chrome und möglicherweise andere abdecken. Grundsätzlich kann dies OTF, EOT, SVG und WOFF auf eine Weise versorgen, die nichts kaputt macht.

Aus seinem Artikel herausgeschnitten:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

Auf dieser Basis hat Font Squirrel eine Reihe nützlicher Tools zusammengestellt, darunter den @ font-face Generator , mit dem Sie eine TTF- oder OTF-Datei hochladen und automatisch vorkonvertierte Schriftdateien für die anderen Typen sowie vorgefertigtes CSS und erhalten können eine Demo-HTML-Seite. Font Squirrel hat auch Hunderte von @ font-face-Kits .

Soma Design hat auch das FontFriend-Lesezeichen zusammengestellt , mit dem Schriftarten auf einer Seite im laufenden Betrieb neu definiert werden, damit Sie Dinge ausprobieren können. Es enthält Drag-and-Drop-Unterstützung für @ font-face in FireFox 3.6+.

In jüngerer Zeit hat Google damit begonnen, Google Web Fonts bereitzustellen , eine Auswahl von Schriftarten, die unter einer Open Source-Lizenz verfügbar sind und von den Servern von Google bereitgestellt werden.

Lizenzbeschränkungen

Schließlich hat WebFonts.info eine schöne Wiki-Liste mit Schriftarten zusammengestellt, die für das Einbetten von @ font-face basierend auf Lizenzen verfügbar sind . Es erhebt keinen Anspruch auf Vollständigkeit, aber Schriftarten sollten zum Einbetten / Verknüpfen verfügbar sein (möglicherweise unter Bedingungen wie einer Zuordnung in der CSS-Datei). Es ist wichtig, die Lizenzen zu lesen , da es einige Einschränkungen gibt, die beim Herunterladen von Schriftarten nicht offensichtlich vorangetrieben werden.

Versuchen Sie Facetype.js , Sie konvertieren Ihre .TTF-Schriftart in eine Javascript-Datei. Voll SEO-kompatibel, unterstützt FF, IE6 und Safari und verschlechtert sich in anderen Browsern.

Nein, es gibt keine vernünftige Lösung für den Körpertyp, es sei denn, Sie sind bereit, nur diejenigen mit modernsten Browsern zu bedienen.

Microsoft hat WEFT , eine eigene Technologie zum Einbetten von Schriftarten, aber ich habe seit Jahren nicht mehr darüber gesprochen, und ich kenne niemanden, der sie verwendet.

Ich komme mit sIFR für den Anzeigetyp (Überschriften, Titel von Blog-Posts usw.) aus und verwende eine der weniger abgenutzten web-sicheren Schriftarten für den Körpertyp (wie Trebuchet MS). Wenn Sie sich mit all den web-sicheren Schriftarten langweilen, definieren Sie den Begriff wahrscheinlich zu eng. Sehen Sie sich diese Matrix von Standardschriftarten an , die mit den wichtigsten Betriebssystemen geliefert werden, und es besteht die Möglichkeit, dass Sie eine entsprechende Schriftkaskade finden fangen fast alle Webbenutzer.

Zum Beispiel: font-family: "Lucida Grande", "Verdana", sans-serifist eine übliche Schriftkaskade; OS X wird mit Lucida Grande geliefert, aber diejenigen mit Windows erhalten Verdana, eine web-sichere Schriftart mit Buchstaben ähnlicher Größe und Form wie Lucida Grande. Linux-Benutzer erhalten Verdana auch, wenn sie das web-sichere Schriftartenpaket installiert haben, das in den Paketmanagern der meisten Distributionen vorhanden ist, oder sie greifen auf eine normale serifenlose Schrift zurück.

Und es ist auch unwahrscheinlich - EOT ist ein ziemlich restriktives Format, das nur vom IE unterstützt wird. Sowohl Safari 3.1 als auch Firefox 3.1 (auch das aktuelle Alpha) und möglicherweise Opera 9.6 unterstützen das Einbetten von True Type-Schriftarten (ttf), und zumindest Safari unterstützt SVG-Schriftarten über denselben Mechanismus. Eine Liste hatte auseinander eine gute Diskussion über dieses eine Weile zurück .

Schauen Sie sich Typekit an , eine kommerzielle Option (es gibt auch ein kostenloses Paket).

Je nachdem, welcher Browser verwendet wird (im @font-faceVergleich zum EOTFormat), werden unterschiedliche Techniken verwendet , und alle Probleme mit der Schriftlizenzierung werden auch für Sie gelöst. Es unterstützt alles bis auf IE6.

Hier finden Sie weitere Informationen zur Funktionsweise von Typekit:

• http://forabeautifulweb.com/blog/about/first_impressions_of_typekit
• http://www.sitepoint.com/blogs/2009/06/01/web-fonts-get-real-with-typekit/

Ich habe das vor einiger Zeit gefragt . Die Antwort ist im Grunde, dass es nicht funktioniert. :(