Frage Wie füge ich Schriftarten in HTML ein?


Ich versuche, eine vernünftige Lösung (insbesondere von der SEO-Seite) für die Einbettung von Schriften in Webseiten zu finden. Bisher habe ich gesehen die W3C-Lösung, die nicht einmal unter Firefox funktioniert, und diese ziemlich coole Lösung. Die zweite Lösung ist nur für Titel. Gibt es eine Lösung für den Volltext? Ich habe genug von den Standardschriften für Webseiten.

Vielen Dank!


75
2017-10-20 22:57


Ursprung


Antworten:


Dinge haben sich geändert da diese Frage ursprünglich gestellt und beantwortet wurde. Es wurde viel getan, um die browserübergreifende Schrifteinbettung für Fließtext mit der @ font-face-Einbettung arbeiten zu lassen.

Paul Irish zusammen Bulletproof @ font-face-Syntax Kombinieren von Versuchen von mehreren anderen Personen. Wenn Sie tatsächlich den gesamten Artikel (nicht nur den oberen) durchgehen, erlaubt es eine einzelne @ font-facet-Anweisung, IE, Firefox, Safari, Opera, Chrome und möglicherweise andere zu umfassen. Im Grunde kann dies OTF, EOT, SVG und WOFF auf eine Art und Weise ausgeben, die nichts unterbricht.

Aus seinem Artikel ausgeschnitten:

@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");
}

Von dieser Basis ausgehend, Schriftart Eichhörnchen zusammenstellen eine Vielzahl von nützlichen Werkzeugen einschließlich der @ font-face Generator Damit können Sie eine TTF- oder OTF-Datei hochladen und automatisch konvertierte Font-Dateien für die anderen Typen zusammen mit vorgefertigten CSS- und einer Demo-HTML-Seite erhalten. Font Squirrel hat auch Hunderte von @ font-face-Kits.

Soma Design hat auch die FontFriend-Lesezeichen, die Schriften auf einer Seite im Handumdrehen neu definiert, so dass Sie Dinge ausprobieren können. Es enthält Drag-and-Drop @ Font-Face-Unterstützung in FireFox 3.6 +.

In jüngerer Zeit hat Google damit begonnen, die Google Web-Schriftarten, eine Auswahl an 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 nette Wiki-Liste zusammengestellt Verfügbare Schriftarten für @ font-face embedding basierend auf Lizenzen. Es erhebt keinen Anspruch auf eine erschöpfende Liste, aber Schriftarten darauf sollten verfügbar sein (möglicherweise mit Bedingungen wie einer Zuordnung in der CSS-Datei) zum Einbetten / Verknüpfen. Es ist wichtig, die Lizenzen zu lesen, weil es einige Einschränkungen gibt, die offensichtlich nicht auf den Font-Downloads nach vorne geschoben werden.


126
2017-12-27 22:27



Versuchen Facetype.jsKonvertieren Sie Ihre .TTF-Schriftart in eine Javascript-Datei. Kompatibel mit SEO, unterstützt FF, IE6 und Safari und verschlechtert sich in anderen Browsern.


9
2018-02-15 11:22



Nein, es gibt keine vernünftige Lösung für den Körpertyp, es sei denn, Sie sind nur bereit für diejenigen, die über modernste Browser verfügen.

Microsoft hat SCHUSS, ihre eigene proprietäre Schrifteinbettungstechnologie, aber ich habe es seit Jahren nicht mehr gehört und kenne niemanden, der es benutzt.

Ich komme mit sIFR für Display-Typ (Überschriften, Titel von Blog-Posts, etc.) und mit einer der weniger abgenutzten Web-Safe-Schriften für Body-Typ (wie Trebuchet MS). Wenn Sie mit allen websicheren Schriften gelangweilt sind, definieren Sie den Begriff wahrscheinlich zu eng - schauen Sie sich an diese Matrix von Lagerschriften Dieses Schiff mit großen Betriebssystemen und Chancen, dass Sie in der Lage sein werden, eine Font-Kaskade zu finden, die fast alle Web-Nutzer fangen wird.

Zum Beispiel: font-family: "Lucida Grande", "Verdana", sans-serif ist eine häufige Font-Kaskade; OS X wird mit Lucida Grande geliefert, aber Windows erhält Verdana, eine websichere Schriftart mit Buchstaben von ähnlicher Größe und Form wie Lucida Grande. Linux-Benutzer erhalten Verdana auch, wenn sie das Paket für websichere Zeichensätze installiert haben, das in den meisten Paketverwaltern der Distributionen vorhanden ist. Andernfalls werden sie auf eine normale Sans-Serif-Datei zurückgreifen.


6
2017-10-20 23:17



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


4
2017-10-20 23:06



Auschecken Typekit, eine kommerzielle Option (sie haben auch ein kostenloses Paket).

Je nachdem, welcher Browser verwendet wird, werden unterschiedliche Techniken verwendet (@font-face gegen EOT Format), und sie kümmern sich auch um alle Fragen zur Lizenzierung von Schriften. Es unterstützt alles bis IE6.

Hier finden Sie weitere Informationen zur Funktionsweise von Typekit:


3
2017-12-27 22:29



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


2
2017-10-20 23:17