Fittyはテキストをスケールアップ、またはスケールダウンして親コンテナに完全にフィットさせることができるJSライブラリです。フレキシブル・レスポンシブなWebサイトには最適な機能ですね。
jQueryなどへの依存性もなし
下記ページから、Fittyの実際のデモ動作をチェックできます。
デモではコンテナ内にテキストがしっかりフィットした状態で収められています。レスポンシブにもなっているので、画面を縮小・拡大してみるとわかりますが、それに合わせてテキストも最適化されます。
パソコン、スマホ、タブレットと、さまざまなデバイスからの閲覧でもテキストを親コンテナにフィットさせた状態を維持したいという場面にはピッタリのライブラリですね。
ちなみに、jQueryなどへの依存性もなくファイル容量も軽量なのでサクサク動作します。セットアップも簡単なことから、手軽に実装できるのがグッドです。
フォントサイズは、min値・max値ともにオプションから指定することができます。主なオプション項目は、minSize、maxSize、multiLine、observeMutationsです。デフォルト値は、minSizeが16、maxSizeが512、multiLineがtrueです。minSizeとmaxSizeの単位はピクセルになります。
ほかにも、fitty.observeWindowやfitty.observeWindowDelayなどのオプションや、fitといったイベントなども用意されています。
動作は、モダンブラウザ、IE 10+でテスト済みとのこと。また、ライセンスはMITになります。
というわけで、親コンテナにテキストをしっかりフィットさせるレスポンシブにも対応したJSライブラリ「Fitty」のご紹介でした。Fittyの具体的な実装方法やダウンロードは、下記ページからどうぞ。
