Gründliche Untersuchung von @font-face

Gründliche Untersuchung von @font-face
Copyright © 2009 – 2012 — Zoltan “Du Lac” Hawryluk
For original English text, go to: http://www.useragentman.com
Translated by A.Romanova

Updates

(13.Oktober,2009): Ich habe einen Nachfolgeartikel geschrieben, der SVG Schriftarten erforscht, Opera 10 Ausgabe, und mehr.

Photo durch marta b. (Quelle: Flickr)

Als ich einem meiner Mitarbeiter erzählt habe, wie aufgeregt ich war, dass fast alle Hauptbrowser-Verkäufer jetzt Schrifteinbettung in ihren Produkten unterstützt haben, habe ich dieselbe Reaktion von ihr bekommen, die Bert von der Sesame Street bekommen hat, als er Ernie erzählt hat, wie aufregend er dachte, dass das Flaschenkapsel-Sammeln war (Ja, unentgeltlicher Spott wurde beteiligt). Jetzt, während ich ihr Desinteresse auf einer Weise verstehen kann (sie ist nicht ein Vorderende-Webentwickler, aber ein Java-Programmierer), ich verteidige meine Begeisterung, indem ich hier feststelle, dass Schriftarten ein wirklich wichtiger Teil des Webdesigns sind, und die Tatsache, dass wir jetzt jede Schriftart theoretisch wählen können, um innerhalb unserer Webseiten und Anwendungen einzubetten, ist gibt einen Grund zu feiern.

Natürlich, Workarounds wie sIFR und Cufón wurden für eine ganze Weile bestanden, aber sie haben Nachteile (sie beide werden am besten nur für Überschriften verwendet, und Cufón macht keinen Gut beim Erlauben des Kopierens und Aufkleben seines Inhalts). Wenn Sie wirklich Schriftarten in Ihrem Webseiten einbetten wollen, glaube ich @font-face die zukunftssichere Auswahl ist.

Warum Sorge über Schriftarten machen?

Mein Java Entwickler-Kollege kann nicht verstehen, warum Schriftarten wichtig sind, aber sie ist ein regelmäßiger Leser von The New-Yorker. Obwohl seine Website @font-face Einbettung nicht verwendet (die Standard-New-Yorker-Schriftart wird in der Seite mit Images eingebettet), die Entwickler der Seite wissen offensichtlich, warum Schriftarten wichtig sind:

  • Schriftarten ermitteln wem der Inhalt gehört. Nur werfen Sie einen Blick über den Inhalt und ohne auf die URL-ADRESSE-Bar zu schauen, Sie wissen genau wo Sie sich befinden – diese Schriftart in die Identität und das Einbrennen dieser Organisation hoch integriert wird. Ersetzen Sie die New-Yorker-Schriftart durch Arial, und es wird wie jede alte Website aussehen.
  • Schriftarten haben eine emotionale Vereinigung dem Inhalt gegeben. Der Inhalt hat eine Luft der Autorität wegen der Schriftart, die es verwendet (schließlich sieht es aus, wie es vom New-Yorker geschrieben wurde). Das ist der Grund, warum Phishing-Seiten die Schriftarten, Farben und Firmenzeichen der Banken verwenden, dafür sie ausgeben.
  • Schriftarten können helfen (oder hindern) der Inhalt-Leserlichkeit. Der Inhalt zu scannen, können Sie erzählen, wo die Artikel-Titeln sich befinden, wo die Navigation ist, und zu welcher Abteilung jeder Artikel gehört. Das ist alles wegen der Weise, wie Schriftarten auf der Seite verwendet werden.

The New-Yorker verwendet Images, um Schriftarten zu zeigen. Effektiv die Schrifteneinbettung zu verwenden, würde auf der Bandbreite sparen, seitdem ein Schriftart-Download für alle Überschriften auf der Seite verwendet werden konnte.

Unterstützte Schriftenformate

Firefox 3.5 +, Safari 3.1 +, Opera 10 + und Internet Explorer 4.0 + alle unterstützen die @font-face Einbettung (Google Chrom 3.0 Beta funktioniert auch sowie, aber Benutzer werden es in einer speziellen Weise in Gang bringen müssen, um es kurzfristig arbeiten zu lassen). Sie alle unterstützen den Gebrauch von TrueType (.ttf) und OpenType (.otf) Schriftarten … abgesehen von Internet Explorer, der nur den eigenen Eingebetteten Open Type (.eot) Format unterstützt. Es gibt nicht viele Schriftarten, als in diesem Format und das Microsoft Werkzeug teilt diese aus, das .ttf Schriftarten zu.eot umsetzt, genannt WEFT, ist ziemlich enttäuschend zu verwenden, und sogar auf Vista abstürzt. Es gibt jedoch ein ausgezeichnetes Kommandozeile-Werkzeug, ttf2eot, der einen viel besseren Job tut. Sowohl WEFT als auch ttf2eot wandeln nur TrueType zum Eingebetteten Offenen Typ um – wenn Sie eine Schriftart von OpenType zum Eingebetteten Open Type umwandeln wollen, ist es notwendig FontForge ein freies Schriftart editierendes Werkzeug zu verwenden, um die Schriftart zu TrueType zuerst umzuwandeln, und dann ttf2eot zu verwenden, um die resultierende Schriftart zu .eot-Format umzuwandeln. Obwohl diese Methode umschweifig ist und ergibt mit einem Verlust des Details wegen des Weges wie die Schriftart-Formate die Information speichern, ist es die einzige Weise wie ich kenne diese Konvertierung zu machen.

Für mehr Detail darauf wie man.eot Schriftart-Konvertierungen mit ttf2eot und FontForge durchführt, überprüfen Sie den großen Artikel How to create EOT files without Microsoft WEFT

Wovon kann man Schriftarten bekommen, die Sie in Webseiten gesetzlich verwenden können.

Obwohl es jetzt technisch möglich ist, fast jede Schriftart innerhalb einer Webseite einzubetten, ist es wichtig sich zu erinnern, dass, wenn Sie eine kommerzielle Schriftart für diesen Zweck verwenden, brauchen Sie damit eine Lizenz zu haben, um das zu tun. Da eine Schriftart auf einer Website aufzustellen, wird jedem im Web erlauben, das herunterzuladen, viele Schriftgießereien erlauben zurzeit ihren Schriftarten nicht, für das Webseite-Einbetten verwendet zu werden. Es ist aus diesem Grund, dass sich die Browser-Verkäufer dagegen gesträubt haben, diese Technologie in ihre Produkte bis neulich durchzuführen (das Schriftart-Einbetten ist ein Teil der CSS2 Spezifizierung, die ringsherum seit 1998 gewesen ist).

Glücklicherweise gibt es einige Seiten, die austeilen, was die anfängliche Arbeit für Sie durch die Auflistung von Schriftarten getan haben, die das Schriftart-Einbetten auf Webseiten gesetzlich erlauben. Diejenigen, dass ich besucht habe, schließen ein:

Bemerken Sie, jedes Mal wenn Sie jede Schriftart verwenden, sicherstellen Sie sich, dass Sie die Lizenz überprüfen, die damit kommt. Einige Schriftarten, selbst wenn ihre Lizenz erlaubt Schrifteneinbettung, kann Ihnen das nicht erlaubt sein, das für kommerziellen Zwecken zu verwenden. Andere können, aber nur für eine Gebühr. Um sicher zu sein, überprüfen Sie die Dokumentation, die mit der Schriftart kommt.

Wie soll man eine Schriftart in Ihrer Webseite einfügen

Sobald Sie eine Schriftart haben, die Sie gern in Ihrer Webseite einfügen würden, müssen Sie es zuerst innerhalb Ihres CSS Stylesheet erklären:

@font-face {
	font-family: 'Droid Sans';

        /* for IE */
	src: url('/shared/fonts/DroidSans/DroidSans.eot');

        /*
         * for non-IE: first see if the font exists locally on the browser's
         * computer.  If so, use that copy of the font.  Otherwise, load it
         * from the server
         */
	src: local('Droid Sans'),
	     url('/shared/fonts/DroidSans/DroidSans.ttf') format('truetype');
}

Es ist sehr wichtig, hier diese Ordnung Zählungen zu bemerken. Es gibt Unterschieden zu dieser CSS Syntax, aber ich habe auf diese Syntax aus den Gründen gesetzt, die im Artikel von Paul Irish Bulletproof @font-face Syntax beschrieben sind.

Nachdem Sie die Schriftart erklären, können Sie sie innerhalb von einigen Ihrer Auswählenden verwenden, wie Sie jede andere Schriftart verwenden würden:

body {
     font-family: "Droid Sans", "Arial", "Helvetica", sans-serif;
}

Bemerken Sie, dass es noch notwendig ist, alternative Schriftarten zu verwenden – ist das, so dass Benutzeragenten, die @font-face nicht unterstützen, noch eine passende, ähnlich aussehende Schriftart zeigen werden.

Einige Schriftart-Familien werden nicht nur in einer Datei enthalten. Zum Beispiel, Droid Sand hat eine deutliche Variante, die in einer getrennten Datei von TrueType versorgt wird (die.eot Datei, die durch Internet Explorer im obengenannten Beispiel verwendet ist, enthält sowohl die regelmäßigen als auch kühnen Varianten). Die kühne Variante von Droid Sans kann richtig in Ihrem Stylesheet erklärt werden, wie das:

@font-face {
	font-family: 'Droid Sans';
	src: url('/shared/fonts/DroidSans/DroidSans.eot');
	src: local('Droid Sans'),
	     local('Droid Sans'),
	     url('/shared/fonts/DroidSans/DroidSans.ttf') format('truetype');
}

/* Bold declaration only for non-IE browsers */
@font-face {
	font-family: 'Droid Sans';
	src: local('Droid Sans Bold'),
	     local('Droid Sans-Bold'),
	     url('/shared/fonts/DroidSans/DroidSans-Bold.ttf') format('truetype');
	font-weight: bold;
}

Browser-Unterschiede

Effektiv zu illustrieren, wie verschieden Browser eingebettete Schriftarten machen, wollen wir sie nebeneinander vergleichen:

Safari 3Windows Firefox 3.5Windows Explorer 6Windows
Titel von diesem Blog-Post Screenshot Detail 1 (Safari) Screenshot Detail 1 (Firefox) Screenshot Detail 1 (IE)
Großaufnahme des Titels von diesem Blog-Post Screenshot Closeup 1a (Safari) Screenshot Closeup 1a (Firefox) Screenshot Closeup 1a (IE)
Untertitel aus diesem blog-post Screenshot Detail 2 (Safari) Screenshot Detail 2 (Firefox) Screenshot Detail 2 (IE)
groSSAUFNAHME DES UNTERTITELS VON DIESEM BLOG-POST Screenshot Closeup 2 (Safari) Screenshot Closeup 2 (Firefox) Screenshot Closeup 2 (IE)
GROSSAUFNAHME DES HAUPTTEXTES VON DIESEM BLOG-POST Screenshot Closeup 3 (Safari) Screenshot Closeup 3 (Firefox) Screenshot Closeup 3 (IE)

Wie Sie sehen können, gibt es einige geringe Unterschiede in der Weise, wie Schriftarten in den verschiedenen Browsern geleistet werden:

  • Schriftarten, gezeigt auf Safari für Windows (und alle Browser auf Mac) nach meiner Meinung, sehen am nettesten aus: Sie werden nett weggeräumt, und der Text wird an kleineren Größen ganz leicht gelesen. Das ist wegen der Weise, wie Apple Produkte Schriftarten leisten. Apple hat sich immer in der Philosophie mit Microsoft darauf unterschieden, wie man Schriftarten macht, und dieser Unterschied ziemlich offensichtlich ist, wenn er Seiten unter Windows Betriebssystem prüft.
  • Ich habe gefunden, dass Internet Explorer einen schlechten Job tut, wenn er Schriftarten zeigt, die von OpenType umgewandelt sind —, neigen die glyphs dazu, mehr ausgezackt zu werden, und einige Elemente neigen dazu, dünner gemacht zu werden, als sie sein sollten. GrauBlau Web, die Schriftart in den Überschriften von dieser Seite verwendet wird, ist eine umgewandelte Schriftart von OpenType, und Sie können diese Wirkung in den Nahaufnahmen oben sehen. Es kommt nicht im Hauptkörper des Textes vor, weil Droid Sans eine TrueType Schriftart ist. Es scheint zwei Gründe dafür zu geben:
    • Es gab Informationsverlust, als das GrauBlau Web von OpenType bis TrueType umgewandelt hat.
    • Im Explorer, ClearType macht diese Schriftart, verwendet Subpixel- Anti-Aliasing ganz strenger als Safari, während andere Windows-Browser Vanille- Anti-Aliasing verwenden, um den Job tun zu lassen. Einen Freund von mir hat darauf hingewiesen, und er hat gesagt, dass es wegen ist, weil ClearType TrueType (und es scheint Eingebetteter Offener Typ) Schriftarten mit dem Subpixel-Antialiasing macht, aber OpenType gibt es nicht aus irgendeinem Grund. Die Gründe weiß ich nicht warum, aber in diesem Beispiel es aussieht, dass es wahr ist – wenn Sie auf alle Forscher-Nahaufnahmen schauen, werden Sie die farbigen Pixel am Rand des ganzen glyphs sehen, während in Firefox nur Droid Sans (der eine Schriftart von TrueType ist) sie hat.
  • Firefox erlaubt Ihnen nur, Schriftarten einzubetten, die aus demselben Server kommen, wenn einige spezielle Dateikopf in der HTTP Server-Antwort nicht erscheinen. Außerdem verschieden von den anderen Browsern sehen Firefox Benutzer zuerst die Seite ohne die eingebettete Schriftart, bis die Schriftart völlig geladen wird, an der Zeit die Schriftarten plötzlich auf der Seite erscheinen. Während es behauptet werden kann, dass das ein gutes Ding ist (der Benutzer kann den Inhalt sofort lesen, ohne sich auf die spezielle Schriftart verlassen zu müssen), das kann nicht sein, was ein Webentwerfer als wünschenswert betrachten würde.

