CSS-Schriftarten (Font)


CSS Tutorial  >  Font

Gebräuchliche Arten zur Änderung von Schriftarteneigenschaften in CSS beinhalten folgende:

  • font-family
  • font-size
  • font-weight
  • font-style
  • font-variant

    Weiter unten wird jede einzelne erläutert:

    font-family

    Die font-family-Eigenschaft gibt an, welche Schriftart benutzt werden wird.

    CSS-StatementAusgabe

    p {font-family: verdana;}

    Schriftart Verdana.

    p {font-family: arial;}

    Schriftart Arial.

    p {font-family: impact;}

    Font Family Impact.

    font-size

    Die font-size-Eigenschaft gibt die Schriftartgröße an. Der Wert kann numerisch (Länge oder Prozentangabe) sein, oder ein Text (hier sind mögliche Werte „xx-large”, „x-large”, „large”, „medium”, „small”, „x-small“, und „xx-small“).

    CSS-StatementAusgabe

    p {font-size:9px;}

    Schriftgröße 9px.

    p {font-size:150%;}

    Schriftgröße 150%.

    p {font-size:0.8cm;}

    Schriftgröße 0,8cm.

    p {font-size:small;}

    Schriftgröße klein.

    p {font-size:large;}

    Schriftgröße groß.

    font-weight

    Die font-weight-Eigenschaft gibt an, welche Schriftdicke benutzt werden wird. Die Werte für Schriftdicke können von 100 bis 900 reichen, wobei 900 am dicksten ist. Man kann auch „bold”, „bolder”, oder „normal” angeben.

    Beispiele:

    CSS-StatementAusgabe

    p {font-weight: 100;}

    Dies ist Schriftdicke 100.

    p {font-weight: 900;}

    Dies ist Schriftdicke 900.

    p {font-weight: bold;}

    Dies ist Schriftdicke bold.

    font-style

    Die font-style-Eigenschaft bestimmt ob die Schriftart kursiv oder schräg dargestellt werden soll.

    CSS-StatementAusgabe

    p {font-style: italic;}

    Dies ist kursive Schrift.

    font-variant

    Die font-variant Eigenschaft bestimmt, ob die Schrift in Kapitälchen angezeigt werden wird. Kapitälchen sind großgeschriebene Buchstaben, die aber eine kleinere Schriftgröße haben. Mögliche Werte sind „small-caps” und „normal”. Schauen wir uns ein Beispiel hierzu an.

    Mit dem folgenden CSS-Statement:

    span {
      font-variant:small-caps;
    }

    würde der folgende HTML-Code:

    <span>erst in Kapitälchen</span> UND DANN IN GROßBUCHSTABEN.

    so aussehen:

    erst in Kapitälchen UND DANN IN GROßBUCHSTABEN.

    Folgende Seite: CSS Link



    Copyright © 2024   1keydata.com   Alle Rechte vorbehalten