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

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;
    };
};

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!