Skip to content

Instantly share code, notes, and snippets.

@houkanshan
Created December 18, 2014 14:56
Show Gist options
  • Save houkanshan/67b759bf16ac6fcda34b to your computer and use it in GitHub Desktop.
Save houkanshan/67b759bf16ac6fcda34b to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
@font-face {
font-family: 'arkpunctuation';
src: url("/iconic-punctuation/DroidSerif.eot");
src: url("/iconic-punctuation/DroidSerif.eot#iefix") format('embedded-opentype'), url("/iconic-punctuation/DroidSerif.woff") format('woff'), url("/iconic-punctuation/arkpunctuation_v2.ttf") format('truetype'), url("/iconic-punctuation/arkpunctuation_v2.svg#arkicons") format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'arial'
}
.font {
font-family: 'arkpunctuation', 'arial';
}
</style>
</head>
<body>
<div>abce</div>
<span id="tester">“”abce——</span>
<iframe id="iframe" height=1 width=1> </iframe>
<script>
var element = document.getElementById("tester");
function apply() {
a = element.offsetWidth;
element.className = 'font';
b = element.offsetWidth;
setTimeout(function() {
c = element.offsetWidth;
alert(a + ',' + b + ',' + c);
}, 5000)
}
request = new XMLHttpRequest();
request.open('GET', '/iconic-punctuation/DroidSerif.woff', true);
request.onreadystatechange = function() {
if (this.readyState === 4){
if (this.status >= 200 && this.status < 400){
apply()
} else {
alert('error')
}
}
};
request.send();
request = null;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment