GROLBA WEBENTWICKLUNG

Hat der Benutzer Schriftart XY installiert?

Bei meinem aktuellen WordPress-Projekt wurde ich mit der Aufgabe konfrontiert, zu prüfen ob der Webseiten-Besucher die gewünschte Schriftart, in meinem Fall Rockwell, installiert hat. Mein Lösungsansatz ist eine Javascript Funktion, die die Breite jedes Buchstaben und jeder Zahl berechnet und daraus eine Prüfsumme generiert.

Der Besucher meiner Webseite generiert ebenfalls eine Prüfsumme, die dann mit der Original-Prüfsumme verglichen wird. Ich kann leider keine Garantie geben, dass mein Lösungsansatz mit jeder Schriftart funktioniert.

Prüfsumme erstellen

Auf einem Rechner, wo die Schriftart Rockwell installiert ist, lasse ich mir die Prüfsumme generieren:
var checksum = Grolba.Font.getChecksum('Rockwell');
Die Funktion erstellt <span> Elemente mit jeweils einer Zahl oder einem Buchstaben. Danach wird die Breite des Elements ausgelesen und in die Prüfsumme geschrieben. Das Format sieht wie folgt aus:
Schriftgröße:Zeichen:Breite;Schriftgröße:Zeichen:Breite...
500:a:265;500:b:323;500:c:260;500:d:313;500:e:287...

Abfrage einfügen

Nun kann ich anhand der Prüfsumme und dem Namen der Schriftart ermitteln ob der Besucher die Schrift installiert hat oder nicht.
var checksum = '500:a:265;500:b:323;500:c:260;500:d:313;500:e:287...';
if(Grolba.Font.hasFont('Rockwell', checksum)) {
    // der Benutzer hat Rockwell installiert
} else {
    // der Benutzer hat Rockwell nicht installiert
}

Beispiel: Rockwell

Quellcode

In dieser Version nutze ich jQuery 1.4.2
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
var Grolba = Grolba || {};
Grolba.Font = {
    fonts: {},
    hasFont: function(fontFamily, checksum) {
        if(typeof checksum !== "undefined") {
            return (this.getChecksum(fontFamily) === checksum);
        }
        if(typeof this.fonts[fontFamily] !== "undefined") {
            return (this.getChecksum(fontFamily) === this.fonts[fontFamily]);
        }
        alert('No checksum found');
    },
    getChecksum: function(fontFamily) {
        var strCache = '';
        var intSize = 500;
        var strChars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
        for(var i = 0; i < strChars.length; i++) {
            var temp = $('<span>' + strChars[i] + '</span>').css({
                padding: 0,
                fontSize: intSize + 'px',
                fontFamily: fontFamily
            }).appendTo($('body'));
            strCache += intSize + ':' + strChars[i] + ':' + temp.width() + ';';
            temp.remove();
        }
        return strCache;
    }
}

Lizenz

Creative Commons: Namensnennung-Weitergabe unter gleichen Bedingungen

Wie geht es weiter?

Ich wäre sehr dankbar wenn Ihr mir eure Erfahrungen mitteilt. Ihr könnt die Kommentar-Funktion nutzen, mir eine E-Mail schreiben oder mich über Twitter kontaktieren. Gerne lese ich auch Verbesserungsvorschläge oder Änderungswünsche