Debian - Ü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. Verwendet habe ich Debian 13 Trixie.

Ergebnis

Schriftartenübersicht

Durchführung

In einem Chat mit der KI habe ich ein Skript erstellt bekommen. Das Skript wurde dann ausführbar gemacht. Ergebnis ist eine HTML-Datei, die in dem Ordner erstellt wird, in dem das Skript sich befindet.

Inhalt der Datei

#!/bin/bash

OUTPUT="schriften_uebersicht.html"

echo "<html><head><meta charset='UTF-8'>
<title>Interaktive Schriften-Übersicht</title>
<style>
    body { font-family: sans-serif; padding: 20px; background: #f0f2f5; color: #333; margin-bottom: 80px; }
    .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); }
    .controls { display: flex; gap: 20px; flex-wrap: wrap; }
    .control-group { display: flex; flex-direction: column; flex-grow: 1; }
    label { font-size: 0.8em; font-weight: bold; margin-bottom: 5px; color: #666; }
    input { padding: 12px; font-size: 1em; border: 1px solid #ccc; border-radius: 25px; padding-left: 20px; }
    
    .font-row { background: white; margin: 15px 0; padding: 20px; border-radius: 25px; 
                box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
    .font-name { color: #007bff; font-weight: bold; font-size: 0.85em; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 5px; }
    .preview { font-size: 1.8em; line-height: 1.3; overflow-wrap: break-word; color: #000; }
    
    /* Fußzeile mit gleichen Rändern wie die Karten */
    .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; }
    
    @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; }
    }
</style>
<script>
    function updateView() {
        let searchText = document.getElementById('search').value.toLowerCase();
        let customText = document.getElementById('text-input').value;
        let rows = document.getElementsByClassName('font-row');
        let previews = document.getElementsByClassName('preview');

        for (let i = 0; i < rows.length; i++) {
            let name = rows[i].getAttribute('data-name').toLowerCase();
            rows[i].style.display = name.includes(searchText) ? '' : 'none';
            if(customText.trim() !== \"\") {
                previews[i].innerText = customText;
            } else {
                previews[i].innerText = \"Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.\";
            }
        }
    }
</script>
</head><body>
<div class='header'>
    <div class='controls'>
        <div class='control-group'>
            <label>SCHRIFTART SUCHEN</label>
            <input type='text' id='search' onkeyup='updateView()' placeholder='z.B. Roboto, DejaVu...'>
        </div>
        <div class='control-group'>
            <label>EIGENER TEST-TEXT</label>
            <input type='text' id='text-input' onkeyup='updateView()' placeholder='Tippe etwas für die Vorschau...'>
        </div>
    </div>
</div>
<div id='container'>" > $OUTPUT

fc-list : family | cut -d, -f1 | sort -u | while read -r font; do
    safe_name=$(echo "$font" | sed "s/'//g; s/\"//g")
    echo "<div class='font-row' data-name='$safe_name'>
            <div class='font-name'>$font</div>
            <div class='preview' style='font-family: \"$font\";'>Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.</div>
          </div>" >> $OUTPUT
done

echo "</div>
<div class='footer'>Mit KI erstellt</div>
</body></html>" >> $OUTPUT

echo "Übersicht ist erstellt."

Datei unter diesem Namen speichern:

fonts.sh

Datei ausführbar sein lassen

chmod +x fonts.sh

Übersicht erstellen lassen

In dem Ordner stehen, in dem das Skript gespeichert ist und in der Konsole dies eingeben:

./fonts.sh

Die Datei

schriften_uebersicht.html

kann dann normal im Browser geöffnet werden