通过js检测浏览器支持的字体，从而显示支持的字体，让用户选择。
2024-09-05 13:50:13
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>
最新文章
- 结合ABP源码实现邮件发送功能
- jQuery.Data源码
- 深入理解Java多态机制
- BZOJ1588 HNOI2002 营业额统计 [Splay入门题]
- FZU-1924+判断环/DFS/BFS
- RUBY类特性
- FZU 2095 水面高度
- E2195 cannot evaluate function call
- PHP求解一个值是否为质数
- epel扩展库的安装
- Linux时间子系统之（十六）：clockevent
- PostgreSQL For Windows 全功能精简版
- 使用link标签进行预加载
- 46.Scrapy框架结构
- 1.6Eigen中系数运算Reductions, visitors and broadcasting
- java匹配竖线的错误警示
- 连接远程linux机器时无法使用matlab gui的解决方案
- kafka启动及查看topic命令【已用过的，待更新】
- Flume实例一学习
- Luogu3576 POI2014 MRO-Ant colony 【树形DP】*
热门文章
- 关于DLL搜索路径的顺序问题
- C++转换构造函数和隐式转换函数
- configure: error: no acceptable C compiler found in $PATH 解决
- Bugku-CTF加密篇之python(N1CTF) [HRlgC2ReHW1/WRk2DikfNBo1dl1XZBJrRR9qECMNOjNHDktBJSxcI1hZIz07YjVx]
- 生成树计数 lighting 最终决定用这个模板！ （有逆元的模板）
- Nuxt的路由配置以及传参
- windows cmake与nmake
- 【做题笔记】P6014 [CSGRound3]斗牛
- Centos610-FastDFS系列篇
- iso15693芯片读写工具套件 icode-slix2读写 nfc type 5 tag读写