Webフォント(@font-face)や均等割付(text-align: justify;)、日本語と英語の間のスペース調節(text-autospace)などCSS3では文字や文章に関わる表現力も大きく向上している。とはいうもののないものはないので、親要素の幅にちょうど収まるようにフォントを拡大、つまりimg要素にwidth: 100%;を指定した時のようにはCSSではできない(少なくとも思いつかなかった)。というわけでふんだんにjQueryを利用したJavaScriptでどうにかしてみた。 Demo: Resize Font Based on Content Width #6 フォントレンダリングの関係上、Firefoxの方が綺麗なのでスクリーンショットはFirefoxで撮影した。 $(window).load(function () { var start = $.now(); $(
![親要素の幅に収まるようにフォントサイズを変更する - ウェブログ - Hail2u.net](https://cdn-ak-scissors.b.st-hatena.com/image/square/ec51cb4e6c545f747e6c11b6cc91f5243971d8ee/height=288;version=1;width=512/https%3A%2F%2Fhail2u.net%2Fimg%2Fblog%2Fresize-text-based-on-content-width.png)