Share
In den letzten fünf Jahren hat sich die Typografie im Internet ziemlich verschärft (Entschuldigung, Wortspiel beabsichtigt). Früher mussten Webdesigner nur webfeste Schriftarten verwenden. Systemschriftarten, die auf allen Computern der Benutzer verfügbar sind. Wie Sie sich vorstellen können (oder aus erster Hand erfahren haben), war das für uns Typfreaks frustrierend, aber wir haben uns damit beschäftigt. Auf seltsame Weise war es jedoch irgendwie nett, weil Sie nur eine begrenzte Anzahl von Schriftarten zur Auswahl hatten. Die Auswahl der perfekten Schrift war also minimal (ich beschwere mich nicht). Jetzt ist jedoch auch eine Schriftart möglich, die dem gewünschten Erscheinungsbild entspricht, und Unternehmen können nun ihre visuelle Markensprache durch Typografie projizieren.
Es gab also ein paar Methoden für die Bereitstellung von Websites auf unseren Websites, wobei @ font-face am häufigsten verwendet wurde. Diese CSS-Regel gibt uns die Möglichkeit, Schriftarten von einem Server herunterzuladen und auf unseren beeindruckenden Webseiten zu verwenden. Die Browserunterstützung war anfangs minimal, wird jedoch jetzt weitgehend unterstützt. Die einzige bemerkenswerte Ausnahme ist Opera Mini (c'mon guys).
@ font-face ist eine CSS-Regel, die den Namen der Schriftart, ihre Position und die Schriftstärke angibt. In dem vereinfachten Beispiel wird die Schriftart auf font-face.com gespeichert und der spezifische Pfad definiert. Es könnte ungefähr so aussehen:
Accentsconagua
@ font-face font-family: 'DeliciousRoman'; src: url ('http://www.font-face.com/fonts/delicious/Delicious-Roman.otf'); Schriftgewicht: 400; Sie sehen, dass der Name der Schrift auf "DeliciousRoman" gesetzt ist. Dies ist der Name der Schriftart, auf den dann in unserem CSS-Fontstack verwiesen wird, zusammen mit Fallback-Fonts, wenn der Font nicht geladen wird:
.Beispiel font-family: 'DeliciousRoman', Arial, serifenlos;
Die Dinge sind jedoch nicht ganz so einfach. Da verschiedene Browser unterschiedliche Schriftformate erfordern, müssen wir uns darauf verlassen, dass wir alle erforderlichen Optionen zur Verfügung stellen.
Hier eine Liste von Browsern mit den unterstützten Dateitypen:
In @ font-face gibt es verschiedene Konventionen, um das Problem der Browserkompatibilität anzugehen. Es ist gut zu wissen, wie sich @ font-face entwickelt hat, und der folgende kurze Verlauf enthält Links zu einer soliden Menge an Informationen zu diesem Thema.
Ursprünglich hatte Paul Irish 2009 die Bulletproof @ font-face-Syntax entwickelt. Im Laufe der Jahre wurden offenbar einige Hacks für das Problem der Browserkompatibilität angesprochen. Der kontroverseste Aspekt ist der Smiley-Face-Hack.
Eine andere Version mit dem Namen Mo 'Bulletproofer Syntax von Richard Fink erschien, die sich mit Schriftproblemen befasste, die in Android auftraten.
Schließlich sind wir zur FontSpring @ font-face-Syntax gekommen. Dieser Ansatz vereinfacht die Sprache erheblich und sieht so aus:
@ font-face font-family: 'DeliciousRoman'; src: url ('fonts / DeliciousRoman-webfont.eot? #iefix') format ('embedded-opentype'), url ('fonts / DeliciousRoman-webfont.woff') format ('woff'), url ('fonts / DeliciousRoman-webfont.ttf ') format (' truetype '), url (' fonts / DeliciousRoman-webfont.svg # svgDeliciousRoman ') format (' svg '); Im obigen Beispiel sehen Sie, dass die Schriftarten selbst gehostet werden und auf dem Server in einem Ordner mit dem Namen "Schriftarten" gespeichert werden..
Font Squirrel (und einige andere) bieten einen praktischen Webfont-Generator, der alle Schriftarten in ein Set von Webdateien zum Einbetten konvertiert. Im Kit enthalten sind alle erforderlichen Zeichensatzdateien, die spezifische @ font-face-CSS-Syntax und eine HTML-Demo. Sie können die Zeichensatzdateien dann direkt auf Ihrem Server platzieren und den Pfad im @ font-face-CSS anpassen.
Hinweis: Eine angemessene Warnung, stellen Sie jedoch sicher, dass Sie über ausreichende Rechte für die Verwendung von Zeichensätzen verfügen, die Sie durch den Generator laufen lassen und auf Ihrer Website verwenden.
Je nachdem, ob Sie selbst einen Host-Dienst oder einen Schriftarten-Dienst wie Typekit verwenden (mehr dazu später), sieht Ihr CSS etwas anders aus. Mit einem Dienst wie Typekit erstellen Sie beispielsweise "Kits" von Zeichensätzen, die alle Zeichensätze enthalten, die Sie für jede bestimmte Website verwenden. Für jedes von Ihnen erstellte Kit erhalten Sie ein JavaScript-Snippet, das Sie in das Verzeichnis einfügen können Ihres HTML-Dokuments. Dieses Snippet lädt die korrekten @ font-face-Regeln für diesen bestimmten Browser.
Weitere Informationen darüber, warum TypeKit JavaScript verwendet, finden Sie unter Laden von Web-Fonts mit JavaScript.
In den Kit-Einstellungen von fonts.com finden Sie drei verschiedene Veröffentlichungsoptionen mit Premium-Plan-Mitgliedschaften. Neben einer Javascript-Option, die Typekit ähnlich ist, bieten sie auch eine Nicht-JavaScript-Option, die eine Verknüpfung zu einem bereitgestellten Stylesheet und einer selbst gehosteten Option herstellt. Abhängig von Ihrer Auswahl wird Ihr CSS natürlich ein wenig anders aussehen.
Wie Sie sich vorstellen können, wird die Lizenzierung von Schriftarten bei der Verwendung von Schriftarten im Web zu einem großen Problem. Die weit verbreitete Verwendung von @ font-face hat zu einer Explosion der freien Schriften geführt, von denen einige wirklich gut sind, andere nicht. Font Squirrel, Fontex und DaFont sind einige der bekannteren Optionen für kostenlose Fonts. Lost Type Coop ist ein weiterer großartiger Ort, um Schriften abzuholen, Spenden werden angenommen. Google Fonts bietet auch eine große Auswahl an kostenlosen Fonts, obwohl meiner Meinung nach einige von schlechter Qualität sind.
Die Font-Hosting-Branche ist in den letzten Jahren sprunghaft gewachsen. Mit dem Hosting von Zeichensätzen können Sie einige Ihrer bevorzugten Zeichensätze - und in vielen Fällen sogar besser als kostenlose Zeichensätze - für die Verwendung im Internet lizenzieren. Typekit war einer der ersten Big Player auf diesem Markt und hat eine wirklich schöne Auswahl an Schriften. Im Laufe der Zeit haben sie einige bekanntere Schriftarten wie Futura und Meta hinzugefügt und mehrere Schriftarten in der Web-Welt bekannt gemacht.
Fonts.com bietet Lizenzen für seine Bibliothek mit über 150.000 Schriftarten an, die einige der beliebtesten Schriftarten der Welt enthält, wie etwa Avenir, Frutiger, Univers und Din, um nur einige zu nennen. Dieser Service verfügt über einige einzigartige Funktionen, die ich sehr mag: Je nach Mitgliedschaftsstufe sind SkyFonts integriert, mit denen Sie im Wesentlichen Zeichensätze für einen bestimmten Zeitraum "mieten" können, meist in Schritten von einem oder dreißig Tagen. Auf diese Weise können Sie die Schriftart in Desktopanwendungen zu Modellzwecken verwenden. Mit einer Premium-Mitgliedschaft können Sie außerdem das Font-Kit herunterladen und Ihre eigenen Fonts selbst hosten, was die Ladezeiten erhöht.
Einer der brandneuen Services, die in letzter Zeit für Aufsehen gesorgt haben, ist die Einführung der Cloud-Typografie von HF & J. HF & J gilt allgemein als Autorität für Typografie, und ihre Schriften werden diesem Ruf gerecht. Ein Webangebot dieser Stipendiaten wurde lange erwartet, als sie ihre Schriftarten für den Bildschirm umgestalteten. Sie haben die Messlatte ziemlich angehoben und 9pt gemacht. Gotham lesbar auf dem Bildschirm. Es ist wirklich bezaubernd.
Sie verfügen über eine nette Benutzeroberfläche, die mit Killer-Funktionen ausgestattet ist, zum Beispiel, dass Sie nur die Zeichen in einer Schriftart auswählen, die Sie benötigen. Dies spart Platz und erhöht die Ladezeit. Auf jeden Fall einen Besuch wert.
Die Preisstruktur für Font-Hosting-Services variiert, aber die meisten von ihnen basieren auf Seitenaufrufe für jede Site, auf der Sie ihre Fonts verwenden. Darüber hinaus haben viele Dienste wie fonts.com unterschiedliche Preisstufen, die unterschiedliche Add-Ons wie Desktop-Schriftarten, Mock-Up-Schriftarten und Self-Hosting-Optionen bieten. Am besten sehen Sie, was verfügbar ist, und wählen Sie den Service und Plan, der Ihren Bedürfnissen entspricht.
Ist es also besser, einen Font-Hosting-Service zu verwenden oder sich selbst zu hosten? Es hängt davon ab. Hier sind einige Vorteile von jedem:
Hosting-Service (wie TypeKit, Fonts.com, HF & J)
Selbsthosting
Es ist zu beachten, dass Sie wissen müssen, wie viele Schriftarten Sie verwenden. Wenn es um die Leistung geht, bedeutet mehrere Gewichtungen derselben Schriftart, dass Sie eine andere ganze Schriftart laden. Seien Sie also vorsichtig, denn je mehr Schriftarten Sie verwenden, desto länger dauert das Laden. Sie werden bei TypeKit einige Alarme ausschalten, sobald Ihr Kit mehr als 500.000 beträgt, aber in diesem Fall ist weniger mehr.
Gut gemacht, Sie sind jetzt mit den Grundlagen von @ font-face und den vielfältigen Verwendungsmöglichkeiten vertraut! Vergewissern Sie sich, dass Sie mit den neuen Tools und Methoden zum Integrieren von Zeichensätzen im Web Schritt halten, da sie sich schnell mit anderen Elementen im Web verbinden!
