simple attempt at detecting fonts

This commit is contained in:
Jeff Carr 2017-11-29 20:21:15 +00:00
parent 2abe6c7e27
commit 72a5a63bb5
2 changed files with 35 additions and 7 deletions

View File

@ -18,8 +18,6 @@
<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
@ -92,11 +90,11 @@ function FontDetector() {
function addFont(family, stylesheetUrl, ruleString) {
if (detect(family)) {
//console.log('using internal font '+family);
document.write('using internal font '+family + "<br>");
return true;
}
if (stylesheetUrl) {
console.log('added stylesheet '+stylesheetUrl);
document.write('added stylesheet ' + stylesheetUrl + "<br>");
var head = document.head, link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
@ -106,18 +104,23 @@ function FontDetector() {
}
if (ruleString) {
console.log('adding font rule:'+rule);
document.write('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);
document.write('could not add font '+family + "<br>");
}
function addFontsArr(arr) {
arr.forEach(a => typeof a==='string' ? addFont(a) : addFont(a.family, a.stylesheetUrl, a.ruleString));
}
};
var fonts = [ 'Arial', 'Arial Black', { family: 'Lato', stylesheetUrl: 'https://fonts.googleapis.com/css?family=Lato'}, 'Leelawadee UI'];
var blah = new FontDetector;
blah.addFontsArr(fonts);
</script>

View File

@ -35,9 +35,33 @@ if (gl) {
document.write("vendor = " + vendor + "<br><br>");
document.write("renderer = " + renderer + "<br><br>");
document.write("Your screen resolution = " +
window.screen.width +
" x " +
window.screen.height +
" pixels " +
" ( " +
window.screen.colorDepth +
" bit color ) " +
" ( " +
window.screen.orientation.type +
" mode ) " +
" <br><br>");
} else {
document.write("<br>Failed gl=NULL<br>");
}
console.log("Your screen resolution = " +
window.screen.width +
" x " +
window.screen.height +
" pixels " +
" ( " +
window.screen.colorDepth +
" bit color ) " +
" ( " +
window.screen.orientation.type +
" mode ) " +
" <br><br>");
</script>
@ -62,6 +86,7 @@ if (gl) {
<a href="javascript2.html">java test2</a><br/>
<a href="javascript3.html">java test3</a><br/>
<a href="detect_gpu.html">dump javascript webgl info</a><br/>
<a href="detect_fonts.html">detect / load fonts (?)</a><br/>
<a href="javascript_dump/">dump javascript info</a><br/>
<a href="http://www.lalit.org/lab/javascript-css-font-detect/">javascript font detection</a><br/>
<a href="https://www.bramstein.com/writing/detecting-system-fonts-without-flash.html">detecting fonts</a><br/>
@ -111,7 +136,7 @@ if (gl) {
<script language="JavaScript" type="text/javascript">
for (var n in window.screen) {
document.write("<tr>");
document.write("<th align='left'>window.screen" + n + "<\/th>");
document.write("<th align='left'>window.screen." + n + "<\/th>");
document.write("<th align='left'>" + window.screen[n] + "<\/th>");
document.write("<\/tr>");
}