تعداد الخطوط المتاحة لمحرك العرض في متصفح الويب

في تطوير الويب، غالبًا ما يكون من المرغوب فيه تزويد المستخدمين بتجربة تصفح قابلة للتخصيص. يمكن أن يشمل ذلك السماح لهم بتحديد خط من اختيارهم من قائمة الخطوط التي يمكن للمتصفح عرضها. لتسهيل ذلك، من الضروري أن تكون هناك طريقة للحصول على قائمة بجميع الخطوط المتوفرة برمجيًا.

أحد الأساليب لحل هذه المشكلة هو ترميز قائمة الخطوط أو استردادها من الخادم. ومع ذلك، يمكن أن يكون هذا الأسلوب مرهقًا وقد لا يلبي الحالات التي يكون فيها المتصفح يحتوي على خطوط إضافية مثبتة بواسطة المستخدم.

ولحسن الحظ، يوجد حل أكثر أناقة وديناميكية باستخدام JavaScript. يستخدم المقتطف التالي تقنية تعرف باسم اكتشاف الخط:

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

يقوم هذا الرمز بإنشاء كائن "كاشف" باستخدام طريقة "اكتشاف". تأخذ طريقة "الكشف" اسم الخط كوسيطة وترجع قيمة منطقية تشير إلى ما إذا كان الخط متاحًا للعرض بواسطة المتصفح.

يعمل الكود عن طريق إنشاء عنصر وتعيين عائلة الخطوط الخاصة به إلى الخط المحدد. ثم يتم إلحاق هذا العنصر بنص الوثيقة. يتم بعد ذلك قياس عرض العنصر وارتفاعه ومقارنتهما بالقيم الافتراضية لخطوط "monospace" و"sans-serif" و"serif" الثلاثة. إذا كانت القيم المقاسة مختلفة عن القيم الافتراضية، فهذا يشير إلى أن الخط المحدد متاح.

لتعداد جميع الخطوط المتاحة، ما عليك سوى التكرار على مجموعة من أسماء الخطوط واستدعاء طريقة "الكشف" لكل خط . ستكون النتيجة قائمة بجميع الخطوط التي يمكن للمتصفح عرضها.