Ich versuche eine vernünftige Lösung (vor allem von der SEO-Seite) zum Einbetten von Schriften in Webseiten zu finden. Bisher habe ich the W3C solution gesehen, die nicht einmal auf Firefox funktioniert, und this pretty cool solution. 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.Wie Schriften in HTML einbetten?
Danke!
Die Dinge haben sich geändert seit dieser Frage wurde ursprünglich gestellt und beantwortet. 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 kombiniert Versuche von mehreren anderen Menschen. 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 snipped:
@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 arbeiten, Font Squirrel eine Vielzahl von nützlichen Tools, einschließlich der @font-face Generator zusammengestellt, die Ihnen eine TTF oder OTF-Datei hochladen und für die automatische umgewandelt Schriftart-Dateien erhalten die anderen Typen, zusammen mit vorgefertigten CSS und einer Demo-HTML-Seite. Font Squirrel hat auch Hundreds of @font-face kits.
Soma Design auch die FontFriend Bookmarklet, die Schriftarten auf einer Seite im laufenden Betrieb 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, das Google Web Fonts, eine Auswahl an Schriftarten, die unter einer Open Source-Lizenz verfügbar sind und von den Servern von Google bereitgestellt werden, bereitzustellen.
Lizenzbeschränkungen
Schließlich hat WebFonts.info zusammen Fonts available for @font-face embedding eine schöne wiki'd Liste der auf Basis von Lizenzen setzen. 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, da es einige Einschränkungen gibt, die offensichtlich nicht auf die Schriftarten heruntergeladen werden.
Ich denke, es ist wert zu betonen, dass Sie nicht automatisch eine Schriftart und @ font-Face-ice nehmen dürfen, auch wenn Sie eine Lizenz dieser Schriftart legal und für eine Menge Geld gekauft haben. Sie müssen die Lizenz der Schrift prüfen, ob diese Art der elektronischen Weiterverbreitung erlaubt ist oder nicht. Verstöße sind so leicht zu erkennen und zu untersuchen, dass es sonst leicht zu Schwierigkeiten kommen kann, insbesondere wenn Sie ein Unternehmen sind, das sich in der richtigen Gerichtsbarkeit befindet. –
FontSquirrel macht dies sowohl auf seinen vorinstallierten Font-Kits als auch in seinem Generator deutlich (das erfordert, dass Sie überprüfen, ob die Zeichensätze tatsächlich für eine solche Verwendung lizenziert sind). Es gibt andere Conversion-Tools, aber ich weiß nicht, welche die Lizenzierung diskutieren. – fencepost
Ich überarbeitet, um dies klarer in meiner Antwort zu machen. – fencepost
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 eine Weile back.
Hey, ich war gerade dabei, diesen Link zu posten, upvote stattdessen. – Kris
Ich fragte diese a while back. Die Antwort ist im Grunde, dass es nicht funktioniert. :(
wahr, danke für die referenz! –
Nein, ist es nicht eine anständige Lösung für Körper-Typen, es sei denn, Sie bereit sind, nur mit bleeding-edge-Browsern zu denen gerecht zu werden.
Microsoft hat WEFT, ihre eigene proprietäre font-Embedding-Technologie , aber ich habe nicht gehört es in Jahren gesprochen, und ich kenne niemand, der es verwendet.
Ich komme mit sIFR für Display-Typ (Überschriften, Titel von Blog-Posts, etc.) und mit einem der Weniger abgenutzte websichere Schriftarten für den Körpertyp (wie Trebuchet MS). Wenn Ihnen alle websicheren Schriftarten langweilig sind, definieren Sie den Begriff wahrscheinlich zu eng - sehen Sie sich this matrix of stock fonts an, die mit den wichtigsten Betriebssystemen ausgeliefert werden Chancen bist du ' Ich werde in der Lage sein, eine Font-Kaskade zu finden, die fast alle Web-Nutzer erfasst.
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.
Lassen Sie mich auch für eine Minute auf der Seifenkiste stehen: obwohl ich wünschte, Windows hätte mehr "gute" Schriften (OS X hat die größten Hits der Typografiegeschichte: Futura, Helvetica, Gill Sans, etc.), ist es eine gute Sache, dass wir müssen sich bei der Auswahl von Schriften zurückhalten. 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 nochmal. –
Hier ist eine Liste: (http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html). Es ist konservativ, nur Schriften auflistet, die identisch (oder fast) über Plattformen sind. Möglicherweise müssen Sie einen Vergleich durchführen, um zu sehen, welche "sichere" Schriftart Ihrer "riskanten" Schriftart am ähnlichsten ist. – savetheclocktower
Versuchen Sie Facetype.js, konvertieren Sie Ihre .TTF Schriftart in eine Javascript-Datei. Kompatibel mit SEO, unterstützt FF, IE6 und Safari und verschlechtert sich in anderen Browsern.
Sehr sehr cool. Ich werde das überprüfen. –
Für diejenigen, die sich fragen, wie es funktioniert, verwendet es den Canvas-Tag (HTML 5) oder VML. –
Ich würde dieser Lösung zustimmen müssen, es sieht extrem einfach aus und scheint an jedem Browser zu arbeiten, den ich darauf werfe. – askon
Check out Typekit, eine kommerzielle Option (sie haben auch ein kostenloses Paket).
Es verwendet verschiedene Techniken, je nachdem, welcher Browser verwendet wird (@font-face vs. EOT Format), und sie kümmern sich um alle Fragen zur Schriftlizenzierung für Sie auch. Es unterstützt alles bis IE6.
Hier einige weitere Informationen darüber, wie Typekit funktioniert:
X-Ref [Wie einige Nicht-Standard-Schriftart auf eine Website hinzufügen?] (Http://stackoverflow.com/q/107936/367456) – hakre
mögliches Duplikat von [Schriftarten im Internet] (http://stackoverflow.com/questions/16233/fonts-on-the-web) – user2284570
@ user2284570 Diese Frage hat eine bessere Antworten. Ich habe den anderen als Duplikat geschlossen. –