Initial commit

parents
.DS_Store
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-gb" xml:lang="en-gb">
<head>
<title>Example usage:jquery.font.js</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-gb" />
<meta name="robots" content="all" />
<meta http-equiv="imagetoolbar" content="false" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="author" content="Ben Sekulowicz-Barclay" />
<meta name="Copyright" content="Copyright (c) 2009" />
<meta name="description" content="jQuery plugin allowing you to test for installed fonts on the client side. Written by Ben Sekulowicz-Barclay, (www.beseku.com)" />
<meta name="keywords" content="jquery, plugin, font, typography, beseku" />
<!-- JS -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.font.mini.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('body > ol > li').each(function() {
$(this).css('backgroundColor', ($.font.test($(this).css('font-family')))? "#D1FFD1": "#FFD1D1");
});
});
</script>
<!-- CSS -->
<style type="text/css">
body {
background:#FFFFFF;
color:#393939;
font-size:62.5%;
margin:0;
padding:0;
}
body ol {
font:normal normal 200 1em/3em Georgia, Serif;
list-style:none;
margin:3em 3em 0;
padding:0;
text-indent:none;
}
body ol li {
border: solid 0.05em #C6C6C6;
font-size:2em;
line-height:1.5em;
margin:0 0 1.5em;
padding:0.75em;
}
</style>
</head>
<body>
<ol>
<li style="font-family:'ACaslonPro-Regular','Adobe Caslon Pro';">Adobe Caslon Pro</li>
<li style="font-family:'AGaramondPro-Regular','Adobe Garamond Pro';">Adobe Garamond Pro</li>
<li style="font-family:'AJensonPro-Regular','Adobe Jenson Pro';">Adobe Jenson Pro</li>
<li style="font-family:'AvantGarde-CondBold','AvantGarde','Avant Garde';">Avant Garde</li>
<li style="font-family:'AmericanTypewriter','American Typewriter';">American Typewriter</li>
<li style="font-family:'AndaleMono','Andale Mono';">Andale Mono</li>
<li style="font-family:'ArialMT','Arial';">Arial</li>
<li style="font-family:'Baskerville';">Baskerville</li>
<li style="font-family:'Calibri';">Calibri</li>
<li style="font-family:'Cambria';">Cambria</li>
<li style="font-family:'Candara';">Candara</li>
<li style="font-family:'ClarendonBT-Roman','Clarendon','Clarendon BT';">Clarendon BT</li>
<li style="font-family:'Classic-Roman','Classic','Classic Regular';">Classic</li>
<li style="font-family:'CooperBlackStd','Cooper Std';">Cooper Std</li>
<li style="font-family:'CourierNewPSMT','Courier New';">Courier New</li>
<li style="font-family:'DIN-Bold';">DIN-Bold</li>
<li style="font-family:'DIN-Light';">DIN-Light</li>
<li style="font-family:'DIN-Regular';">DIN-Regular</li>
<li style="font-family:'Futura';">Futura</li>
<li style="font-family:'Garamond';">Garamond</li>
<li style="font-family:'GaramondPremrPro','Garamond Premier Pro';">Garamond Premier Pro</li>
<li style="font-family:'Georgia';">Georgia</li>
<li style="font-family:'GillSans','Gill Sans';">Gill Sans</li>
<li style="font-family:'HelveticaCYBold','Helvetica CY','Helvetica CY Bold';">Helvetica CY Bold</li>
<li style="font-family:'LucidaGrande','Lucida Grande';">Lucida Grande</li>
<li style="font-family:'MarkerFelt-Thin','Marker Felt','Marker Felt Thin';">Marker Felt Thin</li>
<li style="font-family:'MyriadPro-Regular','Myriad Pro';">Myriad Pro</li>
<li style="font-family:'Palatino-Roman','Palatino';">Palatino</li>
<li style="font-family:'PanicSans','Panic Sans';">Panic Sans</li>
<li style="font-family:'Silkscreen';">Silkscreen</li>
<li style="font-family:'SketchRockwell','Sketch Rockwell';">Sketch Rockwell</li>
<li style="font-family:'STHeiti';">STHeiti</li>
<li style="font-family:'Times-Bold','Times','Times Bold';">Times Bold</li>
<li style="font-family:'TimesNewRomanPSMT','Times New Roman';">Times New Roman</li>
<li style="font-family:'Verdana';">Verdana</li>
<li style="font-family:'Zapfino';">Zapfino</li>
</ol>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-gb" xml:lang="en-gb">
<head>
<title>Example usage:jquery.font.js</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-gb" />
<meta name="robots" content="all" />
<meta http-equiv="imagetoolbar" content="false" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="author" content="Ben Sekulowicz-Barclay" />
<meta name="Copyright" content="Copyright (c) 2009" />
<meta name="description" content="jQuery plugin allowing you to test for installed fonts on the client side. Written by Ben Sekulowicz-Barclay, (www.beseku.com)" />
<meta name="keywords" content="jquery, plugin, font, typography, beseku" />
<!-- JS -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.font.mini.js"></script>
<script type="text/javascript">
function getClass(s) {
// Loop through our JSON object ...
$(s).each(function() {
// If the supplied family is present ...
if ($.font.test(this.font)) {
// Assign our class variable to this class
c = this.body;
// Stop the iterator here
return false;
}
});
// Send back the class
return (typeof(c) != 'undefined')? c: '';
}
$(document).ready(function() {
// Create a JSON object listing our font-families, ordered by priority
var test =
[{
"body":"kolo",
"font":"'ACaslonPro-Regular','Adobe Caslon Pro'"
},{
"body":"theo",
"font":"'AGaramondPro-Regular','Adobe Garamond Pro'"
},{
"body":"cesc",
"font":"'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue'"
}];
// Get the <body> class, if its changed
var new_class = getClass(test);
// Apply the class to the <body>
$('body').addClass(new_class);
});
</script>
<!-- CSS -->
<style type="text/css">
body {
background:#FFFFFF;
color:#393939;
font-size:62.5%;
margin:0;
padding:0;
}
body.kolo {
background:#FF0000;
color:#FFFFFF;
}
body.theo {
background:#00FF00;
color:#FFFFFF;
}
body.cesc {
background:#0000FF;
color:#FFFFFF;
}
p {
font:normal normal 200 1.6em/1.5em Georgia, Serif;
margin:1.5em auto 1.5em;
padding:0;
width:37.5em;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-gb" xml:lang="en-gb">
<head>
<title>Example usage:jquery.font.js</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-gb" />
<meta name="robots" content="all" />
<meta http-equiv="imagetoolbar" content="false" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="author" content="Ben Sekulowicz-Barclay" />
<meta name="Copyright" content="Copyright (c) 2009" />
<meta name="description" content="jQuery plugin allowing you to test for installed fonts on the client side. Written by Ben Sekulowicz-Barclay, (www.beseku.com)" />
<meta name="keywords" content="jquery, plugin, font, typography, beseku" />
</head>
<body>
<ol>
<li><a href="example1.html">Example #1</a> &ndash; A list of commonly installed fonts, using the jquery.font.js plugin to ascertain and indicate whether they are available to the user or not.</li>
<li><a href="example2.html">Example #2</a> &ndash; Applying a different <code><body></code> class, using the jquery.font.js plugin to ascertain whether a particular set of fonts is available.</li>
</ol>
</body>
</html>
\ No newline at end of file
/*!
* jquery.font
* http://www.beseku.com/2009/04/22/detecting-installed-fonts-with-jquery/
*
* Copyright (c) 2009 Ben sekulowicz-Barclay
*
* Date: 2009-05-06 (Wed, 06 May 2009)
* Revision: 1.1
*/
jQuery.font = {
test: function(user_family, base_family, user_weight, base_weight) {
// Define our defaults
var base = {family:'monospace', weight:'400'};
var user = {family:'monospace', weight:'400'};
// Overwrite our defaults with user supplied values, if required...
base.family = (typeof(base_family) != 'undefined')? base_family: base.family;
base.weight = (typeof(base_weight) != 'undefined')? base_weight: base.weight;
user.family = (typeof(user_family) != 'undefined')? user_family: user.family;
user.weight = (typeof(user_weight) != 'undefined')? user_weight: user.weight;
// Insert our test paragraph
$('body').prepend('<p id="jQuery-Font-Test" style="font-family:' + base.family + ';font-size:72px;font-weight:' + base.weight + ';height:auto;left:-9999px;position:absolute;top:-9999px;visibility:hidden;width:auto;">The quick brown fox jumps over a lazy dog.</p>');
// Get our test paragraph's dimensions
var baseX = $('p#jQuery-Font-Test').width();
var baseY = $('p#jQuery-Font-Test').height();
// Update our test paragraph with the user supplied family.weight
$('p#jQuery-Font-Test').css({
'font-family': (user.family + ',' + base.family),
'font-weight': user.weight
});
// Get our test paragraph's dimensions, (again)
var userX = $('p#jQuery-Font-Test').width();
var userY = $('p#jQuery-Font-Test').height();
// Remove our test paragraph
$('p#jQuery-Font-Test').remove();
// If the dimensions change, the font has changed(!)
return(((userY != baseY) || (userX != baseX))? true: false);
}
};
\ No newline at end of file
/*!
* jquery.font
* http://www.beseku.com/2009/04/22/detecting-installed-fonts-with-jquery/
*
* Copyright (c) 2009 Ben sekulowicz-Barclay
*
* Date: 2009-05-06 (Wed, 06 May 2009)
* Revision: 1.1
*/
jQuery.font={test:function(user_family,base_family,user_weight,base_weight){var base={family:'monospace',weight:'400'};var user={family:'monospace',weight:'400'};base.family=(typeof(base_family)!='undefined')?base_family:base.family;base.weight=(typeof(base_weight)!='undefined')?base_weight:base.weight;user.family=(typeof(user_family)!='undefined')?user_family:user.family;user.weight=(typeof(user_weight)!='undefined')?user_weight:user.weight;$('body').prepend('<p id="jQuery-Font-Test" style="font-family:'+base.family+';font-size:72px;font-weight:'+base.weight+';height:auto;left:-9999px;position:absolute;top:-9999px;visibility:hidden;width:auto;">The quick brown fox jumps over a lazy dog.</p>');var baseX=$('p#jQuery-Font-Test').width();var baseY=$('p#jQuery-Font-Test').height();$('p#jQuery-Font-Test').css({'font-family':(user.family+','+base.family),'font-weight':user.weight});var userX=$('p#jQuery-Font-Test').width();var userY=$('p#jQuery-Font-Test').height();$('p#jQuery-Font-Test').remove();return(((userY!=baseY)||(userX!=baseX))?true:false);}};
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment