CSS
Typografie

Syntax

• font: [ font-style ] [font-variant] [font-weight] Schriftgröße [/ Zeilenhöhe] Schriftfamilie ;
• font-style: font-style
• Font-Variante: Font-Variante
• Schriftgewicht: Schriftgewicht ;
• Schriftgröße: Schriftgröße ;
• Zeilenhöhe: Zeilenhöhe ;
• Schriftfamilie: Schriftfamilie ;
• Farbe: Farbe ;
• Anführungszeichen: keine | string | initial |
• font-stretch: font-stretch ;
• Text ausrichten: Text ausrichten ;
• text-indent: length | initial |
• Textüberlauf: Clip | Auslassungszeichen | Zeichenfolge | Anfang | Vererbung ;
• Text-Transformation: keine | Großschreibung | Großbuchstaben | Kleinschreibung | Anfangs | Vererbung ;
• Text-Schatten: h-Schatten v-Schatten-Unschärfe-Radius Farbe | keine | anfänglich | erben ;
• font-size-adjust: number | none | initial | vererben;
• Font-Stretch: ultrakondensiert | extrakondensiert | kondensiert | halbkondensiert | normal | halb expandiert | expandiert | extra expandiert | ultra expandiert | initial |
• Bindestriche: keine | Handbuch | auto ;
• Tab-Größe: Nummer | Länge | Anfang | erben ;
• Buchstabenabstand: Normal | Länge | Anfangs | Vererbung ;
• Wortabstand: Normal | Länge | Anfang | Vererbung ;

Parameter

Bemerkungen

Schriftgröße

HTML:

<div id="element-one">Hello I am some text.</div>
<div id="element-two">Hello I am some smaller text.</div>

CSS:

#element-one {
    font-size: 30px;   
}

#element-two {
    font-size: 10px;
}

Der Text in #element-one wird 30px groß sein, während der Text in #element-two 10px groß ist.

Die Schriftkurzschrift

Mit der Syntax:

element {
    font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];
}

Sie können alle Ihre Schriftstile in einer Deklaration mit der Kurzschrift für font . Verwenden Sie einfach die font Eigenschaft und ordnen Sie Ihre Werte in der richtigen Reihenfolge an.

Wenn Sie beispielsweise alle p Elemente mit einer Schriftgröße von 20px fett formatieren und Arial als Schriftfamilie verwenden möchten, müssen Sie sie normalerweise wie folgt codieren:

p {
    font-weight: bold;
    font-size: 20px;
    font-family: Arial, sans-serif;
}

Mit der Schriftkurzschrift kann sie jedoch wie folgt komprimiert werden:

p {
    font: bold 20px Arial, sans-serif;
}

Hinweis : Da font-style , font-variant , font-weight und line-height optional sind, werden die drei in diesem Beispiel übersprungen. Es ist wichtig zu beachten , dass die Verknüpfung mit setzt die anderen Attribute nicht gegeben. Ein weiterer wichtiger Punkt ist , dass die beiden notwendigen Eigenschaften für die Schriftart Verknüpfung zu arbeiten , sind font-size und font-family . Wenn beide nicht enthalten sind, wird die Verknüpfung ignoriert.

Anfangswert für jede der Eigenschaften:

• font-style: normal;
• font-variant: normal;
• font-weight: normal;
• font-stretch: normal;
• font-size: medium;
• line-height: normal;
• font-family - hängt vom Benutzeragenten ab

Schriftenstapel

font-family: 'Segoe UI', Tahoma, sans-serif;

Der Browser versucht, die Schriftart "Segoe UI" auf die Zeichen in den Elementen anzuwenden, auf die die obige Eigenschaft abzielt. Wenn diese Schriftart nicht verfügbar ist oder die Schriftart keine Glyphe für das erforderliche Zeichen enthält, greift der Browser auf Tahoma und gegebenenfalls auf alle serifenlosen Schriftarten auf dem Computer des Benutzers zurück. Beachten Sie, dass für Schriftnamen mit mehr als einem Wort wie "Segoe UI" einfache oder doppelte Anführungszeichen verwendet werden müssen.

font-family: Consolas, 'Courier New', monospace;

Der Browser versucht, die Schriftart "Consolas" auf die Zeichen in den Elementen anzuwenden, auf die sich die oben genannte Eigenschaft bezieht. Wenn diese Schriftart nicht verfügbar ist oder die Schriftart keine Glyphe für das erforderliche Zeichen enthält, wird der Browser auf "Courier New" und gegebenenfalls eine Monospace-Schriftart auf dem Computer des Benutzers zurückgesetzt.

Buchstaben-Abstand

h2 {
  /* adds a 1px space horizontally between each letter;
     also known as tracking */
  letter-spacing: 1px;
}

Mit der Eigenschaft für den Buchstabenabstand wird der Abstand zwischen den Zeichen in einem Text angegeben.

! Buchstabenabstand unterstützt auch negative Werte:

p {
  letter-spacing: -1px;
}

Ressourcen: https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing

Text umwandeln

Mit text-transform Eigenschaft text-transform können Sie die Großschreibung von Text ändern. Gültige Werte sind: uppercase , capitalize , lowercase , initial , inherit , und none

CSS:

.example1 {
    text-transform: uppercase;
}
.example2 {
    text-transform: capitalize;
}
.example3 {
    text-transform: lowercase;
}

HTML

<p class="example1">
    all letters in uppercase  <!-- "ALL LETTERS IN UPPERCASE" -->
</p>
<p class="example2">
    all letters in capitalize <!-- "All Letters In Capitalize (Sentence Case)" -->
