Benutzerdefinierte Schriftarten gehören zu den potenziell ansprechenden Aspekten von CSS3 für Designer. Mit der Font-Face- Regel können Sie jede Schriftart, die Sie online haben, innerhalb Ihres Webseiten-Texts rendern, unabhängig davon, ob der Benutzer sie installiert hat oder nicht.
Wie bei den meisten CSS3-Techniken ist der grundlegende Code ziemlich einfach, aber die praktische Realität ist ein wenig komplexer.
In diesem kurzen Tutorial werden die Grundlagen zum Einbinden benutzerdefinierter Schriftarten auf Ihren Seiten erläutert.
Stellen Sie zunächst sicher, dass die zu verwendende Schriftart für die Verwendung im Internet lizenziert ist. Fast alle kostenlosen Fonts können auf einer Website verwendet werden, und viele Premium-Fonts sind mit einer Lizenz verfügbar, die die Internetnutzung abdeckt.
Als nächstes laden Sie Ihre gewählte Schriftart auf Ihren Server hoch. Möglicherweise möchten Sie es in einem dedizierten "Schriftarten" -Verzeichnis speichern, aber dies ist optional.
Denken Sie daran, die Dateien für alle Varianten der Schriftart einzubeziehen, die Sie verwenden möchten, z. B. fett oder kursiv. Sie können EOT-Dateien (Embedded OpenType) für Internet Explorer und OTF (OpenType) oder TTF (TrueType) für den Rest verwenden. (Zu den zusätzlichen Optionen gehören WOFF (Web Open Font Format) und SVG (Scalable Vector Graphics), aber wir bleiben hier bei gebräuchlichen Typen.)
Notieren Sie sich, wo die Schriftartdateien auf Ihrem Server gespeichert sind.
Öffnen Sie die HTML- oder CSS-Datei für die Seite, mit der Sie arbeiten. Fügen Sie dem Stil-Code eine Schriftart-Gesichtserklärung hinzu :
@font-face {}Geben Sie der Schriftart im Schriftartenbereich einen Namen, mit dem Sie später darauf verweisen können:
font-family: 'lovelyFont';Geben Sie als Nächstes im Bereich " Schriftart" den Speicherort der EOT-Datei an:
src: url('fonts/lovely_font.eot');Ändern Sie den Speicherort und den Namen der Schriftart nach Bedarf. Als nächstes fügen Sie eine OTF- und / oder TTF-Schriftart hinzu:
src:url('fonts/lovely_font.otf')src:url('fonts/lovely_font.ttf') Dies ist der Kern des notwendigen Codes, der in vielen Fällen ausreichend sein wird. Es gibt jedoch weitere Schritte, die wir ergreifen können, um den Code zuverlässiger zu machen. Erweitern Sie diesen Abschnitt zunächst um einen Indikator für den Schriftartendateityp:
src:url('fonts/lovely_font.otf')format('opentype');src:url('fonts/lovely_font.ttf')format('truetype');Als weitere optionale Effizienzmaßnahme können wir den Browser veranlassen, nach einer lokalen Kopie der Schriftart zu suchen, falls der Benutzer sie bereits besitzt. Erweitern Sie den Code wie folgt und fügen Sie vor dem Angeben der URL den lokalen Abschnitt hinzu, sodass die Schriftart nur bei Bedarf heruntergeladen wird:
src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.ttf')format('truetype');Der Zusatz ist der gleiche für OTF und TTF. Wir geben den Namen der Schriftart nach dem Schlüsselwort local an .
In diesem Fall haben wir zwei Zeilen, die die lokale Schriftart angeben, da der Name der Schriftart mehr als ein Wort enthält. Die Bindestrich-Version berücksichtigt, wie Schriftnamen auf bestimmten Betriebssystemen gespeichert werden. Diese zusätzliche Zeile ist nicht notwendig, wenn die Schriftart nur ein einziges Wort enthält. Wenn Sie wissen, dass eine Schriftart auf verschiedenen Systemen unterschiedliche Namen haben kann, schließen Sie alle Möglichkeiten in Ihrem lokalen Bereich ein.
Schließlich können wir die Schriftart auf die Seitenelemente anwenden. Geben Sie im CSS-Code für ein bestimmtes Element oder eine Gruppe von Elementen einfach den von Ihnen verwendeten Zeichensatznamen an, einschließlich der von Ihnen ausgewählten Fallbacks:
div { font-family: 'lovelyFont', sans-serif; }Wenn Sie beispielsweise auch eine fette Version Ihrer Schriftart verwenden möchten, fügen Sie einfach einen anderen Schriftschnittabschnitt mit der fett gedruckten Schriftarten-URL und der Deklaration "font-weight: bold;" ein. Geben Sie für jedes Element, für das die benutzerdefinierte Schriftart angewendet wurde, eine fettgedruckte Schriftart an, und der Browser gibt automatisch die fettgedruckte Version aus:
/*default version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font.eot');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');}/*bold version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font_bold.eot');src:local('Lovely Font Bold'),local('Lovely-Font-Bold'),url('fonts/lovely_font_bold.otf')format('opentype');font-weight: bold;}/*container element*/div { font-family: 'lovelyFont', sans-serif; }/*span elements inside the container div*/span { font-weight: bold; }Das ist es!
Verwenden Sie CSS3, um die für Sie verfügbaren Schrifttypen zu erweitern? Verwenden Sie einen Dienst wie Adobe Typekit oder Google Webfonts? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, Schriftbild über Shutterstock.