新しくなったフォローボタンを使ってみた

Twitterのフォローボタンが新しくなりました。

【javascript】googleFontAPIで日本語フォントを使う

Twitterのテキストを美咲フォントにするHatena::Letを作ってみました。

実験には8*8ドット日本語フォント「美咲フォント」を使わせていただきました。

いろいろ試した結果必要になったファイル a. ttfファイル b. @font-faceが書いてあるcss(これはcを読み込む) c. aからfontを直接読むと認識されなかったのでヘッダつけてaをreadfileするphp

bのソース

@font-face {
  font-family: 'Misaki';
  font-style: normal;
  font-weight: normal;
  src:local('Misaki'), url('フォントになりすますphp') format('truetype');
}
/*

http://www.geocities.jp/littlimi/misaki.htm

美咲フォント アウトライン試作版 ライセンス</p>

<p>These fonts are free softwares.
Unlimited permission is granted to use, copy, and distribute it, with or without modification, either commercially and noncommercially.
THESE FONTS ARE PROVIDED "AS IS" WITHOUT WARRANTY.</p>

<p>これらのフォントはフリー(自由な)ソフトウエアです。
あらゆる改変の有無に関わらず、また商業的な利用であっても、自由にご利用、複製、再配布することができますが、全て無保証とさせていただきます。 
*/

cのソース

< ?
  header('Content-type: font/ttf');
  header('Content-Disposition: attachment; filename="font.ttf"');
  header('Access-Control-Allow-Origin: *');
  readfile("フォントファイル名");
?>

これらを用意してHatena::Letで以下のソースを書いた。

/*
 * @title Twitterのテキストを美咲フォントにする
 * @description TwitterのフォントをGoogle Font APIを使って変更します。
 * @include http://twitter.com/
 * @license MIT License
 * @require http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js
 * @require http://www.google.com/jsapi
 * @require http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js
 <em>/
if(location.href.indexOf('http://twitter.com/') != -1){
WebFont.load({
  custom: {
    families: ['Misaki'],
    urls:['http://lab.slackl.info/font/MisakiGothic_Outline.css']
  },
  loading: function(){
    alert("読み込みます...");
  },
  active: function(){
    $("</em>").css({
      "font-family":"Misaki",
      "font-size":"12pt"
    });
  }
});
}

っていうか日本語は1メガとかあるから重いなぁ・・・ 転送量やばそう。 いつか消しちゃうかも。