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

本文根據(jù)張鑫旭文章。

字體函數(shù)：

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: '華文細(xì)黑',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": "方正大標(biāo)宋簡體","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": "方正細(xì)等線簡體","en": "FZXiDengXian-Z06S"}, {"ch": "方正細(xì)黑一簡體","en": "FZXiHei I-Z08S"}, {"ch": "方正細(xì)圓簡體","en": "FZXiYuan-M01S"}, {"ch": "方正小標(biāo)宋簡體","en": "FZXiaoBiaoSong-B05S"}, {"ch": "方正行楷簡體","en": "FZXingKai-S04S"}, {"ch": "方正姚體簡體","en": "FZYaoTi-M06S"}, {"ch": "方正中等線簡體","en": "FZZhongDengXian-Z07S"}, {"ch": "方正準(zhǔn)圓簡體","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": "方正細(xì)珊瑚簡體","en": "FZXiShanHu-M13S"}, {"ch": "方正粗宋簡體","en": "FZCuSong-B09S"}, {"ch": "方正平和簡體","en": "FZPingHe-S11S"}, {"ch": "方正華隸簡體","en": "FZHuaLi-M14S"}, {"ch": "方正瘦金書簡體","en": "FZShouJinShu-S10S"}, {"ch": "方正細(xì)倩簡體","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"}] };// 系統(tǒng)默認(rèn)字體 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;// 是否標(biāo)記為默認(rèn)字體的處理var htmlFontEn = fontEn,htmlFontCh = fontCh;if(fontEn.toLowerCase() === rootFontFamily.toLowerCase()) {htmlFontEn += '<span class="red">（瀏覽器默認(rèn)）</span>';} else if(fontCh.toLowerCase() === rootFontFamily.toLowerCase()) {htmlFontCh += '<span class="red">（瀏覽器默認(rèn)）</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">瀏覽器默認(rèn)</label></p>' +'</td></tr>';}eleTables[index].getElementsByTagName('tbody')[0].innerHTML = html;// 復(fù)選框事件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

?

檢測函數(shù)：

var isSupportFontFamily = function(f) { // f是要檢測的字體if(typeof f != "string") {return false} // h是基礎(chǔ)字體var h = "Arial";if(f.toLowerCase() == h.toLowerCase()) {return true} // 設(shè)置一個檢測的字符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,或者是默認(rèn)的hb.font = d + "px " + j + ", " + h;b.fillText(e, a / 2, i / 2); // 獲取所有的canvas圖片信息var k = b.getImageData(0, 0, a, i).data; // k調(diào)用數(shù)組的 filter方法,篩選符合條件的。改變原數(shù)組。return [].slice.call(k).filter(function(l) {return l != 0});}; // 返回結(jié)果,如果h默認(rèn)字體和輸入待檢測字體f.通過g函數(shù)檢測得到的字符串不一致,說明自提生效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>

?

轉(zhuǎn)載于:https://www.cnblogs.com/gaidalou/p/8479452.html

總結(jié)

以上是生活随笔為你收集整理的通过js检测浏览器支持的字体，从而显示支持的字体，让用户选择。的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。