Das Geheimnis, wie man Schriftarten in Textfeldern ändert

This work by Harald Zigala is licensed under CC BY-NC-SA 4.0

Um die Schriftart in einem Textfeld zu ändern, geht man grundsätzlich wie folgt vor:

1. Man legt ein Verzeichnis an, lädt dort die gewünschte legal benutzbare Schriftart hoch und stellt das Verzeichnis auf "Verborgen, aber verfügbar"

2. Anschließend erstellt man ein Textfeld mit Text und den nachfolgend gezeigten <style> Befehlen; diese erstellen die font-family: "Wingdings"

3. In Zeile 5 wird wird die Link-Adresse zur versteckten, aber verfügbaren Schriftarten-Datei korrekt eingetragen

4. In Zeile 21 wird von der Schriftart OpenDyslexic auf unsere font-family Wingdings umgestellt; der Text in Zeile 20 steht daher noch im Klartext, der Text in den Zeilen 22ff erscheint in Wingdings

In den Zeilen 5 (Pfad zur Schriftart) und 12 (Pfad für optionales Bild) müssen die Pfadangaben korrekt gesetzt werden!

Kurze Erklärung:

Der vorliegende HTML- und CSS-Code erstellt eine stilisierte "Tippbox" (Infobox), die Informationen in einem auffälligen Design anzeigt. Die Infobox enthält Text mit unterschiedlichen Schriftarten und Farben, darunter die Verwendung der benutzerdefinierten Schriftart "Wingdings". Ein Bild wird auf der rechten Seite der Infobox angezeigt.

Ausführliche Erklärung:

- Zeilen 3-9: Diese CSS-Regel definiert eine benutzerdefinierte Schriftart namens "Wingdings". Sie verwendet eine TrueType-Schriftart (TTF), die von einer bestimmten URL geladen wird.

- Zeilen 11-28: Dieser Abschnitt des Codes erstellt eine "Tippbox" (Infobox), die Informationen in einem stilisierten Container anzeigt. Die Container-Eigenschaften und der Inhalt sind wie folgt:

   - Ein Bild wird auf der rechten Seite der Infobox angezeigt.

  - Der Container hat abgerundete Ecken (border-radius), eine grüne Hintergrundfarbe (seagreen), einen Innenabstand von 20px, einen oberen Rand von 30px, einen unteren Rand von 20px, einen linken Rand von 5px und einen 10px breiten rosybrown-Rahmen.

 

- Zeilen 19-27: Der Textinhalt innerhalb der Infobox wird definiert. Der Text verwendet unterschiedliche Schriftarten und Farben:

   - Der Haupttext verwendet die Schriftart "OpenDyslexic", eine weiße Textfarbe (rgb(255, 255, 255)) und eine sehr große Schriftgröße (xx-large).

  - Ein untergeordneter Textabschnitt verwendet eine etwas kleinere Schriftgröße (x-large).

  - Innerhalb des Texts wird die Schriftart auf "Wingdings" geändert, und es werden Ziffern und ein längerer Text mit Sonderzeichen in Wingdings-Schriftart angezeigt.

 - Zeilen 34-36: Hier endet die Infobox, und der HTML-Code ist abgeschlossen.

 

Dieser Code erstellt eine stilisierte Infobox mit benutzerdefinierten Schriftarten und Farben, die Informationen und Text in verschiedenen Schriftgrößen darstellt.

=============== C o d e ===============

<style>
  /* Definieren einer benutzerdefinierten Schriftart (Wingdings) */
  @font-face {
    font-family: "Wingdings";
    src: url("https://moodle.tsn.at/Pfad_zu_Datei_eingeben/Wingdings-Regular-Font.ttf") format("truetype");
  }
</style>
<!-- Tippbox (Infobox) -->
<div class="container" style="padding-right: 30px">
    <!-- Bild auf der rechten Seite der Infobox -->
    <div style="position: relative; top: -30px; right: -15px; float: right;">
      <img src="https://moodle.tsn.at/pfad_zu_Datei_eingeben/0/dice-002.png" width="80px">
    </div>
    <!-- Stil und Inhalt der Infobox -->
    <div style="border-radius: 10px; background-color: seagreen; padding: 20px; margin: 30px 0 20px 5px; border: 10px solid rosybrown">
        <p>
          <!-- Stil und Inhalt des Texts in der Infobox -->
          <span class="" style="font-family: OpenDyslexic; color: rgb(255, 255, 255); font-size: xx-large;">
            <span class="" style="font-size: x-large;">
              Dies ist eine Schriftprobe für Wingdings<br>
              <span class="" style="font-family: Wingdings; color: rgb(255, 255, 255); font-size: large;">
                Ziffern: 0123456789; <br>
                TXT: Ach, bald crashen die Entrechteten furchtlos gemeingefährliche, hoheitliche Institutionen, jagen kriegserfahrene Leutnants mit Nachtsichtgeräten oder parlieren querbeet Rumänisch, Swahili, Türkisch und Vietnamesisch, während Xanthippe Yamswurzeln züchtet.
              </span>
            </span>
          </span>
        </p>
    </div>
</div>
<!-- Ende der Infobox -->