Welche Schrifttechnik wird hier verwendet?

8

Während ich an dieser Veranstaltung teilnahm ( http://worldtour.fogcreek.com/ ), bemerkte ich, dass diese Seite benutzerdefinierte Schriftarten für den Adressenteil in der oberen linken Ecke hatte (dh "Fog Creek Software 55 Broadway Fl 55 ...."). Als ich mir den Quellcode ansah, konnte ich nicht wirklich feststellen, was sie taten, aber er erfüllte diese Bedingungen:

  1. Funktioniert gut mit IE 7,8 (und allen anderen Browsern)
  2. Ermöglicht die Verwendung einer beliebigen Schriftart
  3. Ist Textbasis, dh kein Blitz, Bilder usw. Somit ist es besser für SEO und Indizierung und so.

Also, welche Technik verwenden sie hier ???

seo html css web-development website-design J Lee
quelle

Antworten:

13

Sie benutzen die @font-faceTechnik. Durch die Verwendung einer Vielzahl von Dateien und eine gewisse Pseudobrowsererkennung können sie Schriftarten in allen Browsern konsistent bereitstellen. Die Verwendung:

  • True Type und WOFF für Webkit, Gecko und Opera
  • EOT für Internet Explorer
  • SVG für iOS

Aufgrund der Art und Weise, wie das CSS strukturiert ist, wird geprüft, ob die Schriftart lokal verfügbar ist. Wenn dies nicht der Fall ist und der IE verwendet wird, wird das EOT verwendet und nichts anderes geladen. Und wenn es nicht IE ist, lädt es die Schriftart, die es benötigt.

Weitere Informationen und @ font-face-Kits sowie einen Generator für @ font-face-Schriftarten und CSS finden Sie unter Font Squirrel .

Sie werden auch text-shadowmit einer Farbe verwendet, die der des Textes nahe kommt. Dies erzeugt den unscharfen Effekt auf den Text.

Eli Gundry
quelle
2

Diese Website verwendet eine Schrifttechnik namens WOFF (World Open Font Format). Es wird derzeit auf Empfehlung des W3C standardisiert. Es ermöglicht die direkte Einbettung von Schriftarten in Webseiten.

http://en.wikipedia.org/wiki/Web_Open_Font_Format

Lesen Sie. Scheint ein sehr interessantes Konzept zu sein und wird allgemein akzeptiert, obwohl es letztes Jahr ausgearbeitet wurde.

Matthew Brown
quelle
1
WOFF alleine funktioniert nicht in allen Browsern (raten Sie mal, welcher). Deshalb brauchen Sie EOTs.
Lèse Majesté
2

Schauen Sie sich auch das Schriftartenverzeichnis von Google an. Dies ist eine hervorragende Möglichkeit, um mit Schriftarten zu beginnen, die nicht als "web-sicher" gelten. Grundsätzlich müssen Sie lediglich ein Link-Tag mit der richtigen Schriftart im Verzeichnis vor dem CSS hinzufügen, das es verwendet. Google ermittelt den Browser über den Benutzeragenten und spuckt das erforderliche CSS für Schriftarten aus. Sie können die Schriftart dann in der Eigenschaft "Schriftfamilie" verwenden.

Hier ist die Kurzanleitung: http://code.google.com/apis/webfonts/docs/getting_started.html

Kwood
quelle