Welche Browser unterstützen die Schrifteinbettung?

Question

Ich habe über die @ font-face-Regel gelesen und versucht herauszufinden, ob es sich lohnt, sie in einem Projekt zu verwenden, um "franklin gothic medium" für Titel anstelle von sIfr zu rendern. Ich habe mir gedacht, dass ich es für Browser, die es nicht unterstützen, auf Arial zurückgreifen kann.

Die Sache ist, dass ich Probleme habe, eine endgültige Antwort darüber zu bekommen, welche Browser die Einbettung von Schriften auf diese Weise unterstützen.

Bisher habe ich den IE ausgearbeitet, unterstützt aber keine .ttf-Dateien. Andere Browser bin ich mir nicht sicher.

Wenn jemand mich auf einige kinf der Kompatibilität Diagramm hinweisen könnte, wäre das großartig.

Jon

Answer 1

This article diskutiert Browser-Unterstützung über auf halbem Weg in Hier ist das relevanteste Bit, obwohl das Ganze wert ist ein Lese.

CSS3 (und sogar Entwürfe von CSS2 in den Jahren 1997 und 1998) haben seit langem eine standardisierte Art der Schrifteinbettung mit der @ font-face-Regel versprochen. Was viele Leute wahrscheinlich nicht wissen, ist, dass diese Regel bereits in Opera 9.5 unterstützt wird, indem sie Safari-Versionen für Mac, Windows und iPhone OS liefert und für Firefox 3.1, sowie IE6 und höher versprochen wird.
Leider, während Unterstützung für @ font-Face für Opera 9.5 und Firefox 3.1 angedeutet wurde (siehe meine Kommentare auf # 4 unten) ist dies in der Tat leider nicht der Fall.

Es gibt jedoch einen Haken. Alle anderen Browser als IE unterstützen die Verknüpfung mit TrueType-Schriftartdateien. Microsoft unterstützt nur das proprietäre EOT-Dateiformat.

EDIT: Einschließlich this update von Ric Tokyo Antwort.

[Update 2] Opera 10 und Firefox 3.1 unterstützen jetzt das Verknüpfen mit TrueType und OpenType (aber nicht EOT) in aktuellen Alphas oder Betas.

Answer 2

Sie nicht, Ihre beste Wette ist so etwas wie die folgenden Funktionen ausführen:

<h1 id="MyHeading">my heading</h1> 

h1#MyHeading { 
    text-indent: -1000px; 
    width: 200px; 
    height: 50px; 
    background-image: url(myheading.jpg); 
} 

This Aricle erklärt einige andere Alternativen.

Edit: Ich weiß nicht, warum das wurde downvoted. Unter dem Strich gibt es keinen barrierefreien, seo-freundlichen Weg, um zu tun, was Sie wollen, was von allen Browsern unterstützt wird. Wenn Sie Ihre Benutzer entfremden möchten, dann gehen Sie für eine der anderen Lösungen. Ansonsten behalte meine User glücklich mit meiner -1.

Answer 3

web kit also does

quirks mode hat für eine lange Zeit für js und CSS eine gute Ressource für die Kompatibilität Tabellen gewesen

Answer 4

Ich erinnere mich an Safari Leute stolz einen Blog-Post zu schreiben, dass Webkit ttf fonts herunterladen konnte und sie verwenden automatisch, wenn sie in der Seitenquelle sind. IE hat das Herunterladen von Bitmap-Schriftarten für immer unterstützt.

Answer 5

@nezroy, here ist ein Update:

[Update 2] Opera 10 und Firefox 3.1 nun die Anbindung an Truetype und Opentype-Unterstützung (aber nicht EOT) in derzeit Alphas oder Betas Versand.

Answer 6

Wenn Sie keine Angst vor Java-Skripten haben, könnte Ihnen dieser Beitrag helfen: http://www.webresourcesdepot.com/use-any-font-via-javascript-typefacejs/.

Ich habe es selbst nicht verwendet, aber es promisses jede Schriftart auf jedem Browser suport ...

Answer 7

Safari 3.1 (und Webkit Nightly baut), Firefox 3.1 und Opera 10 support @ font-face Einbettung für .ttf (TrueType-Schriftarten) und .otf (OpenType-Schriftarten). Internet Explorer Version 5+ unterstützt nur @ font-face embedding für .eot (ein proprietäres eingebettetes offenes Format).

Microsoft stellt ein kleines Tool zur Umwandlung von Schriftarten mit der Bezeichnung WEFT (nur Windows) her, mit dem Sie die meisten Schriftartenformate in .eot konvertieren können.

CSS3.info hat eine nette, brief tutorial zur Verwendung der @ font-Face-Regel. Die Seite ist eine großartige Ressource für das Spielen mit CSS3-Tricks (oder in diesem Fall CSS2 vorgeschlagene Tricks).

Es gibt einen gründlicheren Artikel zu diesem Thema auf A List Apart.

Stellen Sie sicher, dass alle Schriftarten, die Sie in eine Webseite einbetten, angeben, dass dies in ihren Lizenzen möglich ist, da die Schriftart auf Ihrem Webserver in einem öffentlichen Verzeichnis verfügbar ist. Diese Verwendung ist nicht immer explizit in der Lizenz abgedeckt, aber Sie können den Designer in der Regel direkt kontaktieren, um zu fragen. In der Regel können Sie eine Schriftart verwenden, solange Sie einen Link zu ihrer Seite einfügen. Ich bin mir nicht sicher, ob Franklin Gothic Medium für diesen Zweck zugelassen ist, aber ich bezweifle, dass es das ist.

Hier sind einige Ressourcen für kostenlose Schriftarten. Wenn Sie genug graben tun, können Sie in der Regel ein ähnliches Gesicht finden, die für Sie arbeiten:

• Ray Larabie
• Dieter Steffmann
• Jos Buivenga

Answer 8

OK, so dass ich denke, die beste Art und Weise zu tun Dies ist wie folgt ....

• Verwenden Sie eine TTF-Schriftart in der ersten Instanz
• Zurück auf eine OET-Schriftart für IE
• Zurück auf Arial, Sans-Serif für Browser, die eingebettete Schriftarten überhaupt nicht unterstützen.

Großartig, jetzt muss ich nur ein paar EOT-Fonts finden.

Answer 9

Schrieb über es hier:

http://interactivity.ifactory.com/2010/04/font-face/

Grundsätzlich 95% der modernen Browsern nun unterstützen:

IE6 +, FF 3.5+, Chrome, Safari 3.1+, Opera.