All Articles Web
Eine Einführung in die Verwendung WebFonts, mit einem Zombie Theme!
Wickedly Smart on Thu, August 9th 0 comments
Get the know-how on Web fonts from the awesome Eric Freeman and Beth Robson (the HTML5/CSS training wizards who are collectively known as Wickedly Smart!)

Until recently your web pages have been limited to the set of fonts available to the browser. But now, with the introduction of Web Fonts, you can deliver a new font to your user’s browser at any time to give you just the right visual look or to increase the impact of your pages. In this quick tip we’re going to show you how to use Google’s font service to make use of custom fonts. You won’t believe how easy it is, so let’s get to it!


Step 1 - Find a Font

First let’s take a look at a web page that needs help. While the red and white on black treatment sure makes the title “Zombies take over macprovideo” stand out, given the subject matter, the look and feel of the page has some room for improvement. One thing we could do is to use a font for the title that reflects the spirit of the content. So we’re going to use a font that’s a little more, well, zombie-like.


To find a font we’ll browse the freely available fonts over on Google’s Web Font Service at: http://www.google.com/webfonts

Looking through all the fonts there, we think the Nosifer font will work well.

Nosifer font


Klicken Sie auf die Schaltfläche Sammlung hinzufügen, um die Schriftart Nosifer, um Ihre Web font Sammlung auf der Website. Dann klicken Sie auf Hier der Link benotigen Sie, um die Web-Schriftart in Ihre Seite einbinden. Über den Gebrauch Seite, kopieren Sie den Link aus Teil 3 der Seite im Standard-Registerkarte. Hier ist der Link in Ihren HTML-youll werden eingefügt.

Add this code to your website


Schritt 2 - Hinzufügen der Schriftart auf Ihrer Seite

Bevor wir den Web-Link hinzufügen Schriftgröße in unsere HTML können zunächst einen Blick auf die HTML-und CSS für die Seite. Betrachtet man die HTML finden youll haben wir einen Stil Abschnitt und einen Körperabschnitt. Im Körper haben wir den Titel der Seite in einem H1-Element (anders als Haupt-Überschrift bekannt), und der Rest der Seite Inhalte innerhalb der p (oder Absatz-Element).

In the style section, we’re using CSS to specify the style of the elements on the page. There, we have a rule that sets the background color of the body (in other words, the whole page) to black. We also have rules that set the font size and color for the main heading and paragraph elements in the page. In this case we’ve set the font size of the text in the heading to twice its normal size and set its color to red, and we’ve set the color of the text in the paragraph to white.

Etiam et ut risus nibh molestie Bibendum EU-NEC-diam. Etiam porttitor lacus ang turpis Vestibulum AC volutpat tortor Bibendum. Morbi Commodo ultricies metus. Nulla rutrum sagittis lacus cursus porttitor. Morbi condimentum Mauris lorem bei aliquam ID rutrum nisl aliquet. Cras ein lorem EU velit hendrerit blandit sit amet sed magna. Aliquam erat volutpat. Sed diam nulla, vulputate ID sagittis vel, luctus EU turpis. Mauris scelerisque turpis ut lacus iaculis tincidunt AC-ID urna. Etiam et ullamcorper tortor.


Kommen wir zurück zu Hinzufügen einer Schriftart auf dieser Seite alles, was wir tun müssen, wann wurden mit Googles Web Font Service ist auf den folgenden Link-Tag hinzu:



Dies ist der gleiche Tag, das Sie von der Seite kopiert Verwendung in der Web-Site Schrift in Schritt 1. Dieser Tag weist den Browser an die Nosifer Schrift aus dem Google Web Font Service abrufen und verfügbar zu machen auf die Seite.


Rest von CSS und HTML geht hier


Schritt 3 - Verwenden des Web Font

Bisher alle weve getan ist, um den Browser anweisen, den Web-Font abrufen, wenn die Seite geladen ist, jetzt müssen wir den Stil der Seite zu ändern, so dass es den Einsatz der Schrift macht. Um das zu tun, dass wir die gleiche CSS-Eigenschaft, die immer dann eingesetzt wird, um den Namen einer Schriftart angeben verwenden: die Eigenschaft font-family. Also fügen wir folgende Zeile in die CSS-Regel für h1:


h1 {

}


Die Eigenschaft font-family gibt eine Liste von Schriftarten, um für dieses Element verwendet werden. Diese Liste ist nach Priorität geordnet, so dass der Browser beginnt bei der ersten Schrift und versucht, es zu benutzen, wenn diese Schriftart nicht verfügbar ist, dann wird die nächste verwendet wird, und so weiter. Hier haben wir zwei Schriften, die Nosifer Schriftart und einen generischen, default serif. Wenn aus irgendeinem Grund die Nosifer font cant abgerufen und durch den Browser geladen werden, dann wird der Browser verwenden, was Serifenschrift es standardmäßig verwendet. Natürlich könnte man mehr Schriften zu dieser Liste hinzufügen, wenn man wollte.


Schritt 4 - Testen der Web-Font

An dieser Stelle können wir zu laden und testen Sie die Web-Seite. Wenn die Seite geladen wird, der Browser ruft die Nosifer Schriftart von Googles Web Font Service, und dann gilt er für die h1-Element. Schon ein Unterschied, nicht wahr? Hows, die für das Hinzufügen von gewissen Einfluss mit nur ein paar Zeilen HTML

Testing the web font


Schritt 5 - Weiterführendes

Die große Sache über Web Fonts ist, dass sie echte Schriften sind, so können wir nichts mit ihnen zu tun, dass wir mit den Standard-Browser-basierten Schriften, wie fügen Sie mehr Styling. Heres ein Beispiel für das Hinzufügen einer einfachen Text-Schatten auf den Text:



Und können sehen, wie das aussieht:

Web Font with shadow


Nun das ist, was wir nennen Zombie!

Die text-shadow-Eigenschaft nimmt vier Werte: ein X-und Y-Offset, eine Unschärfe Wert, und eine Farbe. Die x-und y-Offset angeben, wie weit aus dem Text der Schatten erscheinen soll, in diesem Fall wurden die Angabe, dass der Schatten sollte 6 Pixel nach rechts (x) und 6 Pixel nach unten (y) sein, aus dem Text. Und die Unschärfe-Wert ist, wie der Schatten unscharf aussehen sollte, in diesem Fall wollen wir die Schatten als ziemlich unscharf, aber immer noch etwas hinter den Buchstaben lesbar. Schließlich wird die Farbe angegeben mit einem Hex-Code, in diesem Fall, ist, dass Hex-Code Farbe entspricht einer OOZ-wie gelb.


Schritt 6 - Nächste Schritte

Weve nur an der Oberfläche gekratzt hier aus, was man mit Web-Fonts (nicht zu Googles Web Font Service ganz zu schweigen) zu tun. Um mehr über CSS, Styling und Schriften im Allgemeinen zu erfahren, lesen Sie in unserem Web-Design-Tutorials !

Und erfahren Sie mehr über Googles Web-Service finden Sie in der Dokumentation unter: https://developers.google.com/webfonts/docs/getting_started~~V


Related Videos
Comments (0)

You must be logged in to comment.

Hypertext Markup Language
HTML & CSS 101
Dream It. Do It.
Do you want to learn Hypertext Markup Language?
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: