Windows 11 - Übersicht der installierten Schriftarten erstellen

Problem

Es soll eine Übersicht der installierten Schriftarten erstellt werden. Diese Übersicht soll von jeder installierten Schriftart einen Ansichtsprobe enthalten. Weiter soll es möglich sein, einen eigenen Text eintragen zu können, der dann für alle Schriftarten angewendet wird. Eine Suchfunktion soll vorhanden sein.

Ergebnis

Das Bild ist unter Debian erstellt worden.

Schriftartenübersicht

Durchführung

In einem Chat mit der KI habe ich ein Skript für die Powershell erstellt bekommen. Das Skript kann mit normalen Benutzerrechten ausgeführt werden. Ergebnis ist eine HTML-Datei, die in dem Ordner erstellt wird, in dem das Skript sich befindet.

Inhalt der Datei

@echo off
set "OUTPUT=schriften_uebersicht.html"

echo ^<html^>^<head^>^<meta charset='UTF-8'^> > %OUTPUT%
echo ^<title^>Interaktive Schriften-Übersicht (Windows)^</title^> >> %OUTPUT%
echo ^<style^> >> %OUTPUT%
echo     body { font-family: sans-serif; padding: 20px; background: #f0f2f5; color: #333; margin-bottom: 80px; } >> %OUTPUT%
echo     .header { position: sticky; top: 0; background: #ffffffcc; backdrop-filter: blur(10px); padding: 20px; border-bottom: 2px solid #007bff; z-index: 100; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } >> %OUTPUT%
echo     .controls { display: flex; gap: 20px; flex-wrap: wrap; } >> %OUTPUT%
echo     .control-group { display: flex; flex-direction: column; flex-grow: 1; } >> %OUTPUT%
echo     label { font-size: 0.8em; font-weight: bold; margin-bottom: 5px; color: #666; } >> %OUTPUT%
echo     input { padding: 12px; font-size: 1em; border: 1px solid #ccc; border-radius: 25px; padding-left: 20px; } >> %OUTPUT%
echo     .font-row { background: white; margin: 15px 0; padding: 20px; border-radius: 25px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } >> %OUTPUT%
echo     .font-name { color: #007bff; font-weight: bold; font-size: 0.85em; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 5px; } >> %OUTPUT%
echo     .preview { font-size: 1.8em; line-height: 1.3; overflow-wrap: break-word; color: #000; } >> %OUTPUT%
echo     .footer { position: fixed; bottom: 12px; left: 20px; right: 20px; background: #e0e0e0; color: #000; text-align: center; padding: 10px 0; font-size: 0.85em; z-index: 1000; border: 1px solid #ccc; border-radius: 25px; } >> %OUTPUT%
echo     @media print { .header { display: none; } .font-row { box-shadow: none; border: 1px solid #eee; page-break-inside: avoid; border-radius: 25px; } .footer { position: static; color: #000; background: #f9f9f9; border: 1px solid #ccc; margin-top: 20px; border-radius: 25px; } } >> %OUTPUT%
echo ^</style^>^<script^> >> %OUTPUT%
echo     function updateView() { >> %OUTPUT%
echo         let searchText = document.getElementById('search').value.toLowerCase(); >> %OUTPUT%
echo         let customText = document.getElementById('text-input').value; >> %OUTPUT%
echo         let rows = document.getElementsByClassName('font-row'); >> %OUTPUT%
echo         let previews = document.getElementsByClassName('preview'); >> %OUTPUT%
echo         for (let i = 0; i < rows.length; i++) { >> %OUTPUT%
echo             let name = rows[i].getAttribute('data-name').toLowerCase(); >> %OUTPUT%
echo             rows[i].style.display = name.includes(searchText) ? '' : 'none'; >> %OUTPUT%
echo             previews[i].innerText = customText.trim() !== "" ? customText : "Franz jagt im komplett verwahrlosten Taxi quer durch Bayern."; >> %OUTPUT%
echo         } >> %OUTPUT%
echo     } >> %OUTPUT%
echo ^</script^>^</head^>^<body^> >> %OUTPUT%
echo ^<div class='header'^>^<div class='controls'^> >> %OUTPUT%
echo ^<div class='control-group'^>^<label^>SCHRIFTART SUCHEN^</label^>^<input type='text' id='search' onkeyup='updateView()' placeholder='Suchen...'^>^</div^> >> %OUTPUT%
echo ^<div class='control-group'^>^<label^>EIGENER TEST-TEXT^</label^>^<input type='text' id='text-input' onkeyup='updateView()' placeholder='Tippe etwas...'^>^</div^> >> %OUTPUT%
echo ^</div^>^</div^>^<div id='container'^> >> %OUTPUT%

echo Lese Schriftarten aus... bitte warten...

powershell -NoProfile -Command "[System.Drawing.Text.InstalledFontCollection]$fonts = New-Object System.Drawing.Text.InstalledFontCollection; $fonts.Families | ForEach-Object { $name = $_.Name; $safe = $name -replace \"'\", \"\"; $safe = $safe -replace '\"', ''; echo \"<div class='font-row' data-name='$safe'><div class='font-name'>$name</div><div class='preview' style='font-family: \`\"$name\`\";'>Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.</div></div>\" }" >> %OUTPUT%

echo ^</div^>^<div class='footer'^>Mit KI erstellt^</div^>^</body^>^</html^> >> %OUTPUT%

echo Fertig! Oeffne %OUTPUT%...
start %OUTPUT%

Datei unter diesem Namen speichern:

windows-fonts.bat

Übersicht erstellen lassen

In dem Ordner stehen, in dem das Skript gespeichert ist und die Datei mit einem Doppelklick ausführen.

Die erstellte Datei kann dann normal im Browser geöffnet werden