Es gibt noch einige Unterschiede, die an den Webschriftarten Wiki besser entworfen werden, die scheint seine Information aktuell zu halten.

Wie soll man auswählen, welche Schriftarten zu verwenden

Sind Sie nicht in der Designschule gegangen, kann ich nicht behaupten, eine Autorität auf diesem Thema zu sein, aber ich denke das ist sicher zu sagen, wenn die Schriftarten auswählen, die Sie dabei sind zu verwenden, es zeitgleich mit der Stimmung und Nachricht sein sollte, die Sie wollen, dass Leser erfahren. Der Artikel von Chuck Green, Typ-Paletten, tritt in mehr Tiefe auf diesem Thema ein, und Michael Martin von Smashing Zeitschrift hat einen großen Artikel über Typographic Design Patterns and Best Practices. Obwohl beide dieser Artikel in Schriftart-Einbetten spezifisch nicht eintreten, sind sie noch relevant lesbar.

Ich habe mir eine lange Zeit gebraucht, um mich für die Schriftarten zu entscheiden, die ich hier auf meinem blog verwendet habe. Als ich das Lay-Out entworfen habe, ging ich für zwei Dinge:

  1. Ich habe gewollt, dass der Normaltext leicht zu lesen war
  2. Ich habe gewollt, dass das Gefühl des ganzen Blog freundlich wurde, und nicht sieht wie eine akademische Zeitung aus

Schließlich habe ich mich dafür entschieden zu verwenden:

  1. Das GrauBlau Web für die Überschriften, weil es schmal ist (der mehr Text auf einer Linie erlaubt), leicht für die Augen, und da es für Überschriften verwendet wird, der Benutzer bemerkt das sofort und denkt “He, das sieht verschieden aus!”.
  2. Droid Sans für den Haupttext, weil es entworfen wurde, um leicht zu sein, sogar auf niedrigen Entschlossenheiten und in der Kombination mit dem GrauBlau Web zu lesen, hat der Seite einen netten, angenehmen und freundlichen Blick gegeben.
  3. Droid Sans Mono für die Codeauflistungen, seitdem es wurde zum Kompliment Droid Sans entworfen, und, ich glaube, sieht Millionen Mal besser als Courier aus (den jeder bis jetzt gezwungen worden ist, wegen eines Mangels an nett aussehenden Monoraumschriftarten zu verwenden, die auf den meisten Computern heute installiert sind).

Wieder bin ich nicht in Designschule gegangen, aber ich denke für den Typ von dieser Seite, die das ist (ein Blog über die Webtechnologie), passt es seinem Zweck eher gut an. Ich war geneigt, mehr reich verzierte Schriftarten zu wählen, aber ich habe nicht gedacht, dass sie dem Inhalt angepasst haben.

Optimierung von Schriftdateien

Manchmal können Sie entdecken, dass die Schriftdateien ein wenig größer sind, als Sie möchten. Wenn Sie die Schriftdatei in FontForge öffnen, können Sie entdecken, dass viele glyphs drinnen, sind nicht von Bedeutung für das, was Sie im Moment tun. (zum Beispiel, wenn Ihre Seiten alle in Englisch sind, könnten Sie nicht alle akzentuierten Charaktere wollen, die die Schriftart enthält). Verwenden Sie FontForge, um den glyphs zu löschen, die Sie nicht brauchen, und regenerieren die Schriftart – Sie würden bemerken, dass Sie ziemlich viele Kilobytes besonders in einer Schriftart von Unicode mit vielen japanischen und russischen eingeschlossenen Charakteren sparen.

Wieder, wegen der Lizenzierungsprobleme, stellen Sie bitte sicher, dass die Schriftart-Lizenz Ihnen erlaubt, die Schriftart auf diese Weise zu bearbeiten.

Beschluss

Was hier geschrieben wird, ist nur die Spitze des Eisbergs. In den kommenden Jahren nehme ich an, mehrere Artikel über die beste Weise zu lesen, eingebettete Schriftarten von technischem, Brauchbarkeit, Internationalisierung und Designperspektiven zu verwenden. Leider nehme ich auch an, viele MySpace Seiten zu sehen, die hässlicher aussehen, als je zuvor. Stellen Sie sich vor! Jetzt Teenager auf der ganzen Welt können animierte Hintergründe, Black Eyed Peas-Lieder haben, abgespielten beim Players, und haben diese verrückte Schreibmaschinenschrift auf der Hauptkopie.

Mein Gott, was haben wir getan….