Bagaimana cara mendeteksi font mana yang digunakan di halaman web?

139

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.

javascript  html  css  fonts 
— Menepuk
sumber
2
Satu hal yang perlu diingat adalah bahwa beberapa browser akan mengganti font tertentu yang hilang dengan font yang serupa, yang tidak mungkin dideteksi menggunakan trik JavaScript / CSS. Misalnya, browser Windows akan menggantikan Arial untuk Helvetica jika belum diinstal. Trik yang disebutkan MojoFilter dan dragonmatank akan tetap melaporkan bahwa Helvetica telah diinstal, meskipun sebenarnya tidak.
— tlrobinson
13
Catatan kecil untuk berhati-hati: Jika Anda menawarkan tautan untuk mengunduh Calibri, ketahuilah bahwa meskipun itu dibundel dalam beberapa produk Microsoft, itu bukan font gratis, dan Anda melanggar hak cipta dengan menawarkannya untuk diunduh.
— Adam Hepton

Jawaban:

74

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)

— MojoFilter
sumber
2
Pendekatan lain yang digunakan measureTextdari canvaselemen: github.com/Wildhoney/DetectFont
— Wildhoney
33

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

— Derek 朕 會 功夫
sumber
2
Deteksi font tidak menyelesaikan masalah. Anda dapat menggunakannya untuk mengulangi pemikiran font yang dideklarasikan dan memeriksa apa yang valid, tetapi ini memberikan sedikit atau tidak ada informasi tentang font apa yang digunakan untuk div tertentu. Jika Anda membuat div dari JS, bagaimana kita bisa tahu font apa yang digunakan?
— Jon Lennart Aasenden
1
@JonLennartAasenden Untuk mendapatkan font bekas, saya yakin Anda dapat menggunakan properti "computedStyle" (Saya lupa nama persisnya, tapi memang seperti itu.)
— Derek 朕 會 功夫
1
Saya menulis kelas yang berfungsi di semua browser. Ini ditulis dalam Smart Pascal yang dikompilasi ke JS, jadi saya tidak bisa benar-benar memposting solusi di sini - tetapi singkatnya, saya harus mengekstrak string font-family, lalu memeriksa apakah setiap font valid, ambil yang pertama yang valid - dan itu bekerja dimana saja. Saya memindahkan "detektor font" ke smart pascal dan melakukan beberapa penyesuaian.
— Jon Lennart Aasenden
1
@JonLennartAasenden Sepertinya kelas Anda tidak dapat diandalkan. Browser akan memeriksa setiap font dalam prioritas yang diberikan, jika diinstal, tetapi terkadang memilih untuk menggunakan font dengan prioritas lebih rendah dalam daftar, jika prioritas yang lebih tinggi, font yang diinstal memiliki karakter yang hilang atau mesin terbang yang tidak sesuai dengan ukuran yang diminta.
— Brandon Elliott
10

@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.

— philoye
sumber
9

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.

— runeh
sumber
6
Ini mengembalikan string lengkap css seperti "Helvetica, Arial, sans-serif". Itu tidak mengembalikan font sebenarnya yang sedang digunakan.
— Tom Kincaid
8

Bentuk yang disederhanakan adalah:

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

Jika Anda membutuhkan sesuatu yang lebih lengkap, lihat ini .

— Facebiz
sumber
8

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.

— Naeem Ul Wahhab
sumber
Saya mencoba ini di Safari pada elemen yang pasti memiliki font Arial dan saya mendapatkan "" sebagai font. Ada ide untuk menjelaskan mengapa?
— Alessandro Vermeulen
Alasan yang paling mungkin adalah bahwa ini hanya memeriksa satu set font, dan jika tidak ada set font, itu mungkin menggunakan Arial sebagai font.
— Yosia
1
@AlessandroVermeulen itu karena element.style hanya mengembalikan nilai yang ditetapkan dalam atribut gaya, dan tidak akan mengembalikan nilai apa pun dari tempat lain (yaitu nilai dari elemen gaya, css eksternal atau default agen pengguna tidak akan dikembalikan). Jawaban ini harus dihapus karena menyesatkan / tidak benar. Sulit dipercaya bahwa itu mendapat hadiah!
— brennanyoung
Maaf, tapi menurut saya ini bukan jawaban yang benar. Meskipun ini mencetak nilai untuk properti CSS itu, ini tidak mengembalikan font yang dirender sebenarnya yang sedang digunakan oleh browser.
— Wewjun
7

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.

— PaulnOZ
sumber
3

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.

— Mark Kimitch
sumber
3
1 untuk penyematan font. Ini menyelesaikan masalah tanpa harus mendeteksi apa pun.
— Andrew Grothe
1
Saya sarankan untuk memeriksa Google Fonts untuk sesuatu yang serupa sebelum membeli apa pun.
— OJFord
Kecuali, jika pengguna menggunakan mesin windows, mereka dapat melihat Calibri. Ini adalah inti dari daftar fallback.
— dudewad
1
Dan jawaban Anda tidak terkait dengan pertanyaan tersebut, dan harus berupa komentar.
— dudewad
2

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/

— Woppi
sumber
1

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.)

— Sam Hasler
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.