Wie binde ich Schriftarten in HTML ein?

80

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!

Dan Rosenstark
quelle
Mögliches Duplikat von Schriftarten im Web
user2284570
2
@ user2284570 Diese Frage hat eine bessere Antwort. Ich habe den anderen als Duplikat davon geschlossen.
Madaras Geist
Irgendwelche aktualisierten Antworten auf diese Frage? Alle Antworten sind mehr als ein halbes Jahrzehnt alt. Außerdem konnte ich auf MDN keine Referenz finden, wenn jemand weiß.
1,21 Gigawatt
Bitte geben Sie eine aktualisierte Antwort und helfen Sie der Welt. Ich habe seit 2011 selbst kein HTML mehr gemacht
Dan Rosenstark

Antworten:

134

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.

Zaunpfosten
quelle
11
Ich denke, es ist erwähnenswert, dass Sie nicht automatisch eine Schriftart und @ font-face-ize verwenden dürfen, selbst wenn Sie eine Lizenz für diese Schriftart legal und für viel Geld gekauft haben. Sie müssen die Lizenz der Schriftart überprüfen, um festzustellen, ob diese Art der elektronischen Weiterverteilung zulässig ist oder nicht. Verstöße sind so leicht zu erkennen und zu schleppen, dass es sonst leicht zu Problemen kommen kann, insbesondere wenn Sie ein Unternehmen sind, das sich in der richtigen Gerichtsbarkeit befindet.
Pekka
FontSquirrel macht dies sowohl in seinen vorgefertigten Schriftarten-Kits als auch in seinem Generator deutlich (wobei Sie überprüfen müssen, ob die Schriftarten tatsächlich für eine solche Verwendung lizenziert sind). Es gibt andere Konvertierungstools, aber ich weiß nicht, welche die Lizenzierung diskutieren.
Zaunpfosten
Faszinierendes Zeug. Wie sind Sie aus Neugier zu diesem Beitrag gekommen? Es gab mehr als eine Antwort am selben Tag und mehrere Kommentare zu Ihrer Antwort. +1 ...
Dan Rosenstark
1
Ich erinnere mich nicht, wie ich darauf gekommen bin - vielleicht nach HTML-Schriftarten suchen, aber ich habe geantwortet, weil ich kurz vor Weihnachten für einen Kunden daran gearbeitet habe, damit die Informationen frisch waren. Ich nehme an, Pekka sah es als neue Aktivität auf einem alten Posten an. Ich weiß nicht, ob die Systemflags versuchen, mehrere Links zu veröffentlichen (ich weiß, dass sie anfangs blockiert wurden), aber ich dachte, es könnte sich um "Überprüfen Sie dies, um sicherzustellen, dass es sich nicht um Spam handelt" handeln.
Zaunpfosten
@ Pekka "Verstöße sind so einfach zu erkennen und zu durchsuchen" ... können Sie mich bitte ein wenig aufklären ... wie würde diese Erkennung und das Schleppen erfolgen und unter welchen Umständen würde es passieren?
Dan Rosenstark
9

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.

Martin Meixger
quelle
2
Für diejenigen, die sich fragen, wie es funktioniert, wird das Canvas-Tag (HTML 5) oder VML verwendet.
Chris S
1
Ich müsste dieser Lösung zustimmen, sie sieht extrem einfach aus und scheint auf jedem Browser zu funktionieren, den ich darauf wirf.
Askon
1
Dieser Link ist tot.
Aleclarson
6

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.

savetheclocktower
quelle
2
Lassen Sie mich auch eine Minute auf der Seifenkiste stehen: Obwohl ich mir wünschte, Windows hätte mehr "gute" Schriftarten (OS X hat die größten Hits der Typografie-Geschichte: Futura, Helvetica, Gill Sans usw.), ist es eine gute Sache, die wir haben um uns bei der Auswahl von Schriftarten zurückzuhalten. Freiheit kann auch für das Böse genutzt werden.
savetheclocktower
Kein Kommentar zu Ihrem Kommentar, aber danke für die Antwort. Das ist großartig. Gibt es irgendwo eine Liste von Kaskaden? Danke noch einmal.
Dan Rosenstark
Hier ist eine Liste: ( ampsoft.net/webdesign-l/WindowsMacFonts.html ). Es ist konservativ und listet nur Schriftarten auf, die plattformübergreifend identisch (oder nahezu identisch) sind. Möglicherweise müssen Sie einen Vergleich durchführen, um festzustellen, welche "sichere" Schriftart Ihrer "riskanten" Schriftart am ähnlichsten ist.
savetheclocktower
(Oh, auch: Geben Sie immer einen allgemeinen Fallback an - serifenlos, serifenlos oder monospace. Auf diese Weise befindet es sich zumindest im Baseballstadion, falls der Benutzer keine der von Ihnen angeforderten Schriftarten hat.)
savetheclocktower
1
Die meisten Benutzer, die zu den Websites kommen, an denen ich arbeite, verwenden immer noch IE6 (diese Bastarde). Aus dieser Sicht halte ich die neuesten Hauptversionen für auf dem neuesten Stand.
Gene
4

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 .

olliej
quelle
3

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:

Philfreo
quelle
2

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

Marcus Downing
quelle