Aktivitäten
Tech. Berichte
Seiten Index
Übersetzungen
Software
Suche
Ähnlich:
Style
CSS
Tips & Tricks
Bert Boscreated 17 Jan 2001;
last updated $Date: 2007/01/15 13:04:18 $ GMT
Deutsche Übersetzung der Seite "Web Style Sheets CSS tips & tricks"
Originale Version: http://www.w3.org/Style/Examples/007/fonts.html
Aktuelle - übersetzte - Version: http://www.WSS-EXPERT.de/Style/Examples/007/fonts.html
Übersetzer: A.Friedrich
Bookmark:
Sehr geehrter Leser dieses Dokumentes - bitte beachten Sie dass es sich bei dieser Seite um die Übersetzung eines W3C Textes handelt.
Der Original Text ist urheberrechtlich geschützt, bitte beachten Sie die im Originaldokument vermerkten Hinweise. Die Rechte an der Übersetzung selbst liegen allein beim Übersetzer.
Der Übersetzer bedankt sich bei den folgenden Seiten für Ihre Unterstützung: Hilfe .
Für eventuell vorhandene Fehler in der Übersetzung kann keine Gewähr übernommen werden, das einzig massgebliche und legitime Dokument ist das englische W3C Original.
Kommentare des Übersetzers sind als solche gekennzeichnet und unterliegen ebenfalls dem Copyright des Übersetzers. Diese sind nicht Bestandteil des englischen Originaldokumentes.
(Diese Seite verwendet CSS Style Sheets)
Nach der Farbe ist die Schriftart (font) der wohl wichtigste Grundfaktor einer Seite. Auf dieser Seite werde ich Ihnen nicht irgendwelche "Tricks" zeigen, vielmehr möchte ich Ihnen einen Überblick über das Spektrum der Font-Variationen von CSS geben.
Da nicht alle Fonts auf allen Computern verfügbar sind (es gibt Tausende davon, viele kosten Geld), bietet CSS die Möglichkeit beim Nicht-Vorhandensein einer Schriftart auf Ersatzschriftarten auszuweichen. Sie geben zuerst den zu verwendenden Hauptfont an, danach alle Ersatz-Fonts und zu guter Letzt eine generelle Fontart von denen es derzeit fünf gibt: serif, sans-serif, monospace, cursive und fantasy.
Die folgende Tabelle zeigt eine Auswahl verschiedener Fonts (Ihr Browser kennt vermutlich nicht alle davon) und Sie können sehen was der Browser aus den fünf generischen Fonts macht:
| 'sans-serif': normale Fonts ohne Serifen | |
|---|---|
Arial, sans-serif
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
Helvetica, sans-serif
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
Gill Sans, sans-serif
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
Lucida, sans-serif
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
Helvetica Narrow, sans-serif
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
sans-serif
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
| 'serif': normale Fonts mit Serifen | |
Times, serif
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
Times New Roman, serif
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
Palatino, serif
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
Bookman, serif
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
New Century Schoolbook, serif
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
serif
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
| 'monospace': Fonts mit fester Breite | |
Andale Mono, monospace
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
Courier New, monospace
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
Courier, monospace
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
Lucidatypewriter, monospace
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
Fixed, monospace
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
monospace
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
| 'cursive': Fonts welche Hand geschriebenen Text simulieren | |
Comic Sans, Comic Sans MS, cursive
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
Zapf Chancery, cursive
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
Coronetscript, cursive
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
Florence, cursive
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
Parkavenue, cursive
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
cursive
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
| 'fantasy': dekorative Fonts, für Überschriften etc. | |
Impact, fantasy
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
Arnoldboecklin, fantasy
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
Oldtown, fantasy
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
Blippo, fantasy
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
Brushstroke, fantasy
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
fantasy
| Der Schnelle Braune Fuchs Springt Über Den Trägen Hund |
Die meissten Fonts stellen bestimmte Styles innerhalb der Fontfamilie bereit, typischerweise einen fetten und kursiven Style, oftmals auch fett-kursiv in Kombination, seltener die Nutzung von kleinen Grossbuchstaben im Gesamttext und in sehr wenigen Fällen extra-dünn oder extra-dick oder gestreckte/gestauchte Styles.
Die folgende Tabelle zeigt eine Anzahl verschiedener Styles. Sollten Sie auf Ihrem Computer nicht eine sehr grosse Anzahl von Fonts installiert haben werden viele Zeilen gleich aussehen.
| rule | serif | sans-serif | |||
|---|---|---|---|---|---|
| Styles | |||||
font-style: normal
| Der Schnelle… | Der Schnelle… | |||
font-style: italic
| Der Schnelle… | Der Schnelle… | |||
font-style: oblique
| Der Schnelle… | Der Schnelle… | |||
| Gewichtung | |||||
font-weight: 100
| Der Schnelle… | Der Schnelle… | |||
font-weight: 200
| Der Schnelle… | Der Schnelle… | |||
font-weight: 300
| Der Schnelle… | Der Schnelle… | |||
font-weight: normal
| Der Schnelle… | Der Schnelle… | |||
font-weight: 500
| Der Schnelle… | Der Schnelle… | |||
font-weight: 600
| Der Schnelle… | Der Schnelle… | |||
font-weight: bold
| Der Schnelle… | Der Schnelle… | |||
font-weight: 800
| Der Schnelle… | Der Schnelle… | |||
font-weight: 900
| Der Schnelle… | Der Schnelle… | |||
| Varianten | |||||
font-variant: normal
| Der Schnelle… | Der Schnelle… | |||
font-variant: small-caps
| Der Schnelle… | Der Schnelle… | |||
| Gestreckt | |||||
font-stretch: ultra-condensed
| Der Schnelle… | Der Schnelle… | |||
font-stretch: extra-condensed
| Der Schnelle… | Der Schnelle… | |||
font-stretch: condensed
| Der Schnelle… | Der Schnelle… | |||
font-stretch: semi-condensed
| Der Schnelle… | Der Schnelle… | |||
font-stretch: normal
| Der Schnelle… | Der Schnelle… | |||
font-stretch: semi-expanded
| Der Schnelle… | Der Schnelle… | |||
font-stretch: expanded
| Der Schnelle… | Der Schnelle… | |||
font-stretch: extra-expanded
| Der Schnelle… | Der Schnelle… | |||
font-stretch: ultra-expanded
| Der Schnelle… | Der Schnelle… | |||
In CSS3 ist ein weiterer Style verfügbar: 'font-effect'. Dieser lässt die Buchstaben eingeprägt oder hervorstehend erscheinen.
Aktivitäten
Tech. Berichte
Seiten Index
Übersetzungen
Software
Suche
Ähnlich:
Style
CSS
Tips & Tricks
Bert Bos