2013年2月27日水曜日

webフォントをスクリプトから取得する

先ほどのcanvas要素にwebフォントを確実に描画する方法を編み出す際の副産物．勿体ないので供養．blobでフォントを拾ってくるので，色々と使い途が有るかもしれない．ないかもしれない．

面倒なので（疲れたので）説明なし．コードを見て感じるんだ！多分operaでは動かない．
<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
 <script type="text/javascript">
window.onload = function(){
 var xhr = new XMLHttpRequest();
 xhr.open("POST", "http://themes.googleusercontent.com/static/fonts/chelaone/v1/DHUBEAsCcSRMyWTJ6sisfj8E0i7KZn-EPnyo3HZu7kw.woff", true);
 xhr.responseType = "blob";
 xhr.onload = function(){
  if(this.status == 200){
   var blob = this.response;
   var URL = window.URL || window.webkitURL;
   var style = document.createElement("style");
   style.textContent = "@font-face {font-family: 'Chela One'; src:url(" + URL.createObjectURL(blob) + ") format('woff');}";
   document.head.appendChild(style);
  }
 }
 xhr.send();
}
 </script>
 </head>
 <body>
  <span style="font-size:50px;font-family:'Chela One'">It's web fonts!</span>
 </body>
</html>
時刻:
ラベル: , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)