通過js檢測瀏覽器支持的字體，從而顯示支持的字體，讓用戶選擇。

http://www.zhangxinxu.com/wordpress/2018/02/js-detect-suppot-font-family/

本文根據張鑫旭文章。

字體函數：

var dataFont = {
    windows: [{
        ch: '宋體',
        en: 'SimSun'
    }, {
        ch: '黑體',
        en: 'SimHei'
    }, {
        ch: '微軟雅黑',
        en: 'Microsoft Yahei'
    }, {
        ch: '微軟正黑體',
        en: 'Microsoft JhengHei'
    }, {
        ch: '楷體',
        en: 'KaiTi'
    }, {
        ch: '新宋體',
        en: 'NSimSun'
    }, {
        ch: '仿宋',
        en: 'FangSong'
    }],
    'OS X': [{
        ch: '蘋方',
        en: 'PingFang SC'
    }, {
        ch: '華文黑體',
        en: 'STHeiti'
    }, {
        ch: '華文楷體',
        en: 'STKaiti'
    }, {
        ch: '華文宋體',
        en: 'STSong'
    }, {
        ch: '華文仿宋',
        en: 'STFangsong'
    }, {
        ch: '華文中宋',
        en: 'STZhongsong'
    }, {
        ch: '華文琥珀',
        en: 'STHupo'
    }, {
        ch: '華文新魏',
        en: 'STXinwei'
    }, {
        ch: '華文隸書',
        en: 'STLiti'
    }, {
        ch: '華文行楷',
        en: 'STXingkai'
    }, {
        ch: '冬青黑體簡',
        en: 'Hiragino Sans GB'
    }, {
        ch: '蘭亭黑-簡',
        en: 'Lantinghei SC'
    }, {
        ch: '翩翩體-簡',
        en: 'Hanzipen SC'
    }, {
        ch: '手札體-簡',
        en: 'Hannotate SC'
    }, {
        ch: '宋體-簡',
        en: 'Songti SC'
    }, {
        ch: '娃娃體-簡',
        en: 'Wawati SC'
    }, {
        ch: '魏碑-簡',
        en: 'Weibei SC'
    }, {
        ch: '行楷-簡',
        en: 'Xingkai SC'
    }, {
        ch: '雅痞-簡',
        en: 'Yapi SC'
    }, {
        ch: '圓體-簡',
        en: 'Yuanti SC'
    }],
    'office': [{
        ch: '幼圓',
        en: 'YouYuan'
    }, {
        ch: '隸書',
        en: 'LiSu'
    }, {
        ch: '華文細黑',
        en: 'STXihei'
    }, {
        ch: '華文楷體',
        en: 'STKaiti'
    }, {
        ch: '華文宋體',
        en: 'STSong'
    }, {
        ch: '華文仿宋',
        en: 'STFangsong'
    }, {
        ch: '華文中宋',
        en: 'STZhongsong'
    }, {
        ch: '華文彩雲',
        en: 'STCaiyun'
    }, {
        ch: '華文琥珀',
        en: 'STHupo'
    }, {
        ch: '華文新魏',
        en: 'STXinwei'
    }, {
        ch: '華文隸書',
        en: 'STLiti'
    }, {
        ch: '華文行楷',
        en: 'STXingkai'
    }, {
        ch: '方正舒體',
        en: 'FZShuTi'
    }, {
        ch: '方正姚體',
        en: 'FZYaoti'
    }],
    'open': [{
        ch: '思源黑體',
        en: 'Source Han Sans CN'
    }, {
        ch: '思源宋體',
        en: 'Source Han Serif SC'
    }, {
        ch: '文泉驛微米黑',
        en: 'WenQuanYi Micro Hei'
    }],
    'hanyi': [{
        ch: '漢儀旗黑',
        en: 'HYQihei 40S'
    }, {
        ch: '漢儀旗黑',
        en: 'HYQihei 50S'
    }, {
        ch: '漢儀旗黑',
        en: 'HYQihei 60S'
    }, {
        ch: '漢儀大宋簡',
        en: 'HYDaSongJ'
    }, {
        ch: '漢儀楷體',
        en: 'HYKaiti'
    }, {
        ch: '漢儀家書簡',
        en: 'HYJiaShuJ'
    }, {
        ch: '漢儀PP體簡',
        en: 'HYPPTiJ'
    }, {
        ch: '漢儀樂喵體簡',
        en: 'HYLeMiaoTi'
    }, {
        ch: '漢儀小麥體',
        en: 'HYXiaoMaiTiJ'
    }, {
        ch: '漢儀程行體',
        en: 'HYChengXingJ'
    }, {
        ch: '漢儀黑荔枝',
        en: 'HYHeiLiZhiTiJ'
    }, {
        ch: '漢儀雅酷黑W',
        en: 'HYYaKuHeiW'
    }, {
        ch: '漢儀大黑簡',
        en: 'HYDaHeiJ'
    }, {
        ch: '漢儀尚魏手書W',
        en: 'HYShangWeiShouShuW'
    }],
    'fangzheng': [{
        "ch": "方正粗雅宋簡體",
        "en": "FZYaSongS-B-GB"
    }, {
        "ch": "方正報宋簡體",
        "en": "FZBaoSong-Z04S"
    }, {
        "ch": "方正粗圓簡體",
        "en": "FZCuYuan-M03S"
    }, {
        "ch": "方正大標宋簡體",
        "en": "FZDaBiaoSong-B06S"
    }, {
        "ch": "方正大黑簡體",
        "en": "FZDaHei-B02S"
    }, {
        "ch": "方正仿宋簡體",
        "en": "FZFangSong-Z02S"
    }, {
        "ch": "方正黑體簡體",
        "en": "FZHei-B01S"
    }, {
        "ch": "方正琥珀簡體",
        "en": "FZHuPo-M04S"
    }, {
        "ch": "方正楷體簡體",
        "en": "FZKai-Z03S"
    }, {
        "ch": "方正隸變簡體",
        "en": "FZLiBian-S02S"
    }, {
        "ch": "方正隸書簡體",
        "en": "FZLiShu-S01S"
    }, {
        "ch": "方正美黑簡體",
        "en": "FZMeiHei-M07S"
    }, {
        "ch": "方正書宋簡體",
        "en": "FZShuSong-Z01S"
    }, {
        "ch": "方正舒體簡體",
        "en": "FZShuTi-S05S"
    }, {
        "ch": "方正水柱簡體",
        "en": "FZShuiZhu-M08S"
    }, {
        "ch": "方正宋黑簡體",
        "en": "FZSongHei-B07S"
    }, {
        "ch": "方正宋三簡體",
        "en": "FZSong"
    }, {
        "ch": "方正魏碑簡體",
        "en": "FZWeiBei-S03S"
    }, {
        "ch": "方正細等線簡體",
        "en": "FZXiDengXian-Z06S"
    }, {
        "ch": "方正細黑一簡體",
        "en": "FZXiHei I-Z08S"
    }, {
        "ch": "方正細圓簡體",
        "en": "FZXiYuan-M01S"
    }, {
        "ch": "方正小標宋簡體",
        "en": "FZXiaoBiaoSong-B05S"
    }, {
        "ch": "方正行楷簡體",
        "en": "FZXingKai-S04S"
    }, {
        "ch": "方正姚體簡體",
        "en": "FZYaoTi-M06S"
    }, {
        "ch": "方正中等線簡體",
        "en": "FZZhongDengXian-Z07S"
    }, {
        "ch": "方正准圓簡體",
        "en": "FZZhunYuan-M02S"
    }, {
        "ch": "方正綜藝簡體",
        "en": "FZZongYi-M05S"
    }, {
        "ch": "方正彩雲簡體",
        "en": "FZCaiYun-M09S"
    }, {
        "ch": "方正隸二簡體",
        "en": "FZLiShu II-S06S"
    }, {
        "ch": "方正康體簡體",
        "en": "FZKangTi-S07S"
    }, {
        "ch": "方正超粗黑簡體",
        "en": "FZChaoCuHei-M10S"
    }, {
        "ch": "方正新報宋簡體",
        "en": "FZNew BaoSong-Z12S"
    }, {
        "ch": "方正新舒體簡體",
        "en": "FZNew ShuTi-S08S"
    }, {
        "ch": "方正黃草簡體",
        "en": "FZHuangCao-S09S"
    }, {
        "ch": "方正少兒簡體",
        "en": "FZShaoEr-M11S"
    }, {
        "ch": "方正稚藝簡體",
        "en": "FZZhiYi-M12S"
    }, {
        "ch": "方正細珊瑚簡體",
        "en": "FZXiShanHu-M13S"
    }, {
        "ch": "方正粗宋簡體",
        "en": "FZCuSong-B09S"
    }, {
        "ch": "方正平和簡體",
        "en": "FZPingHe-S11S"
    }, {
        "ch": "方正華隸簡體",
        "en": "FZHuaLi-M14S"
    }, {
        "ch": "方正瘦金書簡體",
        "en": "FZShouJinShu-S10S"
    }, {
        "ch": "方正細倩簡體",
        "en": "FZXiQian-M15S"
    }, {
        "ch": "方正中倩簡體",
        "en": "FZZhongQian-M16S"
    }, {
        "ch": "方正粗倩簡體",
        "en": "FZCuQian-M17S"
    }, {
        "ch": "方正胖娃簡體",
        "en": "FZPangWa-M18S"
    }, {
        "ch": "方正宋一簡體",
        "en": "FZSongYi-Z13S"
    }, {
        "ch": "方正剪紙簡體",
        "en": "FZJianZhi-M23S"
    }, {
        "ch": "方正流行體簡體",
        "en": "FZLiuXingTi-M26S"
    }, {
        "ch": "方正祥隸簡體",
        "en": "FZXiangLi-S17S"
    }, {
        "ch": "方正粗活意簡體",
        "en": "FZCuHuoYi-M25S"
    }, {
        "ch": "方正胖頭魚簡體",
        "en": "FZPangTouYu-M24S"
    }, /*{"ch":"方正鐵筋隸書簡體","en":"FZTieJinLiShu-Z14S"},{"ch":"方正北魏楷書簡體","en":"FZBeiWeiKaiShu-Z15S"},*/ {
        "ch": "方正卡通簡體",
        "en": "FZKaTong-M19S"
    }, {
        "ch": "方正藝黑簡體",
        "en": "FZYiHei-M20S"
    }, {
        "ch": "方正水黑簡體",
        "en": "FZShuiHei-M21S"
    }, {
        "ch": "方正古隸簡體",
        "en": "FZGuLi-S12S"
    }, {
        "ch": "方正幼線簡體",
        "en": "FZYouXian-Z09S"
    }, {
        "ch": "方正啟體簡體",
        "en": "FZQiTi-S14S"
    }, {
        "ch": "方正小篆體",
        "en": "FZXiaoZhuanTi-S13T"
    }, {
        "ch": "方正硬筆楷書簡體",
        "en": "FZYingBiKaiShu-S15S"
    }, {
        "ch": "方正氈筆黑簡體",
        "en": "FZZhanBiHei-M22S"
    }, {
        "ch": "方正硬筆行書簡體",
        "en": "FZYingBiXingShu-S16S"
    }]
};

// 系統默認字體
var rootFontFamily = (document.documentElement.currentStyle ? document.documentElement.currentStyle : window.getComputedStyle(document.documentElement)).fontFamily;

var eleTables = document.getElementsByTagName('table');
var lenTables = eleTables.length;

for(var index = 0; index < lenTables; index++) {
    var typeFont = eleTables[index].getAttribute('data-type');
    var arrDataFont = dataFont[typeFont];
    if(arrDataFont && arrDataFont.length) {
        var html = '';
        for(var start = 0; start < arrDataFont.length; start++) {
            var name = typeFont + start;
            var fontEn = arrDataFont[start].en,
                fontCh = arrDataFont[start].ch;
            // 是否標記為默認字體的處理
            var htmlFontEn = fontEn,
                htmlFontCh = fontCh;
            if(fontEn.toLowerCase() === rootFontFamily.toLowerCase()) {
                htmlFontEn += '<span class="red">（瀏覽器默認）</span>';
            } else if(fontCh.toLowerCase() === rootFontFamily.toLowerCase()) {
                htmlFontCh += '<span class="red">（瀏覽器默認）</span>';
            }

            html = html + '<tr style="font-family:\'' + fontEn + '\';"><td>' + htmlFontCh + '</td><td>' + htmlFontEn + '</td><td>' +
                '<p><input type="radio" id="' + name + '1" name="' + name + '" value="' + fontCh + '"' + (/簡|漢儀|方正/.test(fontCh) || typeFont == 'other' ? ' disabled' : '') + '><label for="' + name + '1">中文名</label></p>' +
                '<p><input type="radio" id="' + name + '2" name="' + name + '" value="' + fontEn + '" checked><label for="' + name + '2">英文名</label></p>' +
                '<p><input type="radio" id="' + name + '3" name="' + name + '" value=""><label for="' + name + '3">瀏覽器默認</label></p>' +
                '</td></tr>';
        }

        eleTables[index].getElementsByTagName('tbody')[0].innerHTML = html;

        // 復選框事件
        eleTables[index].onclick = function(event) {
            event = event || window.event;
            var target = event.target;

            if(target && target.type == 'radio') {
                target.parentNode.parentNode.parentNode.style.fontFamily = target.value;
            }
        };
    }
} // JavaScript Document

 

