Wie Schriftarten in HTML einzubetten?

StackOverflow https://stackoverflow.com/questions/220236

Frage

Ich versuche, eine anständige Lösung, um herauszufinden, (vor allem von der SEO-Seite) für Schriften in Webseiten einbetten. Bisher habe ich gesehen die W3C-Lösung , die nicht einmal auf Firefox funktioniert, und diese ziemlich cool Lösung . Die zweite Lösung ist für den Titel nur. Gibt es eine Lösung für Volltext zur Verfügung? Ich bin müde von den Standard-Schriften für Web-Seiten.

Danke!

War es hilfreich?

Lösung

haben sich die Dinge geändert , da diese Frage wurde ursprünglich gestellt und beantwortet. eine große Menge an Arbeit Es gab für Körper auf immer Cross-Browser-Schriftart erfolgte Text Einbetten mit @ font-face Einbettung zu arbeiten.

Paul Irish zusammen Bulletproof @ font-face-Syntax Kombination Versuche von mehreren anderen Personen. Wenn Sie tatsächlich durch den gesamten Artikel gehen (nicht nur die oben) es kann eine einzelne @ font-face-Anweisung IE decken, Firefox, Safari, Opera, Chrome und möglicherweise andere. Grundsätzlich kann dieses ausfädeln OTF, EOT, SVG und WOFF in einer Weise, die nichts brechen.

snipped aus seinem Artikel: 

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

Arbeiten von dieser Basis, Font Squirrel eine Vielzahl von nützlichen Tool zusammen mit dem @ font-face Generator , die Ihnen eine TTF oder OTF-Datei hochladen und erhalten auto- Font-Dateien für die anderen Typen umgewandelt, zusammen mit vorgefertigten CSS und einer Demo-HTML-Seite. Font Squirrel hat auch Hunderte von @ font-face-Kits .

Soma Entwurf auch zusammen der FontFriend Bookmarklet , die Schriften auf einer Seite on the fly neu definiert, so Sie können Dinge ausprobieren. Es enthält Drag-and-Drop @ font-face-Unterstützung in FireFox 3.6 +.

Vor kurzem Google hat damit begonnen, die Google Web Fonts zur Verfügung zu stellen, eine Auswahl von Schriftart verfügbar unter einem Open-Source-Lizenz und serviert von den Google-Servern.

Lizenzbeschränkungen

Schließlich hat WebFonts.info zusammen eine schöne wiki'd Liste der Schriftarten für @ font-face Einbettung basierend auf Lizenzen. Es erhebt keinen Anspruch auf eine erschöpfende Liste zu sein, aber Schriften darauf sollten (eventuell mit Bedingungen wie zum Beispiel einer Zuschreibung in der CSS-Datei) zum Einbetten / Verlinkung zur Verfügung. Es ist wichtig, die Lizenzen , zu lesen, da gibt es einige Einschränkungen, die nicht nach vorne offensichtlich auf den Schriftarten Downloads geschoben werden.

Andere Tipps

Versuchen Sie Facetype.js , Sie wandeln Sie Ihre. TTF Schriftart in eine Javascript-Datei. Voll SEO kompatibel, unterstützt FF, IE6 und Safari und degradiert anmutig auf anderem Browser.

Nein, es gibt keine 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 TRESSEN , ihre eigene proprietäre font-Embedding-Technologie, aber ich habe nicht in Jahren gehört es darüber gesprochen, und ich kenne niemanden, der es verwendet.

Ich komme zurecht mit sIFR für Darstellungsart (Schlagzeilen, Titel von Blog-Posts, etc.) und mit einem der weniger abgenutzten websicherer Schriftart für Körper-Typen (wie Trebuchet MS). Wenn Sie mit allen Web-Safe-Fonts langweilig sind, sind definieren Sie wahrscheinlich den Begriff zu eng - Blick auf

Und es ist zu unwahrscheinlich - EOT ist ein ziemlich restriktives Format, das nur von IE unterstützt wird. Sowohl Safari 3.1 und Firefox 3.1 (auch die aktuelle Alpha) und möglicherweise Opera 9.6 Unterstützung True Type Font (TTF) Einbetten und mindestens Safari unterstützt SVG-Fonts durch den gleichen Mechanismus. Eine Liste abgesehen hatte eine gute Diskussion über diese eine Weile zurück .

Schauen Sie sich Typekit , eine kommerzielle Option (sie zur Verfügung haben auch ein kostenloses Paket).

Es nutzt verschiedene Techniken je nachdem, welcher Browser (@font-face vs. EOT-Format) verwendet wird, und sie kümmern sich um alle Schriftlizenzfragen auch für Sie. Es unterstützt alles bis auf IE6.

Hier einige weitere Informationen darüber, wie Typekit funktioniert:

Ich fragte diese zurück. Die Antwort ist im Grunde, dass es nicht funktioniert. : (

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top