Bagaimana mendeteksi font mana yang digunakan pada halaman web?


Teknik yang berhasil adalah melihat gaya elemen yang dikomputasi. Ini didukung di Opera dan Firefox (dan saya rekam di safari, tetapi belum diuji). IE (setidaknya 7), menyediakan metode untuk mendapatkan gaya, tetapi tampaknya apa pun yang ada di stylesheet, bukan gaya yang dihitung. Lebih detail tentang quirksmode: Dapatkan Gaya
Berikut adalah fungsi sederhana untuk mengambil font yang digunakan dalam suatu elemen:
/**
* Get the font used for a given element
* @argument {HTMLElement} the element to check font for
* @returns {string} The name of the used font or null if font could not be detected
*/
function getFontForElement(ele) {
    if (ele.currentStyle) { // sort of, but not really, works in IE
        return ele.currentStyle["fontFamily"];
    } else if (document.defaultView) { // works in Opera and FF
        return document.defaultView.getComputedStyle(ele,null).getPropertyValue("font-family");
    } else {
        return null;
    }
}
Jika aturan CSS untuk ini adalah:
#fonttester {
     font-family: sans-serif, arial, helvetica;
}
Maka itu harus mengembalikan helvetica jika itu diinstal, jika tidak, arial, dan terakhir, nama sistem default font sans-serif. Perhatikan bahwa urutan font dalam deklarasi CSS Anda sangat penting.
Peretasan menarik yang juga bisa Anda coba adalah membuat banyak elemen tersembunyi dengan banyak font berbeda untuk mencoba mendeteksi font mana yang diinstal pada mesin. Saya yakin seseorang dapat membuat halaman pengumpulan statistik font yang bagus dengan teknik ini.

Related Posts

There is no other posts in this category.
Subscribe Our Newsletter