HTML5-Workshop: Durchstylen mit CSS (font-face)

[Anmerkung: Langes Video für Interessierte! Wer nur den Code haben möchte, kann gleich zum Ende des Videos springen und ihn sich dort ansehen.]

In diesem Video binde ich zwei Schriftarten mit Hilfe der @font-face Regel aus CSS3 ein und erkläre, wieso man dabei wieder an den Internet Explorer denken muss.

Category:

Science & Technology

Tags:

• HTML5 Workshop
• Tutorial
• Demo
• CSS3
• font-face
• IE
• local

[HyantGray]

Danke ThytOS für deine tollen Tutorials. Als Anfänger muss ich sagen, dass du mir den Einstieg sehr einfach gestaltest :).

Allerdings habe ich eine Frage: Im Stylesheet hast du lediglich zwei neue Schriftarten definiert. Aber wo welche Schriftart eingesetzt werden soll kann ich im HTML Code nicht entdecken...

Woher weiß der Browser an welcher Stelle Molengo und wo Droid Serif verwendet werden soll?

Danke!

[ThytOS]

@HyantGray Das wird auch im Stylesheet getan. Im Video "HTML5-Workshop: Komplettes Stylesheet (3/4)" schreibe ich bei 8:50 in die Deklaration zum body-Element font-family: 'Molengo';

Bei 13:45 füge ich dann font-family: 'Droid Serif'; zur Deklaration von "header h1, header h2" hinzu.

Übrigens ist die @font-face Syntax mit der Smiley Variante schon wieder überholt. Eleganter und auch in Android-funktionierend ist die "Fontspring @font-face Syntax". Google einfach danach.

[HyantGray]

@ThytOS

Danke für die schnelle Antwort :).

Ich finde es toll wie du dein Wissen kostenfrei zur Verfügung stellst.

Etliche Leute nehmen für so etwas viel Geld!

[Philastan]

eine sehr angenehme Variante Schriften einzubinden ist auch "Dafon". Die Schriften werden gerendert dargestellt ;)