</p>
<p class="example3">
    all letters in lowercase  <!-- "all letters in lowercase" -->
</p>

Texteinzug

p {
    text-indent: 50px;
}

Die Eigenschaft text-indent gibt an, um wie viel horizontaler Leerzeichen Text vor dem Anfang der ersten Zeile des Textinhalts eines Elements verschoben werden soll.

Ressourcen:

• Einrücken nur der ersten Textzeile in einem Absatz?
• https://www.w3.org/TR/CSS21/text.html#propdef-text-indent
• https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

Textdekoration

Die text-decoration wird zum Festlegen oder Entfernen von Dekorationen aus Text verwendet.

h1 { text-decoration: none; }
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }
h4 { text-decoration: underline; }

Textdekoration kann in Kombination mit Textdekorationsstil und Textdekorationsfarbe als Abkürzungseigenschaft verwendet werden:

.title { text-decoration: underline dotted blue; }

Dies ist eine Kurzfassung von

.title {
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-decoration-color: blue;
}

Es ist zu beachten, dass die folgenden Eigenschaften nur in Firefox unterstützt werden

• Text-Deko-Farbe
• Textdekorationslinie
• Text-Deko-Stil
• Textdekoration-Überspringen

Textüberlauf

Die Eigenschaft text-overflow beschäftigt sich damit, wie überlaufender Inhalt Benutzern angezeigt werden soll. In diesem Beispiel stehen die ellipsis für abgeschnittenen Text.

.text {
  overflow: hidden;
  text-overflow: ellipsis;
}

text-overflow: ellipsis funktionieren leider nur für eine einzelne Textzeile. Es gibt keine Möglichkeit, Ellipsen in der letzten Zeile des Standard-CSS zu unterstützen. Dies kann jedoch mit einer nicht standardmäßigen Webkit-Implementierung von Flexboxen erreicht werden.

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}

Beispiel (in Chrome oder Safari öffnen):

http://jsfiddle.net/csYjC/1131/

Ressourcen:

https://www.w3.org/TR/2012/WD-css3-ui-20120117/#text-overflow0

Wortabstand

Die Wortabstandseigenschaft gibt das Abstandsverhalten zwischen Tags und Wörtern an.

Mögliche Werte

• eine positive oder negative Länge (mit em px vh cm usw.) oder Prozentsatz (mit % )
• Das Schlüsselwort normal verwendet den voreingestellten Wortabstand der Schriftart
• Das Schlüsselwort inherit übernimmt den Wert des übergeordneten Elements

CSS

.normal    { word-spacing: normal; }
.narrow    { word-spacing: -3px; }
.extensive { word-spacing: 10px; }

HTML

<p>
  <span class="normal">This is an example, showing the effect of "word-spacing".</span><br>
  <span class="narrow">This is an example, showing the effect of "word-spacing".</span><br>
  <span class="extensive">This is an example, showing the effect of "word-spacing".</span><br>
</p>

Online-Demo

Versuch es selber

Lesen Sie weiter:

• Wortabstand - MDN
• Wortabstand - w3.org

Textrichtung

div {
    direction: ltr; /* Default, text read read from left-to-right */
}
.ex {
    direction: rtl; /* text read from right-to-left */
}
.horizontal-tb {
    writing-mode: horizontal-tb; /* Default, text read from left-to-right and top-to-bottom. */
}
.vertical-rtl {
    writing-mode: vertical-rl; /* text read from right-to-left and top-to-bottom */
}
.vertical-ltr {
    writing-mode: vertical-rl; /* text read from left-to-right and top to bottom */
}

Die direction Eigenschaft wird verwendet, um die horizontale Textrichtung eines Elements zu ändern.

Syntax: direction: ltr | rtl | initial | inherit;

Der writing-mode Eigenschaft ändert die Ausrichtung des Textes , so dass es von oben nach unten oder von links nach rechts gelesen werden, abhängig von der Sprache.

Syntax: direction: horizontal-tb | vertical-rl | vertical-lr;

Schriftvariante

Attribute:

normal

Standardattribut der Schriftarten.

Small Caps

Setzt jeden Buchstaben in Großbuchstaben, sondern macht die Kleinbuchstaben (ab ursprünglichem Text) in der Größe kleiner als die Buchstaben , die ursprünglich in Großbuchstaben.

CSS:

.smallcaps{
   font-variant: small-caps;
}

HTML:

<p class="smallcaps">
    Documentation about CSS Fonts
    <br>
    aNd ExAmpLe
</p>

OUPUT:

Anmerkung: Die Eigenschaft font-variant ist eine Abkürzung für die Eigenschaften: font-variant-caps, font-variant-numerisch, font-variant-alternates, font-variant-ligaturen und font-variant-east-asian.

Zitate

Die quotes Eigenschaft wird verwendet, um die öffnenden und schließenden Anführungszeichen des <q> -Tags anzupassen.

q {
    quotes: "«" "»";
}

Textschatten

Um dem text-shadow hinzuzufügen, verwenden Sie die Eigenschaft text-shadow . Die Syntax lautet wie folgt:

text-shadow: horizontal-offset vertical-offset blur color;

Schatten ohne Unschärfekreis

h1 {
  text-shadow: 2px 2px #0000FF;
}

Dies erzeugt einen blauen Schatteneffekt um eine Überschrift

Schatten mit Unschärfekreis

Um einen Weichzeichnungseffekt hinzuzufügen, fügen Sie ein Argument für den blur radius

h1 {
  text-shadow: 2px 2px 10px #0000FF;
}

Mehrere Schatten

Um einem Element mehrere Schatten zu geben, trennen Sie diese durch Kommas

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}