font
gestaltet die CSS-Datei übersichtlicher und schafft ein Höchstmaß an Konsistenz für die Schrift der Webseite.
Wenn keine Angaben für die Schrift vorliegen, verwenden die Browser ihre voreingestellte Schrift für die gesamte Webseite – das ist i.d.R. Times auf dem Desktop-Rechner, eine Helvetica Light auf iPad und iPhone und Roboto auf Android
Das body-Tag ist der bevorzugte Platz, die generellen CSS-Regeln für die Schrift einer Webseite festzulegen. Für einzelne Passagen – z.B. für Überschriften oder für die Schrift in der Navigationsleiste – müssen dann nur noch die Abweichungen der generellen Merkmale für die Schrift angegeben werden.
Eine Uhr
braucht man nicht unbedingt, ist aber ganz nett um die Möglichkeiten von CSS aufzuzeigen.
Die Uhr ist hier zu finden: http://www.javascriptkit.com/script/script2/css3analogclock.shtml
Da gibt es auch noch einige andere nützliche (oder auch nicht so nützliche) Sachen und Spielereien. ☺
Die Uhr ist übrigens nur mit HTML und CSS gemacht.
font-family
Bei mehreren angegebenen Schriftarten ist die Reihenfolge der Angabe entscheidend: ist die erste angegebene Schriftart verfügbar, wird diese verwendet. Ist sie nicht verfügbar, wird die zweite Schriftart verwendet, falls diese verfügbar ist usw.. Da eine Schriftart nur angezeigt werden kann, wenn Sie auf dem Betriebssystem vorhanden ist, kann man mehrere Schriftarten angeben und diese mit Kommata trennen. Der Browser geht die Schriftarten der Reihe nach durch und wählt die erste Schriftart, die vorhanden ist, zum Darstellen des Textes ausSchriftartnamen in denen Leerzeichen vorkommen, sollten in einfachen oder doppelten, oberen Anführungszeichen eingeschlossen sein. Es gibt einige Werte, die man am Ende einsetzen kann:
-p- style="font-family: Georgia, 'Times New Roman', serif;">...-/p-
Folgende Reihenfolgen haben sich durchgesetzt:
- Georgia, "Times New Roman", Times, serif
- Verdana, Arial, Helvetica, sans-serif
- "Courier New", Courier, monospace
Webautoren sollten einer Schriftfamilienliste immer mindestens eine generische Familie hinzufügen, da es keine Garantie dafür gibt, dass eine bestimmte Schriftart auf dem Computer installiert ist..
Generische Schriftfamilien:
Folgende generische Schriftfamilien sind fest vordefiniert
diese Angaben können Sie also neben Schriftartnamen benutzen:
- serif, eine Schriftart mit Serifen
- sans-serif, eine Schriftart ohne Serifen
- cursive, eine Schriftart für Schreibschrift
- fantasy, eine Schriftart für ungewöhnliche Schrift
- monospace, eine Schriftart mit dicktengleichen Zeichen
- font-family: fantasy;
Generische Schriftfamilien dienen als Fallback-Mechanismus, ein Mittel, um etwas von der Absicht des Stylesheet Autors zu erhalten für den Fall, wenn keine der angegebenen Schriftarten verfügbar sind. Generische Familiennamen sind Schlüsselwörter und dürfen nicht in Anführungszeichen eingeschlossen werden. Eine generische Schriftfamilie sollte die letzte Alternative in einer Liste von Schriftfamiliennamen sein.
font-family @ w3schoolsfont-style
Als Schriftstil wird die Neigung der Schrift bezeichnet, welche Sie mit der Eigenschaft font-style steuern können.
Initial value: normal
Italic stellt die Schrift in einem kursiven Schnitt dar. Wenn kein Kursivschnitt (italic) auf dem Zielrechner installiert ist, benutzt der Browser oblique. 0blique veranlasst den Browser, die Buchstaben schräg darzustellen, um einen Kursivschnitt nachzuahmen.
- font-style: normal;
- font-style: italic;
- font-style: oblique;
- font-style: inherit;
font-style - welche Schriftarten passen zusammen – und wo gibt es noch gute tools?
Unter folgendem Link kann man sehr gut überprüfen, welchte Schriftarten zusammenpassen:
www.typ.io
Unter folgenden Links gibt es sehr gute icons:
thenounproject.com
Font Awesome
Unter folgendem Link kann man schöne Schriften von Adobe erhalten:
typekit.com
font-size
Die Eigenschaft font-size bestimmt die Darstellungsgröße der Schrift. Angaben in Pixeln, Prozentwerten oder relativen Schriftgrößen wie em oder ex
- absolute-size values
- font-size: xx-small;
- font-size: x-small;
- font-size: small;
- font-size: medium;
- font-size: large;
- font-size: x-large;
- font-size: xx-large;
- relative-size values
- font-size: larger;
- font-size: smaller;
- length values
- font-size: 12px;
- font-size: 0.8em;
- percentage values
- font-size: 80%;
- font-size: inherit;
Pixel, em oder Prozent?
-
- about techniques for creating context-sensitive Web designs that work across multiple devices and screen resolutions effectively
- Pixels to Ems tabelle
Another way of setting the font size is with em values. The size of an em value is dynamic. When defining the font-size property, an em is equal to the size of the font that applies to the parent of the element in question. If you haven't set the font size anywhere on the page, then it is the browser default, which is probably 16px. So, by default 1em = 16px, and 2em = 32px. If you set a font-size of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is essentially a multiplier of the current em size.
line-height
Der Abstand der Textzeilen innerhalb eines Absatzes (Zeilenhöhe)
font-variant
Groß- und Kleinschreibung, Durch font-variant kann man alle Buchstaben wie Großbuchstaben (Kapitälchen) ausgegeben lassen. "Echte" Großbuchstaben, wie zum Beispiel bei Namen und Dingen, werden noch größer angezeigt. Sie heben sich also ab.
font weight
(Schriftgewicht) | normal oder fett
/* Relative to the parent */
font-weight: lighter;
font-weight: bolder;
100, 200, 300, 400, 500, 600, 700, 800, 900
Numeric font weights for fonts that provide more than just normal and bold.