Bagaimanakah JavaScript Boleh Mengesan Fon Tersedia untuk Pemilihan Fon Pengguna?

Mengesan Fon Disokong untuk Penyesuaian Pengguna

Soalan:

Cara menggunakan JavaScript untuk mendapatkan pelayar Senarai semua fon yang boleh dipaparkan untuk menyediakan fungsi pemilihan fon kepada pengguna?

Jawapan:

Pustaka pengesanan fon JavaScript Lalit Patel: http://www.lalit.org/lab/javascript-css-font-detect

Kod:

/**
 * Detector JavaScript code to identify available fonts in a browser.
 */
var Detector = function() {
    // Base fonts for comparison against candidate fonts
    var baseFonts = ['monospace', 'sans-serif', 'serif'];

    // Test string with characters of varying widths and heights
    var testString = "mmmmmmmmmmlli";

    // Test font size
    var testSize = '72px';

    // Append a SPAN element to the body for font width measurement
    var s = document.createElement("span");
    s.style.fontSize = testSize;
    s.innerHTML = testString;

    var defaultWidth = {}, defaultHeight = {};

    // Calculate default widths for base fonts
    for (var index in baseFonts) {
        s.style.fontFamily = baseFonts[index];
        document.body.appendChild(s);
        defaultWidth[baseFonts[index]] = s.offsetWidth;
        defaultHeight[baseFonts[index]] = s.offsetHeight;
        document.body.removeChild(s);
    }

    function detect(font) {
        var detected = false;

        // Compare candidate font's width and height against base fonts
        for (var index in baseFonts) {
            s.style.fontFamily = font + ',' + baseFonts[index]; // Fallback to base font
            document.body.appendChild(s);
            var matched = (s.offsetWidth != defaultWidth[baseFonts[index]] || s.offsetHeight != defaultHeight[baseFonts[index]]);
            document.body.removeChild(s);
            detected = detected || matched;
        }

        return detected;
    }

    this.detect = detect;
};

Cara ia Berfungsi:

Pustaka ini menganalisis perbezaan lebar dan ketinggian aksara antara fon berbeza Penampilan setiap aksara berbeza-beza fon, menghasilkan lebar dan ketinggian yang unik untuk rentetan ujian yang sama Dengan membandingkan fon calon dengan tiga fon asas, pustaka boleh menentukan sama ada fon calon tersedia dalam penyemak imbas.

Atas ialah kandungan terperinci Bagaimanakah JavaScript Boleh Mengesan Fon Tersedia untuk Pemilihan Fon Pengguna?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!