diff --git a/public/fonts/Kablammo.ttf b/public/fonts/Kablammo.ttf new file mode 100644 index 0000000..eefbe33 Binary files /dev/null and b/public/fonts/Kablammo.ttf differ diff --git a/src/components/slides/css-basics/font.astro b/src/components/slides/css-basics/font.astro index 9f2512c..3787777 100644 --- a/src/components/slides/css-basics/font.astro +++ b/src/components/slides/css-basics/font.astro @@ -81,7 +81,7 @@ 

       .line-height {
-        line-height: 20px;
+        line-height: 2rem;
       }
@@ -92,41 +92,344 @@

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ +
+

+ word-spacing +

+

Abstände zwischen Wörtern modifizieren

+
+
+ 

+      .word-spacing-X {
+        word-spacing: Xrem;
+      }
+
+
+

+ 1rem Abstand! +

+

+ 2rem Abstand! +

+

+ 3rem Abstand! +

+
+
+ +
+

font-weight

+

Voll Fett! Oder Dünn!

+
+
+

Mögliche Werte

+ +
+
+

Wichtig!

+

Nicht jede Schrift hat alle font-weight's definiert.

+

Viele System-Fonts haben zum Beispiel keine Dünne Variante

+
+
+ 

+      .font-bold {
+        font-weight: 900;
+      }
+      .font-thin {
+        font-weight: 100;
+      }
+
+
+

+ Dünn! +

+

+ Normal! +

+

+ Fett! +

+
+
+ +
+

text-decoration-*

+

Linien setzen

+
+
+

+ text-decoration-line +

+
+
+

+ Unterstrichen (underline) +

+

+ Durchgestrichen (line-through) +

+

+ Überstrichen (overline) +

+
+
+ +
+

Man kann das auch alles Kombinieren!

+ 

+      .all-decorations {
+        text-decoration: underline overline line-through;
+      }
+
+ +
+

+ Alles was geht! +

+
+
+ +
+

+ text-decoration-style +

+
+
+

+ Doppelt (double) +

+

+ Gepunktet (dotted) +

+

+ Gestrichelt (dashed) +

+

+ Gewellt (wavy) +

+
+
+ +
+

+ text-decoration-thickness + 


+        .thick-line {
+          text-decoration-line: underline;
+          text-decoration-style: solid;
+          text-decoration-thickness: 1rem;
+        }
+
+ +
+

+ Hallo Welt! +

+
+

+
+ +
+

text-decoration als Kombination angeben

+
+ +
+ 

+      .decorate {
+        text-decoration: underline wavy 3px blue;
+      }
+
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit ad minima laborum consequatur inventore? Placeat, perferendis deleniti? Facilis enim aperiam consequuntur itaque asperiores assumenda. Autem porro animi iure expedita inventore. +

+
+
+ +
+

+ Wie eben gesehen, kann man auch die Farbe anpassen! +

+

+ (text-decoration-color) +

+
+ +
+

Textausrichtung mit text-align

+
+
+

4 Werte:

+ +
+
+
+

+ Ich bin linksbündig +

+

+ Ich bin rechtsbündig +

+

+ Ich bin zentriert +

+
+
+
+

justify erzeugt einen Blocktext

+
+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam reprehenderit, nemo rem sunt magni in sit at unde, expedita sapiente iste tempore beatae! Voluptates praesentium deserunt dolores facilis non sit. +

+
+
+ +
+

Kursiv mit font-style

+
+ +
+ 

+      .kursiv {
+        font-style: italic;
+      }
+
+
+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis eos inventore, excepturi alias molestiae rerum libero soluta neque ipsum veritatis corporis magnam tempora nulla qui id? Alias eligendi dicta exercitationem. +

+
+
+
+

+ Es gibt auch dynamische Fonts, die es erlauben einen beliebigen "Slant" zwischen 0 und 90 Grad einzugeben. +
+ Der einzugebene Befehl für den font-style ist "oblique": +

+ 

+      .angle-30 {
+        font-style: oblique 30deg;
+      }
+
+
+ +
+

Noch 2 ...

+
+ +
+

Textschattierung mittels text-shadow

+
+
+ 

+      .bloody {
+        text-shadow:
+          5px // x-offset
+          5px // y-offset
+          10px // blur
+          red // color 
+        ;
+      }
+
+

+ + Hallo! + +

+
+ +
+

Andere Schriftfamilien verwenden?

+
+
+

Natürlich lassen sich verschiedene und mehr als eine Schriftfamilie für die Website definieren.

+

+ + Generel werden oft externe Fonts verwendet um dem Stil einer Website zu verdeutlichen. + +

+

Trotzdem sollte mit Bedacht gewählt werden; Webfonts müssen nachgeladen werden, und jede Font hat andere Features.

+
+ +
+ 

+      .custom-fonts {
+        font-family:
+          Noteworthy,
+          "Source Sans Pro",
+          -apple-system,
+          sans-serif,
+          monospace;
+        ;
+      }
+
+

+ + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero itaque expedita ratione maiores, nostrum quibusdam dicta illo iste veniam possimus ipsum, quam, repellat hic eveniet excepturi! Sit numquam unde necessitatibus. + +

+
+
+

Es lassen sich mehrere Fonts definieren, viele haben auch einen speziellen Namen, damit das Betriebssystem entscheiden kann ("sans-serif", "monospace", "-apple-system")

+

Der erste Verfügbare Font in der Liste wird dann dem Benutzer angezeigt.

+
+ +
+

+ + Krass was alles geht! + +

+
+ +
+

Fonts mit CSS importieren und nutzen

+
+ +
+ 

+      // Font definieren und importieren
+      @font-face {
+        font-family: 'Kablammo';
+        font-style: normal;
+        font-weight: 400;
+        font-display: swap;
+        src: url("/fonts/Kablammo.ttf") format('woff2');
+        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+      }
+
+ 

+      // Font verwenden
+      .apply-font {
+        font-size: 6rem;
+        font-family: Kablammo;
+        font-optical-sizing: auto;
+        font-weight: 400;
+        font-style: normal;
+      }
+
+
\ No newline at end of file diff --git a/src/components/slides/css-basics/index.astro b/src/components/slides/css-basics/index.astro index 7c47e63..28c5c3e 100644 --- a/src/components/slides/css-basics/index.astro +++ b/src/components/slides/css-basics/index.astro @@ -11,8 +11,19 @@ import Font from './font.astro'; \ No newline at end of file