124 lines
4.1 KiB
HTML
124 lines
4.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>check.wit.com</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
width: 100em;
|
||
|
|
margin: 0 auto;
|
||
|
|
font-family: Tahoma, Verdana, Arial, sans-serif;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
// to add a font, you can do:
|
||
|
|
// fonts = [ 'Arial', 'Arial Black', { family: 'Lato', stylesheetUrl: 'https://fonts.googleapis.com/css?family=Lato'}, 'Leelawadee UI']
|
||
|
|
// (new FontDetector()).addFontsArr(fonts);
|
||
|
|
|
||
|
|
/**
|
||
|
|
* JavaScript code to detect available availability of a
|
||
|
|
* particular font in a browser using JavaScript and CSS.
|
||
|
|
*
|
||
|
|
* Author : Lalit Patel
|
||
|
|
* Website: http://www.lalit.org/lab/javascript-css-font-detect/
|
||
|
|
* License: Apache Software License 2.0
|
||
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||
|
|
* Version: 0.15 (21 Sep 2009)
|
||
|
|
* Changed comparision font to default from sans-default-default,
|
||
|
|
* as in FF3.0 font of child element didn't fallback
|
||
|
|
* to parent element if the font is missing.
|
||
|
|
* Version: 0.2 (04 Mar 2012)
|
||
|
|
* Comparing font against all the 3 generic font families ie,
|
||
|
|
* 'monospace', 'sans-serif' and 'sans'. If it doesn't match all 3
|
||
|
|
* then that font is 100% not available in the system
|
||
|
|
* Version: 0.3 (24 Mar 2012)
|
||
|
|
* Replaced sans with serif in the list of baseFonts
|
||
|
|
*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Usage: d = new Detector();
|
||
|
|
* d.detect('font name');
|
||
|
|
*/
|
||
|
|
function FontDetector() {
|
||
|
|
this.detect = detect;
|
||
|
|
this.addFont = addFont;
|
||
|
|
this.addFontsArr = addFontsArr;
|
||
|
|
|
||
|
|
// 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;
|
||
|
|
}
|
||
|
|
|
||
|
|
function addFont(family, stylesheetUrl, ruleString) {
|
||
|
|
if (detect(family)) {
|
||
|
|
//console.log('using internal font '+family);
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
if (stylesheetUrl) {
|
||
|
|
console.log('added stylesheet '+stylesheetUrl);
|
||
|
|
var head = document.head, link = document.createElement('link');
|
||
|
|
link.type = 'text/css';
|
||
|
|
link.rel = 'stylesheet';
|
||
|
|
link.href = stylesheetUrl;
|
||
|
|
head.appendChild(link);
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (ruleString) {
|
||
|
|
console.log('adding font rule:'+rule);
|
||
|
|
var newStyle = document.createElement('style');
|
||
|
|
newStyle.appendChild(document.createTextNode(rule));
|
||
|
|
document.head.appendChild(newStyle);
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log('could not add font '+family);
|
||
|
|
}
|
||
|
|
|
||
|
|
function addFontsArr(arr) {
|
||
|
|
arr.forEach(a => typeof a==='string' ? addFont(a) : addFont(a.family, a.stylesheetUrl, a.ruleString));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|