/** * Source: http://paulirish.com/2009/fighting-the-font-face-fout/ * [copy this just below the CSS definition in the tag */ //function preloadFont(className, objectName) { // // quit early if we're in IE, no need to do any of this. // if (/*@cc_on!@*/0) return; // // var f = document.createElement(objectName); // f.innerHTML = objectName; // // associate with the @font-face declaration and hide it // f.className = className; // f.style.cssText = 'position:absolute; visibility:hidden' // // it's still off-DOM so it doesn't download yet // // // document.body doesnt exist yet so we'll add it onto the HTML tag // document.documentElement.appendChild(f); // // font download initiated Now. // // let's clean up after ourselves (opera needs a timeout > 0) // setTimeout(function(){f.parentNode && f.parentNode.removeChild(f)},100) //} // //preloadFont('preloadff-bold', 'fontdl'); //preloadFont('preloadff', 'fontdlbold'); /*! * isFontFaceSupported - v0.9 - 12/19/2009 * http://paulirish.com/2009/font-face-feature-detection/ * * Copyright (c) 2009 Paul Irish * MIT license */ var isFontFaceSupported = (function(){ var fontret, fontfaceCheckDelay = 100; // IE supports EOT and has had EOT support since IE 5. // This is a proprietary standard (ATOW) and thus this off-spec, // proprietary test for it is acceptable. if (!(!/*@cc_on@if(@_jscript_version>=5)!@end@*/0)) fontret = true; else { // Create variables for dedicated @font-face test var doc = document, docElement = doc.documentElement, st = doc.createElement('style'), spn = doc.createElement('span'), wid, nwid, body = doc.body, callback, isCallbackCalled; // The following is a font, only containing the - character. Thanks Ethan Dunham. st.textContent = "@font-face{font-family:testfont;src:url(data:font/opentype;base64,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)}"; doc.getElementsByTagName('head')[0].appendChild(st); spn.setAttribute('style','font:99px _,serif;position:absolute;visibility:hidden'); if (!body){ body = docElement.appendChild(doc.createElement('fontface')); } // the data-uri'd font only has the - character spn.innerHTML = '-------'; spn.id = 'fonttest'; body.appendChild(spn); wid = spn.offsetWidth; spn.style.font = '99px testfont,_,serif'; // needed for the CSSFontFaceRule false positives (ff3, chrome, op9) fontret = wid !== spn.offsetWidth; var delayedCheck = function(){ if (isCallbackCalled) return; fontret = wid !== spn.offsetWidth; callback && (isCallbackCalled = true) && callback(fontret); } addEventListener('load',delayedCheck,false); setTimeout(delayedCheck,fontfaceCheckDelay); } function ret(){return fontret || wid !== spn.offsetWidth;}; // allow for a callback ret.ready = function(fn){ (isCallbackCalled || fontret) ? fn(fontret) : (callback = fn); } return ret; })(); /** * TypeHelper and EventHelper functions to detect if Cleartype is enabled * URL: http://www.useragentman.com/blog/2009/11/29/how-to-detect-font-smoothing-using-javascript/#more-338 * * Font generator at: http://www.fontsquirrel.com/fontface/generator */ /* * TypeHelpers version 1.0 * Zoltan Hawryluk, Nov 24 2009. * * Released under the MIT License. http://www.opensource.org/licenses/mit-license.php * * Works for * - IE6+ (Windows), * - Firefox 3.5+ (Windows, Mac, Linux), * - Safari 4+ (Windows, Mac OS X), * - Chrome 3.0+ (Windows). * Opera 10.10 and under reports unknown support for font-smoothing. * * * METHODS * ------- * * hasSmoothing() returns: * true if font smoothing is enabled * false if font smoothing isn't enabled * null if it cannot detect if it's on or not. * */ var TypeHelpers = new function(){ var me = this; me.hasSmoothing = function(){ // IE has screen.fontSmoothingEnabled - sweet! if (typeof(screen.fontSmoothingEnabled) != "undefined") { return screen.fontSmoothingEnabled; } else { try { var body = document.body; var docElement = document.documentElement; if (!body) { //body = docElement.appendChild(document.createElement('div')); body = docElement; } // Create a 35x35 Canvas block. var canvasNode = document.createElement("canvas"); canvasNode.width = "35"; canvasNode.height = "35"; // We must put this node into the body, otherwise // Safari Windows does not report correctly. canvasNode.style.display = "none"; body.appendChild(canvasNode); var ctx = canvasNode.getContext("2d"); // draw a black letter "O", 32px Arial. ctx.textBaseline = "top"; ctx.font = "32px Arial"; ctx.fillStyle = "black"; ctx.strokeStyle = "black"; ctx.fillText("O", 0, 0); // start at (8,1) and search the canvas from left to right, // top to bottom to see if we can find a non-black pixel. If // so we return true. for (var j = 8; j <= 32; j++) { for (var i = 1; i <= 32; i++) { var imageData = ctx.getImageData(i, j, 1, 1).data; var alpha = imageData[3]; if (alpha != 255 && alpha != 0) { return true; // font-smoothing must be on. } } } // didn't find any non-black pixels - return false. return false; } catch (ex) { // Something went wrong (for example, Opera cannot use the // canvas fillText() method. Return null (unknown). return null; } } } } /** * UserAgent match function from jQuery core instead of waiting * for jQuery to load first */ function uaMatch( ua ) { ua = ua.toLowerCase(); var match = /(webkit)[ \/]([\w.]+)/.exec( ua ) || /(opera)(?:.*version)?[ \/]([\w.]+)/.exec( ua ) || /(msie) ([\w.]+)/.exec( ua ) || !/compatible/.test( ua ) && /(mozilla)(?:.*? rv:([\w.]+))?/.exec( ua ) || []; return {browser: match[1] || "", version: match[2] || "0"}; } /* * function to add a class to a dom element */ function myAddClass(element, value) { //alert(element); if(!element.className) { element.className = value; } else { newClassName = element.className; newClassName+= " "; newClassName+= value; element.className = newClassName; } } /** * This function adds the font-face classes (regular and bold) to browsers that * support it, and have font-smoothing on (or unknown for Safari). * * @uses isFontFaceSupported() from Modernizr git, to check if browser supports font-face * @uses TypeHelpers.hasSmoothing() to check if font-smoothing is enabled on OS */ function doFontface(browserinfo) { if(browserinfo.opera && browserinfo.version < 10 ) return; isFontFaceSupported.ready(function(is_ff_supported) { if(is_ff_supported) { var is_smoothing_on = TypeHelpers.hasSmoothing(); var htmlelement = document.getElementsByTagName('html')[0]; if (is_smoothing_on == true) { // we can use urchinTracker('/downloads/stuff'); to log it and make some stats if(!browserinfo.webkit) { myAddClass(htmlelement, 'useff'); } else { if(browserinfo.chrome) { myAddClass(htmlelement, 'useff'); } else { //alert('its safari'); myAddClass(htmlelement, 'useff-ttf'); } } // this makes IE crawl and IE6 hang! // if(browserinfo.msie) { // myAddClass(htmlelement, 'ieantialias'); // } } else if (is_smoothing_on == false) { // do nothing } else { // result == null //alert('can\'t be detected'); myAddClass(htmlelement, 'useff-ttf'); // for Safari } } }); // // if @font-face isn't supported OR anti-aliasing is off // if(!is_ff_supported || is_smoothing_on == false) { // //if @font-face isn't supported, employ Cufón // $.getScript('/js/museo-cufon.js', function() { // Cufon.replace(useregfont, {fontFamily: 'Museo 500'}); // Cufon.replace(useboldfont, {fontFamily: 'Museo 700'}); // Cufon.now(); // }); // } } /** * Detect the browser and execute the doFontface function */ var browser = []; var ua = navigator.userAgent; browserMatch = uaMatch(ua); if ( browserMatch.browser ) { browser[ browserMatch.browser ] = true; browser.version = browserMatch.version; } // check if its Google Chrome browser.chrome = /chrome/.test(ua.toLowerCase()); // run the font-face function doFontface(browser);