CSS3 Web Fonts
Mit @font-face bietet CSS3 die Möglichkeit, eigene Schriften, die nicht als Standardschrift hinterlegt sind, in eine Webseite einzubinden.
Man sollte darauf achten, ob die Schrift lizenzfrei genutzt werden kann!
Definition in css
@font-face {
font-family:Younger than me,Arial,Helvetica,sans-serif;
src: url('Youngerthanme.ttf');
font-style:normal;
font-weight:normal;
}
font-family:Younger than me,Arial,Helvetica,sans-serif;
src: url('Youngerthanme.ttf');
font-style:normal;
font-weight:normal;
}
Und so schaut´s aus
CSS lernen
Die Browserunterstützung der Webfonts ist unterschiedlich:
Safari Browser ab Version 3.1
Formate: TrueType (*.ttf), OpenType (*.otf) und SVW (*.svg)
Google Chrome ab Version 4.0
Formate: TrueType (*.ttf) und OpenType (*.otf)
Opera ab Version 10
Formate: TrueType (*.ttf), OpenType (*.otf) und SVW (*.svg)
Mozilla Firefox ab Version 3.5
Formate: TrueType (*.ttf) und OpenType (*.otf)
Internet Explorer ab Version 4
Formate: EOT (Embedded Open Type)
Verschaff Dir einen Überblick
Wissenswertes, Hilfestellung und Lösungen rund um das Thema CSS:A
Absolute und relative MaßeAbgerundete Ecken
Anordnung
B
background-attachmentbackground-position
C
cm (Zentimeter)Color
Contextual Selectors
CSS Formatierungen
CSS-Sprites
D
Definition mehrerer TagsE
Ebenen / LayerEcke / Eckenrundung
Einbindung CSS
em
ex
Externe CSS-Datei
F
FarbenFarbcodes
Farbnamen
Farbverlauf
Fixierter, fester Hintergrund
G
GradientGrundlagen
H
HintergrundbildHintergrundbild Positionierung
Hover-Effekt über Hintergrundbild
I
IDsin (Inch)
Interne CSS-Datei
K
KlassenKlassifizierung
L
Layer / EbenenListen
P
pcPosition
Positionierung Hintergrundbild
pt (Pica)
px (Pixel)
R
Rahmen FormatierungReihenfolge von Elementen
Relative und absolute Maße
repeat Möglichkeiten
Runde Ecken
S
SchriftformatierungScrollbarer Hintergrund
Sichtbarkeit
Sprites
Stylesheet
T
TextflussTextgestaltung
U
Überhängende InhalteÜbereinander liegende Elemente
V
VererbungVerlauf / Verläufe
