Rumah > hujung hadapan web > tutorial css > Bolehkah JavaScript Mengesan Semua Fon yang Boleh Dipaparkan oleh Pelayar Pengguna?

Bolehkah JavaScript Mengesan Semua Fon yang Boleh Dipaparkan oleh Pelayar Pengguna?

DDD
Lepaskan: 2024-11-30 21:46:13
asal
368 orang telah melayarinya

Can JavaScript Detect All Fonts a User's Browser Can Display?

Senaraikan Setiap Fon Yang Boleh Dipaparkan oleh Penyemak Imbas Pengguna

Bolehkah JavaScript Mendapatkan Fon Boleh Dipaparkan Penyemak Imbas?

Ya, adalah mungkin untuk mendapatkan senarai semua fon yang disokong oleh penyemak imbas pengguna menggunakan JavaScript. Ini membolehkan penciptaan lungsur turun yang mengandungi fon yang tersedia untuk pemilihan pengguna.

Pelaksanaan Pengesanan Fon

Rujuk http://www.lalit.org/lab/javascript -css-font-detect untuk penyelesaian JavaScript yang cekap:

Kod Coretan:

var Detector = function() {
    // baseFonts
    var baseFonts = ['monospace', 'sans-serif', 'serif'];

    // testString
    var testString = "mmmmmmmmmmlli";

    // testSize
    var testSize = '72px';

    // helper functions
    var h = document.getElementsByTagName("body")[0];
    var s = document.createElement("span");
    s.style.fontSize = testSize;
    s.innerHTML = testString;

    // default measurements
    var defaultWidth = {};
    var defaultHeight = {};
    for (var index in baseFonts) {
        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);
    }

    this.detect = function(font) {
        var detected = false;
        for (var index in baseFonts) {
            s.style.fontFamily = font + ',' + baseFonts[index];
            h.appendChild(s);
            var matched = (s.offsetWidth != defaultWidth[baseFonts[index]] || s.offsetHeight != defaultHeight[baseFonts[index]]);
            h.removeChild(s);
            detected = detected || matched;
        }
        return detected;
    };
};
Salin selepas log masuk

Prinsip Kerja

Kod ini mengeksploitasi penampilan unik aksara merentas fon yang berbeza. Dengan membandingkan lebar dan tinggi teks yang diberikan dalam fon tertentu dengan yang diberikan dalam fon asas, ia menentukan sama ada fon sasaran disokong.

Atas ialah kandungan terperinci Bolehkah JavaScript Mengesan Semua Fon yang Boleh Dipaparkan oleh Pelayar Pengguna?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan