JavaScript untuk Mendeteksi Font yang Terinstal di Komputer

Tabel Konten
  1. Penggunaan 

JavaScript ini digunakan untuk memberitahu para pengguna bahwa font dengan nama tertentu tidak terpasang/terinstal di komputer:

/**
 * JavaScript code to detect available availability of a
 * particular font in a browser using JavaScript and CSS.
 *
 * Author : Lalit Patel
 * Website: http://www.lalit.org/lab/javascript-css-font-detect/
 * License: Apache Software License 2.0
 *          http://www.apache.org/licenses/LICENSE-2.0
 * Version: 0.15 (21 Sep 2009)
 *          Changed comparision font to default from sans-default-default,
 *          as in FF3.0 font of child element didn't fallback
 *          to parent element if the font is missing.
 * Version: 0.2 (04 Mar 2012)
 *          Comparing font against all the 3 generic font families ie,
 *          'monospace', 'sans-serif' and 'sans'. If it doesn't match all 3
 *          then that font is 100% not available in the system
 * Version: 0.3 (24 Mar 2012)
 *          Replaced sans with serif in the list of baseFonts
 */

/**
 * Usage: d = new Detector();
 *        d.detect('font name');
 */
var Detector = function() {
    // a font will be compared against all the three default fonts.
    // and if it doesn't match all 3 then that font is not available.
    var baseFonts = ['monospace', 'sans-serif', 'serif'];

    //we use m or w because these two characters take up the maximum width.
    // And we use a LLi so that the same matching fonts can get separated
    var testString = "mmmmmmmmmmlli";

    //we test using 72px font size, we may use any size. I guess larger the better.
    var testSize = '72px';

    var h = document.getElementsByTagName("body")[0];

    // create a SPAN in the document to get the width of the text we use to test
    var s = document.createElement("span");
    s.style.fontSize = testSize;
    s.innerHTML = testString;
    var defaultWidth = {};
    var defaultHeight = {};
    for (var index in baseFonts) {
        //get the default width for the three base fonts
        s.style.fontFamily = baseFonts[index];
        h.appendChild(s);
        defaultWidth[baseFonts[index]] = s.offsetWidth; //width for the default font
        defaultHeight[baseFonts[index]] = s.offsetHeight; //height for the defualt font
        h.removeChild(s);
    }

    function detect(font) {
        var detected = false;
        for (var index in baseFonts) {
            s.style.fontFamily = font + ',' + baseFonts[index]; // name of the font along with the base font for fallback.
            h.appendChild(s);
            var matched = (s.offsetWidth != defaultWidth[baseFonts[index]] || s.offsetHeight != defaultHeight[baseFonts[index]]);
            h.removeChild(s);
            detected = detected || matched;
        }
        return detected;
    }

    this.detect = detect;
};

Penggunaan 

Kode eksekusi harus dinyatakan dalam keadaan DOM Content Loaded, atau letakkan saja di area <body>:

var d = new Detector();
// Jika font dengan nama `Lucida Grande` tidak ada di komputer, tampilkan pesan peringatan
if (!d.detect('Lucida Grande')) {
    alert('Lucida Grande is not installed!');
}

Sumber: JavaScript/CSS Font Detector

8 Komentar

  • Beben Koben

    gimana makenya :p

    • Taufik Nurrohman

      http://jsbin.com/upirih/1
      ^:D Halaman demo di atas, kalau dibuka memakai Windows akan memunculkan peringatan bahwa font Lucida Grande tidak terpasang. Tapi kalau membukanya menggunakan Mac tidak akan memunculkan peringatan (Lucida Grande itu font bawaan Mac).
      Coba ganti dengan Times New Roman atau Arial supaya peringatan tidak muncul.

  • Anonim

    nice trik mas boss

  • Unknown

    tapi apa bisa, kalo dibuka di kompi orang fontnya juga bakal kedeteksi ?

    • Taufik Nurrohman

      JavaScript ini digunakan untuk memberitahu font yang tidak terpasang saja, bukan untuk mencari tahu font yang ada di komputer orang lain yang sedang membuka halaman demo.

  • EM

    punya referensi download font gratis gak mas?
    :-)

  • Anonim

    Wah kalau sudah pasang js nya, nanti font-font komputer terdeteksi otomatis ya! :-bd

Komentar telah ditutup.