下面代码在Chrome 和 IE 下没有问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
11111221312
<div id="result">
<table data-type="windows">
<tbody></tbody>
</table>
<table data-type="OS X">
<tbody></tbody>
</table>
</div>
</body>
</html>
<script type="text/javascript" charset="utf-8">
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("");
};
</script>
<script type="text/javascript">
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'
}],
};
// 系统默认字体
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;
if (!isSupportFontFamily(fontEn)) {
continue;
}
// 是否标记为默认字体的处理
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>' +
'</td></tr>';
}
eleTables[index].getElementsByTagName('tbody')[0].innerHTML = html;
}
};
</script>
0 个回复