Bagaimana untuk Menghitung Fon yang Tersedia untuk Enjin Rendering Pelayar Web menggunakan JavaScript?

Menghitung Fon Tersedia untuk Enjin Rendering Penyemak Imbas Web

Dalam pembangunan web, selalunya wajar untuk memberikan pengguna pengalaman menyemak imbas yang boleh disesuaikan. Ini termasuk membenarkan mereka memilih fon pilihan mereka daripada senarai fon yang boleh diberikan oleh penyemak imbas. Untuk memudahkan perkara ini, adalah perlu untuk mempunyai cara untuk mendapatkan senarai semua fon yang tersedia secara pemrograman.

Satu pendekatan untuk menyelesaikan masalah ini ialah mengekod keras senarai fon atau mendapatkannya daripada pelayan. Walau bagaimanapun, pendekatan ini boleh menyusahkan dan mungkin tidak memenuhi situasi di mana penyemak imbas mempunyai fon tambahan yang dipasang oleh pengguna.

Nasib baik, terdapat penyelesaian yang lebih elegan dan dinamik menggunakan JavaScript. Coretan berikut menggunakan teknik yang dikenali sebagai pengesanan fon:

<code class="js">/**
 * 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 = &quot;mmmmmmmmmmlli&quot;;

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

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

    // create a SPAN in the document to get the width of the text we use to test
    var s = document.createElement(&quot;span&quot;);
    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;
};</code>

Kod ini mencipta objek 'Pengesan' dengan kaedah 'pengesan'. Kaedah 'mengesan' mengambil nama fon sebagai hujah dan mengembalikan boolean yang menunjukkan sama ada fon itu tersedia untuk dipaparkan oleh penyemak imbas.

Kod berfungsi dengan mencipta elemen dan menetapkan keluarga fonnya kepada fon yang ditentukan. Elemen ini kemudiannya dilampirkan pada badan dokumen. Lebar dan ketinggian elemen kemudiannya diukur dan dibandingkan dengan nilai lalai untuk tiga fon 'monospace', 'sans-serif' dan 'serif'. Jika nilai yang diukur adalah berbeza daripada nilai lalai, ini menunjukkan bahawa fon yang ditentukan tersedia.

Untuk menghitung semua fon yang tersedia, hanya ulangi tatasusunan nama fon dan panggil kaedah 'mengesan' untuk setiap fon . Hasilnya ialah senarai semua fon yang boleh dipaparkan oleh penyemak imbas.

Atas ialah kandungan terperinci Bagaimana untuk Menghitung Fon yang Tersedia untuk Enjin Rendering Pelayar Web menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!