フォントの種類を変更するjavascript「fontSelector.js」

ホームページを作成する時に悩むのがフォントの種類。
見る環境や人によって最良のフォントは変わってきますので、非常に難しいところです。
justinmaierでは、Web上でフォントの種類を変更できる「fontSelector.js」を公開しています。

使用方法

fontSelector.jsからfontSelector.jsを、mootoolsからmootools.jsをダウンロードし、headに挿入します。
<script src="http://yourdomain/mootools.js" type="text/javascript"></script>
<script src="http://yourdomain/fontSelector.js" type="text/javascript"></script> さらに以下のscriptを挿入します。
<script type="text/javascript">
window.onDomReady( function(){
var fSelector = new fontSelector($$('対象となるエレメント'), {fontList: ['Arial','Times new roman','Century Gothic']});
});
</script>
またstyle属性として
div.fontSelection-sBoxExpander{
background: url(expander.gif) top left no-repeat;
}
div.fontSelection-sBoxExpander.active{
background: url(expander_act.gif) top left no-repeat;
}
を指定してください。

サンプル

このページではh1,h2,h3,p,codeを指定しています。
またフォントは'Arial','Times new roman','Century Gothic','Trebuchet MS','Helvetica','sans-serif','Verdana','ＭＳ Ｐゴシック'です。
日本語を中心に対象外のフォントがあるようです。
対象エレメントをクリックするとフォント変換用のスライダーが表示されます。

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

Javascriptサンプルページ一覧
skuare.net