Wie kann ich im Browser verfügbare Schriftarten programmgesteuert in JavaScript auflisten?

Verfügbare Schriftarten für Benutzerauswahl im Browser auflisten

Problem:

Bei der Webentwicklung kann es vorkommen, dass dies erforderlich ist Bieten Sie Benutzern eine Dropdown-Liste mit Schriftarten an, die ihr Browser anzeigen kann. Wie können Sie diese Liste programmgesteuert in JavaScript abrufen, ohne auf fest codierte oder vom Server abgerufene Daten angewiesen zu sein?

Lösung:

Schriftarten mit JavaScript erkennen

Glücklicherweise bietet JavaScript eine Möglichkeit, die auf dem System eines Benutzers verfügbaren Schriftarten zu erkennen. Das folgende Snippet kann implementiert werden:

var detector = new Detector();

// Function to detect if a font is available
function detectFont(font) {
  return detector.detect(font);
}

// Get the list of detected fonts
var availableFonts = [];
for (var font in detector.detectFonts()) {
  if (detectFont(font)) {
    availableFonts.push(font);
  }
}

console.log(availableFonts);

Dadurch wird ein Array aller Schriftarten protokolliert, die der Browser anzeigen kann.

Code-Erklärung

Die Detector-Klasse verwendet eine Technik namens „Font-Fingerprinting“, um eine bestimmte Schriftart mit einer Reihe von Basisschriftarten zu vergleichen und festzustellen, ob sie verfügbar ist. Dies wird erreicht, indem die Breite und Höhe des in der Schriftart wiedergegebenen Textes gemessen und mit den Maßen des in den Basisschriftarten wiedergegebenen Textes verglichen werden. Wenn sich die Messungen unterscheiden, weist dies auf das Vorhandensein der spezifischen Schriftart hin.

Zusätzliche Informationen

Die Schriftarterkennungsmethode kann durch zusätzliche Ansätze, wie z. B. die Prüfung auf, weiter verbessert werden Schriftartdateien im System oder die Verwendung von Flash oder Canvas zum Rendern von Text. Allerdings sind diese Methoden nicht so zuverlässig wie die native Schriftarterkennung von JavaScript.

Das obige ist der detaillierte Inhalt vonWie kann ich im Browser verfügbare Schriftarten programmgesteuert in JavaScript auflisten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!