1.下载插件:FontDetect插件 地址:http://www.lalit.org/lab/javascript-css-font-detect/
或者复制以下代码到fontdetect.js:
var Detector = function() {
// a font will be compared against all the three default fonts.
// and if it doesn‘t match all 3 then that font is not available.
var baseFonts = [‘monospace‘, ‘sans-serif‘, ‘serif‘];
//we use m or w because these two characters take up the maximum width.
// And we use a LLi so that the same matching fonts can get separated
var testString = "mmmmmmmmmmlli";
//we test using 72px font size, we may use any size. I guess larger the better.
var testSize = ‘72px‘;
var h = document.getElementsByTagName("body")[0];
// create a SPAN in the document to get the width of the text we use to test
var s = document.createElement("span");
s.style.fontSize = testSize;
s.innerHTML = testString;
var defaultWidth = {};
var defaultHeight = {};
for (var index in baseFonts) {
//get the default width for the three base fonts
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);
}
function detect(font) {
var detected = false;
for (var index in baseFonts) {
s.style.fontFamily = font + ‘,‘ + baseFonts[index]; // name of the font along with the base font for fallback.
h.appendChild(s);
var matched = (s.offsetWidth != defaultWidth[baseFonts[index]] || s.offsetHeight != defaultHeight[baseFonts[index]]);
h.removeChild(s);
detected = detected || matched;
}
return detected;
}
this.detect = detect;
};
2.页面调用方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/fontdetect.js"></script>
<script type="text/javascript">
window.onload = function() {
var detective = new Detector();
alert(detective.detect(‘方正兰亭准黑简体‘));
};
</script>
</head>
<body>
</body>
</html>