如何使用 JavaScript 列舉 Web 瀏覽器渲染引擎可用的字體？

枚舉可用於 Web 瀏覽器渲染引擎的字體

在 Web 開發中，通常希望為使用者提供可自訂的瀏覽體驗。這可以包括允許他們從瀏覽器可以呈現的字體清單中選擇自己選擇的字體。為了實現這一點，有必要有一種方法以程式設計方式取得所有可用字體的清單。

解決此問題的一種方法是硬編碼字體清單或從伺服器檢索它。然而，這種方法可能很麻煩，並且可能無法滿足瀏覽器安裝了使用者附加字體的情況。

幸運的是，存在一種使用 JavaScript 的更優雅和動態的解決方案。以下程式碼片段利用了一種稱為字體檢測的技術：

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

此程式碼使用「偵測」方法建立一個「偵測器」物件。 「檢測」方法採用字體名稱作為參數，並傳回布林值，指示該字體是否可用於瀏覽器渲染。

程式碼透過建立一個 來運作。元素並將其 font-family 設定為指定字體。然後將該元素附加到文檔正文。然後測量元素的寬度和高度，並將其與三種「monospace」、「sans-serif」和「serif」字體的預設值進行比較。如果測量值與預設值不同，則表示指定的字體可用。

要列舉所有可用字體，只需迭代字體名稱數組並為每個字體呼叫「偵測」方法。結果將是瀏覽器可以呈現的所有字體的清單。

以上是如何使用 JavaScript 列舉 Web 瀏覽器渲染引擎可用的字體？的詳細內容。更多資訊請關注PHP中文網其他相關文章！