Bagaimanakah Saya Boleh Menyenaraikan Fon Tersedia Secara Program dalam Pelayar Web Menggunakan JavaScript?

Senarai Fon Tersedia dalam Pelayar Web Menggunakan JavaScript

Dalam aplikasi web, menawarkan pengguna dropdown fon tersedia meningkatkan pengalaman pengguna dengan membenarkan mereka menyesuaikan penampilan teks. Penyesuaian ini memerlukan mendapatkan senarai fon yang boleh dipaparkan oleh penyemak imbas.

Nasib baik, terdapat penyelesaian intuitif untuk masalah ini. JavaScript menyediakan cara mudah untuk menyenaraikan semua fon yang boleh diakses oleh penyemak imbas. Ini adalah langkah penting dalam membolehkan pengguna memilih fon pilihan mereka dan menyesuaikan halaman web mengikut keinginan mereka.

Penyelesaian

Pemaju JavaScript yang berbakat telah mencipta penyelesaian komprehensif yang membolehkan pembangun mengesan tersedia fon dalam pelayar. Kaedah ini menggunakan teknik membandingkan lebar dan ketinggian yang diberikan bagi aksara tertentu. Dengan menyemak silang sisihan daripada fon lalai, skrip menentukan dengan tepat ketersediaan fon tertentu yang ditentukan pengguna.

Kod untuk penyelesaian ini tersedia di GitHub.

Pelaksanaan

/**
 * JavaScript code to detect available availability of a
 * particular font in a browser using JavaScript and CSS.
 *
 * Author : Lalit Patel
 * Website: http://www.lalit.org/lab/javascript-css-font-detect/
 * License: Apache Software License 2.0
 *          http://www.apache.org/licenses/LICENSE-2.0
 * Version: 0.15 (21 Sep 2009)
 *          Changed comparision font to default from sans-default-default,
 *          as in FF3.0 font of child element didn't fallback
 *          to parent element if the font is missing.
 * Version: 0.2 (04 Mar 2012)
 *          Comparing font against all the 3 generic font families ie,
 *          'monospace', 'sans-serif' and 'sans'. If it doesn't match all 3
 *          then that font is 100% not available in the system
 * Version: 0.3 (24 Mar 2012)
 *          Replaced sans with serif in the list of baseFonts
 */

/**
 * Usage: d = new Detector();
 *        d.detect('font name');
 */
var Detector = function() {
    // a font will be compared against all the three default fonts.
    // and if it doesn't match all 3 then that font is not available.
    var baseFonts = ['monospace', 'sans-serif', 'serif'];

    //we use m or w because these two characters take up the maximum width.
    // And we use a LLi so that the same matching fonts can get separated
    var testString = "mmmmmmmmmmlli";

    //we test using 72px font size, we may use any size. I guess larger the better.
    var testSize = '72px';

    var h = document.getElementsByTagName("body")[0];

    // create a SPAN in the document to get the width of the text we use to test
    var s = document.createElement("span");
    s.style.fontSize = testSize;
    s.innerHTML = testString;
    var defaultWidth = {};
    var defaultHeight = {};
    for (var index in baseFonts) {
        //get the default width for the three base fonts
        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);
    }

    function detect(font) {
        var detected = false;
        for (var index in baseFonts) {
            s.style.fontFamily = font + ',' + baseFonts[index]; // name of the font along with the base font for fallback.
            h.appendChild(s);
            var matched = (s.offsetWidth != defaultWidth[baseFonts[index]] || s.offsetHeight != defaultHeight[baseFonts[index]]);
            h.removeChild(s);
            detected = detected || matched;
        }
        return detected;
    }

    this.detect = detect;
};

Dengan menggunakan kaedah ini, pembangun boleh mencipta antara muka pengguna dengan mudah yang membenarkan penyesuaian fon yang lancar. Menyediakan pengguna dengan keupayaan untuk memilih fon pilihan mereka daripada senarai yang komprehensif meningkatkan keseluruhan pengalaman pengguna dan kepuasan dengan aplikasi web.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyenaraikan Fon Tersedia Secara Program dalam Pelayar Web Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!