JavaScript 可以偵測使用者瀏覽器可以顯示的所有字體嗎？

列出使用者瀏覽器可以顯示的每種字體

JavaScript 可以擷取瀏覽器可顯示的字體嗎？

是的，可以使用以下指令取得使用者瀏覽器支援的所有字型的清單JavaScript。這樣可以建立一個包含可供使用者選擇的可用字體的下拉清單。

字體偵測實作

請參考 http://www.lalit.org/lab/javascript -css-font-detect 用於高效的 JavaScript解：

程式碼片段：

var Detector = function() {
    // baseFonts
    var baseFonts = ['monospace', 'sans-serif', 'serif'];

    // testString
    var testString = "mmmmmmmmmmlli";

    // testSize
    var testSize = '72px';

    // helper functions
    var h = document.getElementsByTagName("body")[0];
    var s = document.createElement("span");
    s.style.fontSize = testSize;
    s.innerHTML = testString;

    // default measurements
    var defaultWidth = {};
    var defaultHeight = {};
    for (var index in baseFonts) {
        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);
    }

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

工作原理

此程式碼利用了不同字體中的字元獨特外觀。透過比較以特定字體呈現的文字與以基本字體呈現的文字的寬度和高度，確定是否支援目標字體。

以上是JavaScript 可以偵測使用者瀏覽器可以顯示的所有字體嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！