檢測函數：

var isSupportFontFamily = function(f) {
//    f是要檢測的字體
    if(typeof f != "string") {
        return false
    }
//    h是基礎字體
    var h = "Arial";
    if(f.toLowerCase() == h.toLowerCase()) {
        return true
    }
//    設置一個檢測的字符A,看他是否支持f字體
    var e = "a";
    var d = 100;
    var a = 100,
        i = 100;
    var c = document.createElement("canvas");
    var b = c.getContext("2d");
    c.width = a;
    c.height = i;
    b.textAlign = "center";
    b.fillStyle = "black";
    b.textBaseline = "middle";
    var g = function(j) {
        b.clearRect(0, 0, a, i);
//        字體是傳入的j,或者是默認的h
        b.font = d + "px " + j + ", " + h;
        b.fillText(e, a / 2, i / 2);
//        獲取所有的canvas圖片信息
        var k = b.getImageData(0, 0, a, i).data;
//        k調用數組的 filter方法,篩選符合條件的。改變原數組。
        return [].slice.call(k).filter(function(l) {
            return l != 0
        });
    };
//    返回結果,如果h默認字體和輸入待檢測字體f.通過g函數檢測得到的字符串不一致,說明自提生效
    return    g(h).join("") !== g(f).join("");
};

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <div id="result">
        
    </div>
    </body>
</html>
<script src="font-ch-en.js" type="text/javascript" charset="utf-8"></script>
<script src="isSupportFontFamily.js" type="text/javascript" charset="utf-8"></script>
<script>
    var eleResult = document.getElementById('result');
    var arrFont = dataFont['OS X'];
    arrFont.forEach(function (obj) {
        var fontFamily = obj.en;
        console.log(fontFamily);
    
        eleResult.innerHTML = eleResult.innerHTML + '<p style="font-family:'+ fontFamily +';">'+ (isSupportFontFamily(fontFamily) ? '是' : '否') +'：'+ obj.ch +'</p>';
    });
</script>