Eigener Font Generator zum anzeigen eigener Schriften?
Hallo zusammen,
wie kann man einen eigenen Font Generator erstellen? Ich habe verschiedene Schriftarten und möchte diese auf meiner eigenen Website anzeigen lassen, nachdem ich meinen Wunschtext eingegeben habe.
Ich brauche nur meine Schriftarten für die ich auch eine Lizenz habe daher helfen mir Seiten wie DaFont etc.. nichts.
Wer kann mir hier helfen?
1 Antwort
Mindestvoraussetzung hierfür ist, dass du weißt, wie du eigenen HTML-, CSS- und JavaScript-Code auf deiner Webseite einbinden / verändern kannst (und alle drei Sprachen generell kein absolutes Neuland für dich sind). Des Weiteren musst du die Schriftdateien natürlich im Webverzeichnis deponieren.
Binde anschließend die möglichen Schriftarten/-schnitte via @font-face für deine Seite ein und lege zudem für jede Schriftart / jeden Schriftschnitt einen CSS-Klassenselektor an.
Beispiel:
.my-font-1-regular {
font-family: "MyFont 1 Regular";
}
.my-font-1-bold {
font-family: "MyFont 1 Bold";
}
/* etc. ... */
Für die Auswahl auf der Webseite könntest du (neben der Textbox) eine Auswahlbox anlegen, die alle möglichen Optionen auflistet (der Wert einer Option entspricht dem Namen des zugehörigen Klassenselektors).
<label for="font-selection">Schriftart</label>
<select id="font-selection">
<option value="my-font-1-regular">MyFont 1 Regular</option>
<option value="my-font-1-bold">MyFont 1 Bold</option>
<!-- etc. --->
</select>
<textarea id="text"></textarea>
Der Darstellungswechsel der Schrift wird mittels JavaScript bewerkstelligt, indem ein Listener auf Wertänderungen der Auswahlbox wartet. Wenn das passiert, wird der Textbox die jeweils ausgewählte Klasse zugeordnet.
const textBox = document.getElementById("text");
const fontSelector = document.getElementById("font-selection");
fontSelector.addEventListener("change", () => {
textBox.className = fontSelector.value;
});
textBox.className = fontSelector.value;
Die grundlegende Funktionalität wäre damit gegeben. Im Anschluss wäre es sicherlich nicht schlecht, die Textbox mit CSS noch in ihrer Größe (height, width) zu fixieren.