[JS]親要素のサイズに合わせてフォントサイズをフィットさせるスクリプト -FitText

フォントを配置した親要素のサイズに合わせて、フォントサイズをフレキシブルにフィットさせるjQueryのプラグインを紹介します。
※ブラウザのサイズ、ディスプレイのサイズ・解像度に合わせて、ではありません。

FitText - A plugin for inflating web type
デモページ

[ad#ad-2]

デモでは、width=100%で実装された「FitText」とその下のダウンロードに適用されており、それぞれ親要素のサイズが変更されると共に、フォントサイズが変更されます。

サイズを変更したキャプチャ

h1要素のwidthを「100%」にしているため、ブラウザのサイズを変更するとフォントのサイズも追従します。

FitTextの実装

下記は、デモ（h1要素とダウンロード）での実装例です。

HTML

<header>
	<h1>FitText</h1>
	<p class="download">A jQuery plugin for inflating web type <a href="https://github.com/davatron5000/FitText.js">Download on Github</a></p>
</header>

外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして指定します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>

JavaScript

jQueryのセレクタを使用して、フォントサイズをフィットさせる親要素を指定します。

<script type="text/javascript">
	$("h1").fitText(0.273);
	$(".download").fitText(2);
</script>

サイズはデフォルトではエレメントの幅の1/10で、数値を大きくすることでより縮み（.download）、小さくすることであまり縮みません（h1）。

[ad#ad-2]

実装時のポイント

• 親要素の幅には100%をセットしてください。
• フォントサイズを設定した場合、最大値のように振る舞います。
• 「Lettering.js」と一緒に使うと、更に面白い効果が得られます。

参考：HTMLファイルを汚さずに細かい設定でspanを挿入できるスクリプト -Lettering.JS