まえがき

デザイン重視で読みやすさなんて無視！ってサイトはよくあります。この前そういうサイトを「こんな文字小さかったら誰も読めないだろ」とか思いながらコーディングしていたら驚愕の事実を知りました。

CSSでfont-sizeを10pxより小さくしてもGoogle Chromeでは10px以下にならない！

デザインにうるさい人に「いや～ブラウザの仕様で文字の大きさこれ以上小さくならないんすよ」とか言ったって分かってもらえるわけありません。

結果、どうにかなったのですが解決するまで地味に時間かかったので他の人が同じ轍を踏まないように記事にします。

「-webkit-transform」を使用してChromeだけ文字を無理やり縮小する

CSS3のプロパティ「transform」は要素の移動、拡大縮小、回転なんかを制御できる優れものです。
その「transform」を使って10pxの文字を丁度いい位に縮小してやろうという考え方です。
なおかつChromeに効かせるために「-webkit-」ベンダープレフィックスを使用するのが一般的でしょう。
具体的に指定するコードはこんな感じ

HTML

<p class="smallfont">ここの文字を10px以下にしたい</p>

CSS

.smallfont{
    font-size:8px;
    -webkit-transform: scale(0.9);
    -webkit-transform-origin:0 0;
    }

「-webkit-transform」で要素を90%の大きさに縮小しています。
更に「-webkit-transform-origin」で縮小の基準点を左上(0,0)に設定しています。
基準点を左上に持ってきた場合は、縮小される分widthで横幅を指定してあげたりすることになると思います。
この辺は、状況に合わせて臨機応変に対応してください。

ここで問題なのは、「-webkit-」ベンダープレフィックスはwebkit系のブラウザ全部に効いてしまいます。
即ちsafariにまで効いてしまう。
なので完全にChromeだけに効かせたい場合は下記のスクリプトを使用します。

『CSS Browser Selector』

使い方はこの記事にめっちゃ詳しく書いてます。
『CSS Browser Selector』

で「CSS Browser Selector」を使用したコードはこうなります。

.smallfont{
	font-size:8px;
    }
.chrome .smallfont{
    -webkit-transform: scale(0.9);
    -webkit-transform-origin:0 0;
    }

これでChromeで文字が10px以下にならない問題は解決できるはずです。

まとめ

Chromeで文字が10px以下にならない問題を解決するのに一番苦労したのは「-webkit-transform-origin」を使用するというところ。
色んな記事調べたけど「-webkit-transform-origin」のことは書かれてなかったです。
「-webkit-transform-origin」を指定しないと、縮小の基準点が要素の真ん中になってしまうので
上下左右に余白が空くことになります。
それが都合が悪いときは「-webkit-transform-origin」を指定して基準点を設定しなおしてやる必要があるのです。

他の記事では「-webkit-margin-start: -10px;」とか指定して開始位置を無理やりずらしたりしていますが、「-webkit-transform-origin」を指定したほうが理にかなっているように感じます。

蛇足ですが、以前はbodyに「-webkit-text-size-adjust: none;」を指定してChromeのフォントサイズ自動調整を回避してたみたいですね。

.body {
    -webkit-text-size-adjust: 100%;
    }

でもChromeのバージョン27.0.1453.93 mより「-webkit-text-size-adjust」自体が削除されてしまったようです。

-webkit-text-size-adjustはこれまで規格どおりに動作しておらず、意図しない有害な使われ方が蔓延してしまったので削除されました。

引用元：https://productforums.google.com/forum/#!topic/chrome-ja/7Y2r_dYFWrg

一つ言えるのは、読みづらい文字サイズを利用するのは止めましょう。ということです。