mirror of
https://github.com/TheTaz25/denis.ergin.git
synced 2025-07-06 13:18:49 +00:00
feat(slides): finalize font section
This commit is contained in:
Denis Ergin
parent
cda0027bcd
commit
cf760712a3
3 changed files with 446 additions and 38 deletions
BIN
public/fonts/Kablammo.ttf
Normal file
BIN
public/fonts/Kablammo.ttf
Normal file
Binary file not shown.
|
|
@ -81,7 +81,7 @@
|
|||
<section>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.line-height {
|
||||
line-height: 20px;
|
||||
line-height: 2rem;
|
||||
}
|
||||
</code></pre>
|
||||
<div class="apply-styles one">
|
||||
|
|
@ -92,41 +92,344 @@
|
|||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
|
||||
<section>
|
||||
<h4>
|
||||
<code>word-spacing</code>
|
||||
</h4>
|
||||
<p>Abstände zwischen Wörtern modifizieren</p>
|
||||
</section>
|
||||
<section>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.word-spacing-X {
|
||||
word-spacing: Xrem;
|
||||
}
|
||||
</code></pre>
|
||||
<div class="apply-styles one">
|
||||
<p class="word-spacing-1">
|
||||
1rem Abstand!
|
||||
</p>
|
||||
<p class="word-spacing-2">
|
||||
2rem Abstand!
|
||||
</p>
|
||||
<p class="word-spacing-3">
|
||||
3rem Abstand!
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4><code>font-weight</code></h4>
|
||||
<p>Voll Fett! Oder Dünn!</p>
|
||||
</section>
|
||||
<section>
|
||||
<p>Mögliche Werte</p>
|
||||
<ul>
|
||||
<li>
|
||||
Numerisch. Je höher, desto fetter.
|
||||
<ul>
|
||||
<li>100</li>
|
||||
<li>...</li>
|
||||
<li>900</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
Keywords:
|
||||
<ul>
|
||||
<li>bold</li>
|
||||
<li>bolder</li>
|
||||
<li>lighter</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<p>Wichtig!</p>
|
||||
<p>Nicht jede Schrift hat alle <code>font-weight</code>'s definiert.</p>
|
||||
<p>Viele System-Fonts haben zum Beispiel keine Dünne Variante</p>
|
||||
</section>
|
||||
<section>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.font-bold {
|
||||
font-weight: 900;
|
||||
}
|
||||
.font-thin {
|
||||
font-weight: 100;
|
||||
}
|
||||
</code></pre>
|
||||
<div class="apply-styles one helvetica">
|
||||
<p class="font-thin">
|
||||
Dünn!
|
||||
</p>
|
||||
<p>
|
||||
Normal!
|
||||
</p>
|
||||
<p class="font-bold">
|
||||
Fett!
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4><code>text-decoration-*</code></h4>
|
||||
<p>Linien setzen</p>
|
||||
</section>
|
||||
<section>
|
||||
<p>
|
||||
<code style="padding-bottom: 4rem;">text-decoration-line</code>
|
||||
</p>
|
||||
<br>
|
||||
<div class="apply-styles one">
|
||||
<p class="underline">
|
||||
Unterstrichen (<code>underline</code>)
|
||||
</p>
|
||||
<p class="strike-through">
|
||||
Durchgestrichen (<code>line-through</code>)
|
||||
</p>
|
||||
<p class="overline">
|
||||
Überstrichen (<code>overline</code>)
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Man kann das auch alles Kombinieren!</p>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.all-decorations {
|
||||
text-decoration: underline overline line-through;
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
<div class="apply-styles one">
|
||||
<p class="all-decorations">
|
||||
Alles was geht!
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>
|
||||
<code style="padding-bottom: 4rem;">text-decoration-style</code>
|
||||
</p>
|
||||
<br>
|
||||
<div class="apply-styles one">
|
||||
<p class="double underline">
|
||||
Doppelt (<code>double</code>)
|
||||
</p>
|
||||
<p class="dotted underline">
|
||||
Gepunktet (<code>dotted</code>)
|
||||
</p>
|
||||
<p class="dashed underline">
|
||||
Gestrichelt (<code>dashed</code>)
|
||||
</p>
|
||||
<p class="wavy underline">
|
||||
Gewellt (<code>wavy</code>)
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>
|
||||
<code style="padding-bottom: 4rem;">text-decoration-thickness</code>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.thick-line {
|
||||
text-decoration-line: underline;
|
||||
text-decoration-style: solid;
|
||||
text-decoration-thickness: 1rem;
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
<div class="apply-styles one">
|
||||
<p class="thick-line">
|
||||
Hallo Welt!
|
||||
</p>
|
||||
</div>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p><code>text-decoration</code> als Kombination angeben</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw contenteditable>
|
||||
.decorate {
|
||||
text-decoration: underline wavy 3px blue;
|
||||
}
|
||||
</code></pre>
|
||||
<div class="apply-styles one">
|
||||
<p class="decorate">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>
|
||||
Wie eben gesehen, kann man auch die Farbe anpassen!
|
||||
</p>
|
||||
<p><code>
|
||||
(text-decoration-color)
|
||||
</code></p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Textausrichtung mit <code>text-align</code></h4>
|
||||
</section>
|
||||
<section>
|
||||
<p>4 Werte:</p>
|
||||
<ul>
|
||||
<li>start</li>
|
||||
<li>end</li>
|
||||
<li>center</li>
|
||||
<li>justify</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<div class="apply-styles one">
|
||||
<p class="start">
|
||||
Ich bin linksbündig
|
||||
</p>
|
||||
<p class="end">
|
||||
Ich bin rechtsbündig
|
||||
</p>
|
||||
<p class="center">
|
||||
Ich bin zentriert
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<p><code>justify</code> erzeugt einen Blocktext</p>
|
||||
<div class="apply-styles one">
|
||||
<p class="justify">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Kursiv mit <code>font-style</code></h4>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.kursiv {
|
||||
font-style: italic;
|
||||
}
|
||||
</code></pre>
|
||||
<div class="apply-styles one">
|
||||
<p class="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.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<p>
|
||||
Es gibt auch dynamische Fonts, die es erlauben einen beliebigen "Slant" zwischen 0 und 90 Grad einzugeben.
|
||||
<br>
|
||||
Der einzugebene Befehl für den <code>font-style</code> ist "oblique":
|
||||
</p>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.angle-30 {
|
||||
font-style: oblique 30deg;
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Noch 2 ...</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Textschattierung mittels <code>text-shadow</code></h4>
|
||||
</section>
|
||||
<section>
|
||||
<pre class="css"><code data-trim data-line-numbers="1-8|3|4|5|6" is:raw>
|
||||
.bloody {
|
||||
text-shadow:
|
||||
5px // x-offset
|
||||
5px // y-offset
|
||||
10px // blur
|
||||
red // color
|
||||
;
|
||||
}
|
||||
</code></pre>
|
||||
<p class="apply-styles one">
|
||||
<span class="bloody">
|
||||
Hallo!
|
||||
</span>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Andere Schriftfamilien verwenden?</h4>
|
||||
</section>
|
||||
<section>
|
||||
<p>Natürlich lassen sich verschiedene und mehr als eine Schriftfamilie für die Website definieren.</p>
|
||||
<p class="apply-styles one">
|
||||
<span class="noteworthy">
|
||||
Generel werden oft externe Fonts verwendet um dem Stil einer Website zu verdeutlichen.
|
||||
</span>
|
||||
</p>
|
||||
<p>Trotzdem sollte mit Bedacht gewählt werden; Webfonts müssen nachgeladen werden, und jede Font hat andere Features.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.custom-fonts {
|
||||
font-family:
|
||||
Noteworthy,
|
||||
"Source Sans Pro",
|
||||
-apple-system,
|
||||
sans-serif,
|
||||
monospace;
|
||||
;
|
||||
}
|
||||
</code></pre>
|
||||
<p class="apply-styles one">
|
||||
<span class="noteworthy-and-other">
|
||||
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.
|
||||
</span>
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<p>Es lassen sich mehrere Fonts definieren, viele haben auch einen speziellen Namen, damit das Betriebssystem entscheiden kann ("sans-serif", "monospace", "-apple-system")</p>
|
||||
<p>Der erste Verfügbare Font in der Liste wird dann dem Benutzer angezeigt.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p class="apply-styles one">
|
||||
<span class="kablammo">
|
||||
Krass was alles geht!
|
||||
</span>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Fonts mit CSS importieren und nutzen</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
// 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;
|
||||
}
|
||||
</code></pre>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
// Font verwenden
|
||||
.apply-font {
|
||||
font-size: 6rem;
|
||||
font-family: Kablammo;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
</section>
|
||||
|
|
@ -11,8 +11,19 @@ import Font from './font.astro';
|
|||
</div>
|
||||
|
||||
<style lang="scss" is:global>
|
||||
@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;
|
||||
}
|
||||
.apply-styles {
|
||||
&.one {
|
||||
&.helvetica {
|
||||
font-family: "American Typewriter";
|
||||
}
|
||||
.font-large {
|
||||
font-size: 8rem;
|
||||
}
|
||||
|
|
@ -32,6 +43,100 @@ import Font from './font.astro';
|
|||
.line-height {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.word-spacing-1 {
|
||||
word-spacing: 1rem;
|
||||
}
|
||||
.word-spacing-2 {
|
||||
word-spacing: 2rem;
|
||||
}
|
||||
.word-spacing-3 {
|
||||
word-spacing: 3rem;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.overline {
|
||||
text-decoration: overline;
|
||||
}
|
||||
.strike-through {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.all-decorations {
|
||||
text-decoration: underline overline line-through solid;
|
||||
}
|
||||
|
||||
.double {
|
||||
text-decoration-style: double;
|
||||
}
|
||||
.dotted {
|
||||
text-decoration-style: dotted;
|
||||
}
|
||||
.dashed {
|
||||
text-decoration-style: dashed;
|
||||
}
|
||||
.wavy {
|
||||
text-decoration-style: wavy;
|
||||
}
|
||||
|
||||
.thick-line {
|
||||
text-decoration-line: underline;
|
||||
text-decoration-style: solid;
|
||||
text-decoration-thickness: 1rem;
|
||||
}
|
||||
|
||||
.decorate {
|
||||
text-decoration: underline wavy 3px blue;
|
||||
}
|
||||
|
||||
.start {
|
||||
text-align: start;
|
||||
}
|
||||
.end {
|
||||
text-align: end;
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
.justify {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.bloody {
|
||||
text-shadow: 5px 5px 10px red;
|
||||
}
|
||||
|
||||
.noteworthy-and-other {
|
||||
font-family: Noteworthy, Source Sans Pro, -apple-system, sans-serif, monospace;
|
||||
}
|
||||
|
||||
.kablammo {
|
||||
font-size: 6rem;
|
||||
font-family: Kablammo;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-variation-settings:"MORF" 2;
|
||||
animation: MORF 5s infinite;
|
||||
}
|
||||
|
||||
@keyframes MORF {
|
||||
0% {
|
||||
font-variation-settings: "MORF" 0;
|
||||
}
|
||||
50% {
|
||||
font-variation-settings: "MORF" 60;
|
||||
}
|
||||
100% {
|
||||
font-variation-settings: "MORF" 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue