Wie kann ich die auf einer Webseite verwendete aktive Schriftart erkennen?

Erkennen der aktiven Schriftart auf einer Webseite

Beim Entwerfen von Webseiten mit verschiedenen Schriftarten ist es wichtig sicherzustellen, dass die gewünschte Schriftart vorhanden ist im Browser des Benutzers gerendert. Dies kann eine Herausforderung darstellen, wenn im CSS mehrere Schriftarten definiert sind.

Ein Ansatz zur Behebung dieses Problems besteht darin, festzustellen, welche der angegebenen Schriftarten tatsächlich verwendet wird. Durch Identifizieren der aktiven Schriftart können Sie entsprechende Maßnahmen ergreifen, z. B. das Anzeigen eines Download-Links für Schriftarten, die nicht auf dem System des Benutzers installiert sind.

Technik zur Schriftartenerkennung

Eine gängige Technik zur Schriftartenerkennung besteht darin, die Breite des gerenderten Texts mit einer bestimmten Schriftart zu messen. Wenn die gemessene Breite mit der erwarteten Breite für die gewünschte Schriftart übereinstimmt, weist dies darauf hin, dass die Zielschriftart auf dem Gerät des Benutzers vorhanden ist. Diese Methode ist jedoch für monospaced Schriftarten weniger zuverlässig.

Beispielimplementierung

Der folgende Codeausschnitt veranschaulicht, wie diese Technik implementiert werden kann:

<div>
<pre class="brush:php;toolbar:false">// Get the element's width with the desired font
var desiredWidth = document.getElementById("font-detector").offsetWidth;

// Set the element to use a fallback font
document.getElementById("font-detector").style.fontFamily = "monospace";

// Measure the width again using the fallback font
var fallbackWidth = document.getElementById("font-detector").offsetWidth;

// Check if the desired font is installed
if (desiredWidth === fallbackWidth) {
  // The desired font is not installed
} else {
  // The desired font is installed
}

Vorteile und Einschränkungen

Diese Technik zur Schriftartenerkennung ist relativ einfach zu implementieren und kann verwendet werden, um das Verhalten der Seite basierend auf der Verfügbarkeit bestimmter Schriftarten dynamisch anzupassen. Es ist jedoch möglicherweise nicht narrensicher und kann durch Faktoren wie Browsereinstellungen oder vom Benutzer installierte Erweiterungen beeinflusst werden, die die Schriftwiedergabe ändern.