Home > Developer > Web Develop
1. Download plugin: Fontdetect plugin address: http://www.lalit.org/lab/javascript-css-font-detect/
or copy the following code to Fontdetect.js:
var Detector = function () {
A font would be compared against all the three default fonts.
And if it doesn ' t match all 3 then this font is not available.
var basefonts = [' monospace ', ' sans-serif ', ' serif '];
We use M or w because these and 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. Page Call method
<! DOCTYPE html>
<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 (' Fangzheng Orchid Pavilion quasi-black simplified '));
};
</script>
<body>
</body>
JS jquery View the fonts installed in the system
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
