Skip to content

Instantly share code, notes, and snippets.

@joshje

joshje/supportsFFS.html

Created June 21, 2012 11:02
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joshje/2965134 to your computer and use it in GitHub Desktop.
Save joshje/2965134 to your computer and use it in GitHub Desktop.
Download ZIP
CSS font-feature-settings support detection
Raw
supportsFFS.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Opentype Test</title>
<style>
span.opentype-test {
font-family: Corbel;
font-size: 100px;
position: absolute;
visibility: hidden;
}
span.opentype-test.test {
-moz-font-feature-settings: 'tnum=1';
-webkit-font-feature-settings: 'tnum' 1;
-moz-font-feature-settings: 'tnum' 1;
-ms-font-feature-settings: 'tnum' 1;
-o-font-feature-settings: 'tnum' 1;
font-feature-settings: 'tnum' 1;
}
</style>
<script>
supportsFFS = function() {
var span = document.createElement('span');
span.appendChild(document.createTextNode('1'));
span.className = 'opentype-test';
document.getElementsByTagName('html')[0].appendChild(span);
var controlWidth = span.offsetWidth;
span.className += ' test';
var testWidth = span.offsetWidth;
document.getElementsByTagName('html')[0].removeChild(span);
return (controlWidth != testWidth)? true : false;
}
document.write(supportsFFS()? 'I support font-feature-settings :-)' : 'I don&lsquo;t support font-feature settings :-(');
</script>
</head>
<body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment