Bagaimana cara mendeteksi font mana yang digunakan di halaman web?

Misalkan saya memiliki aturan CSS berikut di halaman saya:

body {
    font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;
}

Bagaimana cara mendeteksi font yang ditentukan yang digunakan di browser pengguna?

Bagi orang-orang yang bertanya-tanya mengapa saya ingin melakukan ini karena font yang saya deteksi berisi mesin terbang yang tidak tersedia di font lain. Jika pengguna tidak memiliki font, maka saya ingin menampilkan link yang meminta pengguna untuk mendownload font tersebut (sehingga mereka dapat menggunakan aplikasi web saya dengan font yang benar).

Saat ini, saya menampilkan tautan unduhan font untuk semua pengguna. Saya ingin menampilkan ini hanya untuk orang yang tidak memasang font yang benar.

Saya telah melihatnya dilakukan dengan cara yang rapuh, tetapi cukup dapat diandalkan. Pada dasarnya, elemen diatur untuk menggunakan font tertentu dan string diatur ke elemen itu. Jika set font untuk elemen tidak ada, dibutuhkan font dari elemen induk. Jadi, yang mereka lakukan adalah mengukur lebar string yang diberikan. Jika cocok dengan apa yang mereka harapkan untuk font yang diinginkan sebagai lawan dari font turunan, itu ada. Ini tidak akan berfungsi untuk font monospace.

Dari sinilah asalnya: Javascript / CSS Font Detector (ajaxian.com; 12 Mar 2007)

Saya menulis alat JavaScript sederhana yang dapat Anda gunakan untuk memeriksa apakah font sudah diinstal atau tidak.
Ini menggunakan teknik sederhana dan harus benar di sebagian besar waktu.

jFont Checker di github

@pat Sebenarnya Safari tidak memberikan font yang digunakan, Safari selalu mengembalikan font pertama dalam tumpukan terlepas dari apakah itu diinstal, setidaknya menurut pengalaman saya.

font-family: "my fake font", helvetica, san-serif;

Dengan asumsi Helvetica adalah yang diinstal / digunakan, Anda akan mendapatkan:

• "font palsu saya" di Safari (dan saya percaya browser webkit lain).
• "font palsu saya, helvetica, san-serif" di browser Gecko dan IE.
• "helvetica" di Opera 9, meskipun saya membaca bahwa mereka mengubah ini di Opera 10 agar sesuai dengan Gecko.

Saya mengatasi masalah ini dan membuat Font Unstack , yang menguji setiap font dalam tumpukan dan hanya mengembalikan yang pertama diinstal. Ini menggunakan trik yang disebutkan @MojoFilter, tetapi hanya mengembalikan yang pertama jika beberapa diinstal. Meskipun ia mengalami kelemahan yang disebutkan @tlrobinson (Windows akan menggantikan Arial untuk Helvetica secara diam-diam dan melaporkan bahwa Helvetica telah diinstal), ia berfungsi dengan baik.

Teknik yang berhasil adalah dengan melihat gaya elemen yang dihitung. Ini didukung di Opera dan Firefox (dan saya rekam di safari, tetapi belum diuji). IE (setidaknya 7), menyediakan metode untuk mendapatkan gaya, tetapi tampaknya metode apa pun yang ada di lembar gaya, bukan gaya yang dihitung. Detail selengkapnya tentang quirksmode: Dapatkan Gaya

Berikut fungsi sederhana untuk mengambil font yang digunakan dalam sebuah 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 font sans-serif default sistem. Perhatikan bahwa urutan font dalam deklarasi CSS Anda adalah signifikan.

Peretasan menarik yang juga dapat 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.

Bentuk yang disederhanakan adalah:

function getFont() {
    return document.getElementById('header').style.font;
}

Jika Anda membutuhkan sesuatu yang lebih lengkap, lihat ini .

Ada solusi sederhana - cukup gunakan element.style.font:

function getUserBrowsersFont() {
    var browserHeader = document.getElementById('header');
    return browserHeader.style.font;
}

Fungsi ini akan melakukan apa yang Anda inginkan. Saat dieksekusi Ini akan mengembalikan jenis font dari pengguna / browser. Semoga ini bisa membantu.

Solusi lain adalah menginstal font secara otomatis @font-faceyang mungkin meniadakan kebutuhan untuk deteksi.

@font-face {
  font-family: "Calibri";
  src: url("http://www.yourwebsite.com/fonts/Calibri.eot");
  src: local("Calibri"), url("http://www.yourwebsite.com/fonts/Calibri.ttf") format("truetype");
}

Tentu saja itu tidak akan menyelesaikan masalah hak cipta apa pun, namun Anda selalu dapat menggunakan font freeware atau bahkan membuat font Anda sendiri. Anda akan membutuhkan .eot& .ttffile untuk bekerja paling baik.

Calibri adalah fonta milik Microsoft, dan tidak boleh didistribusikan secara gratis. Selain itu, mengharuskan pengguna untuk mengunduh font tertentu tidak terlalu ramah pengguna.

Saya akan menyarankan membeli lisensi untuk font tersebut dan menyematkannya ke dalam aplikasi Anda.

Saya menggunakan Fount. Anda hanya perlu menyeret tombol Fount ke bilah bookmark Anda, klik di atasnya, lalu klik teks tertentu di situs web. Ini kemudian akan menampilkan font dari teks itu.

https://fount.artequalswork.com/

Anda dapat menggunakan situs web ini:

http://website-font-analyzer.com/

Itu persis seperti yang Anda inginkan ...

Anda dapat meletakkan Adobe Blank di font-family setelah font yang ingin Anda lihat, dan mesin terbang apa pun yang tidak ada di font itu tidak akan ditampilkan.

misalnya:

font-family: Arial, 'Adobe Blank';

Sejauh yang saya ketahui, tidak ada metode JS untuk membedakan mesin terbang mana dalam sebuah elemen yang dirender oleh font mana dalam tumpukan font untuk elemen itu.

Ini diperumit oleh fakta bahwa browser memiliki pengaturan pengguna untuk font serif / sans-serif / monospace dan mereka juga memiliki font cadangan hard-code sendiri yang akan mereka gunakan jika mesin terbang tidak ditemukan di salah satu font di a tumpukan font. Jadi browser dapat merender beberapa mesin terbang dalam font yang tidak ada dalam tumpukan font atau pengaturan font browser pengguna. Alat Pengembang Chrome akan menunjukkan kepada Anda setiap font yang dirender untuk mesin terbang di elemen yang dipilih . Jadi di komputer Anda, Anda dapat melihat apa yang dilakukannya, tetapi tidak ada cara untuk mengetahui apa yang terjadi di komputer pengguna.

Mungkin juga sistem pengguna dapat berperan dalam hal ini seperti misalnya Window melakukan Substitusi Font pada level mesin terbang.

begitu...

Untuk mesin terbang yang Anda minati, Anda tidak memiliki cara untuk mengetahui apakah mereka akan dirender oleh browser / sistem fallback pengguna, bahkan jika mereka tidak memiliki font yang Anda tentukan.

Jika Anda ingin mengujinya di JS, Anda dapat membuat mesin terbang individu dengan font-family termasuk Adobe Blank dan mengukur lebarnya untuk melihat apakah itu nol, TAPI Anda harus mengulang secara menyeluruh setiap mesin terbang dan setiap font yang ingin Anda uji , tetapi meskipun Anda dapat mengetahui fonta dalam tumpukan font elemen, tidak ada cara untuk mengetahui font apa yang dikonfigurasi browser pengguna untuk digunakan, jadi untuk setidaknya beberapa pengguna, daftar font yang Anda iterasi tidak akan lengkap. (Ini juga bukan bukti masa depan jika font baru keluar dan mulai digunakan.)