CSS-Tags (Schrift)

Diese Dokumentation ist stark vereinfacht und beschränkt sich auf die wesentlichen Grundlagen.

 

Schrift

Die wesentlichen Angaben zur Schrift ist dessen Name, der Stil sowie die Farbe.

 

font-family

Angabe einer bestimmten Schriftfamilie wie Helvetica oder Times.
Angabe einer generischen Schriftfamilie.

serif: Schriftart mit Serifen wie z.B. Times
sans-serif: Schriftart ohne Serifen wie z.B. Helvetica
cursive: eine Schriftart für Schreibschrift
fantasy: eine Schriftart für ungewöhnliche Schrift
monospace: eine Schriftart mit dickengleichen Zeichen, wie z.B. Courier

Bedenken Sie, eine bestimmte Schriftfamilie wie z.B. Helvetica kann der Browser nur darstellen wenn diese Schrift auch auf dem Computer des Anwenders installiert ist. Auf diese Weise funktionieren nur Schriften zuverlässig die weit verbreitet sind. Geben Sie deshalb immer mehrere Schriften als Alternative an, zum Schluss immer die passende generische Schriftfamilie. Der Browser sucht der Reihe nach das System nach den Schriften ab und wird im Zweifelsfall die Generische verwenden.

Verwenden Sie Google Fonts um auf Ihrer Webseite

 

font-size

Angabe der Schriftgrösse, absolut oder relativ. Angaben in px oder em. Für die Darstellung am Bildschirm sollten Sie em bevorzugen. 1em entspricht der im Browser eingestellten Standardgrösse. Die Verwendung von font-size: 1em; im wird automatisch verwendet, auch wenn Sie es im CSS nicht explizit angeben. Mit 2em, 2.5em geben Sie an um wieviel grösser der Text als der Standardtext sein soll.

 

 font-weight

Mit font-weight definieren Sie die Strichstärke der Schrift.

lighter: dünner als im Elternelement
normal: normale Strichstärke
bold: fett
bolder: fetter als im Elternelement
inherit: Strichstärke des Elternelements
100, 200, 300, 400, 500, 600, 700, 800, 900: extra-dünn (100) bis extra-fett (900)

 

font-style

Mit font-style geben Sie die Neigung der Schrift an.

normal: normaler Schriftstil
italic: kursiver Schriftstil
oblique: schräg gestellter Schriftstil
inherit: Schriftstil des Elternelements

Zwischen italic und oblique werden sie kaum einen Unterschied feststellen. Bei italic wird auf eine kursive Schrift zurück gegriffen, bei oblique wird die normale Schrift schräg gestellt. Ist bei der Angabe von italic keine kursive Schrift verfügbar, wendet der Browser oblique an.

 

font-variant

Mit font-variant wird die Schrift mittels Kapitälchen (kleine Grossbuchstaben statt Kleinbuchstaben) dargestellt.

normal: normaler Schriftstil
small-caps: Kapitälchen
inherit: Schriftstil des Elternelements.

 

line-height

Mit line-height legen Sie die Zeilenhöhe fest. Je grösser der Wert, um so grösser der Abstand zwischen den Textzeilen.

Fliesskommazahl oder Prozentangabe
Längenangabe: Zoll, Pica, Punkt, cm und mm
normal: Browsereinstellung, in der Regel zwischen 1.25 und 1.4
inherit: Zeilenhöhe des Elternelements

 

color

Mit color geben Sie die Schriftfarbe an.

#00FF00: Farbcode
transparent: unsichtbar, macht das Sinn?
inherit: Farbe des Elternelement

 

text-shadow

Vor CSS 3 konnte man Schriften mit Schatten nur als Grafik einsetzen.

Erster Wert: Versatz des Schattens nach rechts.
Zweiter Wert: Versatz des Schattens nach unten.
Dritter Wert: bestimmt die Härte des Schattens. Je grösser der Wert um so weicher der Schatten.
Vierter Wert: die Farbe des Schattens.

 

@font-face

Mit @font-face können Sie zusätzliche Schriften integrieren. Das können Google Fonts sein oder Schriften die Sie auf Ihrer Webseite bereit stellen. Der Vorteil liegt darin, dass genau die Schriften auch angezeigt werden die sie wollen, auch ausgefallenere Schriften die nicht zum Standard der gängigen Betriebssysteme gehören.

 

Die einfachere Variante ist Google. Sie brauchen lediglich eine Zeile Code in den Header zu integrieren, der Rest macht Google für Sie.

<link href=“https://fonts.googleapis.com/css?family=Saira+Extra+Condensed“ rel=“stylesheet“>

Und so notieren Sie die Schrift in Ihrem CSS:

font-family: ‚Saira Extra Condensed‘, sans-serif;

Die Google Fonts finden Sie unter fonts.google.com/.

Besser ist es jedoch, wenn Sie die Schriften auf ihren Server laden. Dabei müssen Sie jedoch beachten, dass die Schrift in unterschiedlichen Formaten vorliegen muss, damit das auch mit allen Browsern klappt.

Beachten Sie, dass Sie die Lizenz für die Schrift besitzen, oder dass Sie eine Lizenzfreie Schrift verwenden.

 

Seite erstellt: am 19.10.2017,   aktualisiert am: 21.11.2017,   Autor: René A. Da Rin



Schreibe eine Antwort

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

 

Durch die weitere Nutzung der Seite stimmen Sie der Verwendung von Cookies und der Datenübermittlung zu Dritten zu. [ weitere Informationen ]

Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Diese Webseite verwendet weiter 'Akismet' und 'Jetpress' für die Einbindung von Social Media und der Abwehr von Spam. Welche Daten dabei an externe Server übermittelt wird ist durch den Seitenbetreiber nicht zu beeinflussen. Diese Daten sind jedoch für ein vollumfängliches funktionieren der Seite unerlässlich. Sollten Sie damit nicht einverstanden sein, dürfen Sie diese Webseite nicht weiter nutzen. Ausserdem sollten Sie sich darüber Gedanken machen, ob Sie das Internet überhaupt nutzen wollen. Das liest sich für Sie jetzt bestimmt etwas eigenartig, ist aber nun einfach mal so. Ein Datenschutzkonvormes Internet so wie es sich unsere Politiker vorstellen ist zum jetzigen Zeitpunkt nun einfach mal nicht möglich.

Bei den übermittelten Daten handelt es sich nicht um Ihren Namen, jedoch aber um Ihre IP-Adresse. Ändern Sie Diese nicht regelmässig, kann auf Grund dieser Daten ein Surfprofil der entsprechenden Adresse erstellt werden. Auch ist es langfristig dadurch möglich, der IP Ihre eMail-Adresse zuzuordnen und irgendwann auch Ihren Namen zu kennen. Auch ist Ihr Provider verpflichtet darüber Protokoll zu führen und langfristig zu speichern, wann Sie mit welcher IP unterwegs sind.

Der grösste Datensammler ist übrigens Google. Fragen Sie doch da mal nach, welche Daten über Sie gespeichert werden. Gem. der Datenschutzverordnung müssten Sie eigentlich darüber Auskunft erhalten.

Diese Webseite speichert lokal keine IP-Adressen der Besucher und hat auch keine Kenntniss über die wahre Identität seiner Besucher.

Aktivitäten im Adminbereich, dies beginnt bereits, wenn man versucht sich einzuloggen, werden vollumfänglich samt IP-Adresse protokolliert und für 60 Tage gespeichert.

Schließen