├── PI.otf
├── README
├── isFontFaceSupportedInference.js
├── isFontFaceSupportedSniff.js
├── snifftest.html
├── test.html
├── isFontLoaded.js
└── isFontFaceSupported.js
/PI.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/paulirish/font-face-detect/HEAD/PI.otf
--------------------------------------------------------------------------------
/README:
--------------------------------------------------------------------------------
1 |
2 | This script is a feature detection for the CSS3 feature of @font-face. This enables you to use a hosted font file as a font-family in your CSS.
3 |
4 | View the full details of this project at:
5 | http://paulirish.com/2009/font-face-feature-detection/
6 |
7 | My requirements for this detection were:
8 |
9 | * No browser userAgent sniffing
10 | * No extra HTTP request required
11 | * Must be performant with a small footprint, natch
12 | * Results should match the latest research on compatibility
13 |
14 | This script is meant to replace all fontAvailable scripts. It can be asynchronous, but it has much greater accuracy.
15 |
16 |
17 |
--------------------------------------------------------------------------------
/isFontFaceSupportedInference.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | /*!
4 | * isFontFaceSupported - Inference variant - v0.9 - 02/22/2010
5 | *
6 | * Copyright (c) 2010 Marc G.
7 | * MIT license - Free as in French. ;)
8 | */
9 |
10 | /* This is an object-inference based feature detection.
11 | It is not sniffing the browser userAgent, nor is it testing the actual feature
12 | Instead it is testing properties in the target browsers.
13 | It is also synchronous.
14 | */
15 |
16 |
17 | var isFontFaceSupported = function(){
18 |
19 | var isNoSupport = false ||
20 | (('MozOpacity' in document.body.style)&&(!document.body.children)) ||
21 | ((window.opera)&&(!document.querySelector)) ||
22 | (((/source/.test(/a/.toString+''))||(window.chrome))&&(!window.openDatabase)) ||
23 | ((/a/.__proto__=='//')&&(!document.querySelector));
24 |
25 | return !isNoSupport;
26 |
27 | }
28 |
--------------------------------------------------------------------------------
/isFontFaceSupportedSniff.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | /*!
4 | * isFontFaceSupported - Sniff variant - v0.9 - 12/19/2009
5 | * http://paulirish.com/2009/font-face-feature-detection/
6 | *
7 | * Copyright (c) 2009 Paul Irish
8 | * MIT license
9 | */
10 |
11 | /* Browser sniffing is bad. You should use feature detection.
12 | Sadly the only feature detect for @font-face is
13 | asynchronous. So for those that *need* a synchronous solution,
14 | here is a sniff-based result:
15 | */
16 |
17 |
18 | var isFontFaceSupported = function(){
19 |
20 | var ua = navigator.userAgent, parsed;
21 |
22 | if (/*@cc_on@if(@_jscript_version>=5)!@end@*/0)
23 | return true;
24 | if (parsed = ua.match(/Chrome\/(\d+\.\d+\.\d+\.\d+)/))
25 | return parsed[1] >= '4.0.249.4';
26 | if ((parsed = ua.match(/Safari\/(\d+\.\d+)/)) && !/iPhone/.test(ua))
27 | return parsed[1] >= '525.13';
28 | if (/Opera/.test({}.toString.call(window.opera)))
29 | return opera.version() >= '10.00';
30 | if (parsed = ua.match(/rv:(\d+\.\d+\.\d+)[^b].*Gecko\//))
31 | return parsed[1] >= '1.9.1';
32 |
33 | return false;
34 |
35 | }
36 |
--------------------------------------------------------------------------------
/snifftest.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | @fontface test
5 |
22 |
23 |
24 |
25 |
26 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
57 |
58 |
59 |
60 |
61 | lorem ipsum
62 | lorem ipsum
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
--------------------------------------------------------------------------------
/test.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | @fontface test
5 |
23 |
24 |
25 |
26 |
27 |
32 |
33 |
34 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
64 |
65 |
66 |
67 |
68 | lorem ipsum
69 | lorem ipsum
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
89 |
90 |
91 |
92 |
--------------------------------------------------------------------------------
/isFontLoaded.js:
--------------------------------------------------------------------------------
1 |
2 | // by harold kyle, based off of paul irish's work.
3 |
4 | //call the function to Firebug Console
5 | //isThisFontLoaded("Greta Text","Times New Roman",function(bool){console.debug('here');})
6 |
7 |
8 |
9 | var isThisFontLoaded = (function(font,fallback,fn){
10 |
11 | var fontret,
12 | fontfaceCheckDelay = 5000;
13 |
14 | // IE supports EOT and has had EOT support since IE 5.
15 | // This is a proprietary standard (ATOW) and thus this off-spec,
16 | // proprietary test for it is acceptable.
17 | if (!(!/*@cc_on@if(@_jscript_version>=5)!@end@*/0)) fontret = true;
18 |
19 | else {
20 | // Create variables for dedicated @font-face test
21 | var doc = document, docElement = doc.documentElement,
22 | st = doc.createElement('style'),
23 | spn = doc.createElement('span'),
24 | wid, nwid, body = doc.body,
25 | callback, isCallbackCalled;
26 |
27 | // The following is a font, only containing the - character. Thanks Ethan Dunham.
28 | doc.getElementsByTagName('head')[0].appendChild(st);
29 |
30 | spn.setAttribute('style','font:99px _,'+fallback+';position:absolute;visibility:hidden');
31 | if (!body){
32 | body = docElement.appendChild(doc.createElement('fontface'));
33 | }
34 |
35 | // the data-uri'd font only has the - character
36 | spn.innerHTML = '-------';
37 | spn.id = 'fonttest';
38 |
39 | body.appendChild(spn);
40 | wid = spn.offsetWidth*spn.offsetHeight;
41 |
42 | spn.style.font = '99px '+font+',_,'+fallback;
43 |
44 | // needed for the CSSFontFaceRule false positives (ff3, chrome, op9)
45 | fontret = wid !== spn.offsetWidth*spn.offsetHeight;
46 |
47 | var delayedCheck = function(){
48 | if (isCallbackCalled) return;
49 | fontret = wid !== spn.offsetWidth*spn.offsetHeight;
50 | callback && (isCallbackCalled = true) && callback(fontret);
51 | }
52 |
53 | addEventListener('load',delayedCheck,false);
54 | setTimeout(delayedCheck,fontfaceCheckDelay);
55 | }
56 | function ret(){ return fontret || wid !== spn.offsetWidth*spn.offsetHeight; };
57 | // allow for a callback
58 | if(ret()&&(typeof fn === 'function')){
59 | (isCallbackCalled || fontret) ? fn(fontret) : (callback = fn);
60 | }
61 |
62 | return ret();
63 | });
64 |
65 | /* end font_face */
66 |
67 |
--------------------------------------------------------------------------------
/isFontFaceSupported.js:
--------------------------------------------------------------------------------
1 |
2 | /*!
3 | * isFontFaceSupported - v0.9 - 12/19/2009
4 | * http://paulirish.com/2009/font-face-feature-detection/
5 | *
6 | * Copyright (c) 2009 Paul Irish
7 | * MIT license
8 | */
9 |
10 | var isFontFaceSupported = (function(){
11 |
12 |
13 | var fontret,
14 | fontfaceCheckDelay = 100;
15 |
16 | // IE supports EOT and has had EOT support since IE 5.
17 | // This is a proprietary standard (ATOW) and thus this off-spec,
18 | // proprietary test for it is acceptable.
19 | if (!(!/*@cc_on@if(@_jscript_version>=5)!@end@*/0)) fontret = true;
20 |
21 | else {
22 |
23 | // Create variables for dedicated @font-face test
24 | var doc = document, docElement = doc.documentElement,
25 | st = doc.createElement('style'),
26 | spn = doc.createElement('span'),
27 | wid, nwid, body = doc.body,
28 | callback, isCallbackCalled;
29 |
30 | // The following is a font, only containing the - character. Thanks Ethan Dunham.
31 | st.textContent = "@font-face{font-family:testfont;src:url(data:font/opentype;base64,T1RUTwALAIAAAwAwQ0ZGIMA92IQAAAVAAAAAyUZGVE1VeVesAAAGLAAAABxHREVGADAABAAABgwAAAAgT1MvMlBHT5sAAAEgAAAAYGNtYXAATQPNAAAD1AAAAUpoZWFk8QMKmwAAALwAAAA2aGhlYQS/BDgAAAD0AAAAJGhtdHgHKQAAAAAGSAAAAAxtYXhwAANQAAAAARgAAAAGbmFtZR8kCUMAAAGAAAACUnBvc3T/uAAyAAAFIAAAACAAAQAAAAEAQVTDUm9fDzz1AAsD6AAAAADHUuOGAAAAAMdS44YAAADzAz8BdgAAAAgAAgAAAAAAAAABAAABdgDzAAkDQQAAAAADPwABAAAAAAAAAAAAAAAAAAAAAwAAUAAAAwAAAAICmgGQAAUAAAK8AooAAACMArwCigAAAd0AMgD6AAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAEZIRAAAQAAgAC0C7v8GAAABdv8NAAAAAQAAAAAAAAAAACAAIAABAAAAFAD2AAEAAAAAAAAAPAB6AAEAAAAAAAEAAgC9AAEAAAAAAAIABwDQAAEAAAAAAAMAEQD8AAEAAAAAAAQAAwEWAAEAAAAAAAUABQEmAAEAAAAAAAYAAgEyAAEAAAAAAA0AAQE5AAEAAAAAABAAAgFBAAEAAAAAABEABwFUAAMAAQQJAAAAeAAAAAMAAQQJAAEABAC3AAMAAQQJAAIADgDAAAMAAQQJAAMAIgDYAAMAAQQJAAQABgEOAAMAAQQJAAUACgEaAAMAAQQJAAYABAEsAAMAAQQJAA0AAgE1AAMAAQQJABAABAE7AAMAAQQJABEADgFEAEcAZQBuAGUAcgBhAHQAZQBkACAAaQBuACAAMgAwADAAOQAgAGIAeQAgAEYAbwBuAHQATABhAGIAIABTAHQAdQBkAGkAbwAuACAAQwBvAHAAeQByAGkAZwBoAHQAIABpAG4AZgBvACAAcABlAG4AZABpAG4AZwAuAABHZW5lcmF0ZWQgaW4gMjAwOSBieSBGb250TGFiIFN0dWRpby4gQ29weXJpZ2h0IGluZm8gcGVuZGluZy4AAFAASQAAUEkAAFIAZQBnAHUAbABhAHIAAFJlZ3VsYXIAAEYATwBOAFQATABBAEIAOgBPAFQARgBFAFgAUABPAFIAVAAARk9OVExBQjpPVEZFWFBPUlQAAFAASQAgAABQSSAAADEALgAwADAAMAAAMS4wMDAAAFAASQAAUEkAACAAACAAAFAASQAAUEkAAFIAZQBnAHUAbABhAHIAAFJlZ3VsYXIAAAAAAAADAAAAAwAAABwAAQAAAAAARAADAAEAAAAcAAQAKAAAAAYABAABAAIAIAAt//8AAAAgAC3////h/9UAAQAAAAAAAAAAAQYAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAA/7UAMgAAAAAAAAAAAAAAAAAAAAAAAAAAAQAEBAABAQEDUEkAAQIAAQAu+BAA+BsB+BwC+B0D+BgEWQwDi/eH+dP4CgUcAIwPHAAAEBwAkREcAB4cAKsSAAMCAAEAPQA/AEFHZW5lcmF0ZWQgaW4gMjAwOSBieSBGb250TGFiIFN0dWRpby4gQ29weXJpZ2h0IGluZm8gcGVuZGluZy5QSVBJAAAAAAEADgADAQECAxQODvb3h/cXAfeHBPnT9xf90wYO+IgU+WoVHgoDliX/DAmLDAr3Fwr3FwwMHgoG/wwSAAAAAAEAAAAOAAAAGAAAAAAAAgABAAEAAgABAAQAAAACAAAAAAABAAAAAMbULpkAAAAAx1KUiQAAAADHUpSJAfQAAAH0AAADQQAA)}";
32 | doc.getElementsByTagName('head')[0].appendChild(st);
33 |
34 |
35 | spn.setAttribute('style','font:99px _,serif;position:absolute;visibility:hidden');
36 |
37 | if (!body){
38 | body = docElement.appendChild(doc.createElement('fontface'));
39 | }
40 |
41 | // the data-uri'd font only has the - character
42 | spn.innerHTML = '-------';
43 | spn.id = 'fonttest';
44 |
45 | body.appendChild(spn);
46 | wid = spn.offsetWidth;
47 |
48 | spn.style.font = '99px testfont,_,serif';
49 |
50 | // needed for the CSSFontFaceRule false positives (ff3, chrome, op9)
51 | fontret = wid !== spn.offsetWidth;
52 |
53 | var delayedCheck = function(){
54 | if (isCallbackCalled) return;
55 | fontret = wid !== spn.offsetWidth;
56 | callback && (isCallbackCalled = true) && callback(fontret);
57 | }
58 |
59 | addEventListener('load',delayedCheck,false);
60 | setTimeout(delayedCheck,fontfaceCheckDelay);
61 | }
62 |
63 | function ret(){ return fontret || wid !== spn.offsetWidth; };
64 |
65 | // allow for a callback
66 | ret.ready = function(fn){
67 | (isCallbackCalled || fontret) ? fn(fontret) : (callback = fn);
68 | }
69 |
70 | return ret;
71 | })();
72 |
--------------------------------------------------------------------------------