Chromeでfont-sizeを10px以下に設定する方法

Chromeブラウザでは、CSSでfont-sizeを10px以下に設定しても、
ブラウザの設定で最小フォントサイズが決まっているため、10px(Default)以下にはならないようになっています。

今回は、Chromeでfont-sizeを10px以下に設定する2つの方法について整理しました。

ブラウザの設定を変更する

Chromeの設定 ⇒ 詳細設定 ⇒ フォントをカスタマイズの
「最小フォントサイズ」を変更すると設定したブラウザには問題なくフォントサイズが変更されます。

CSSにて変更する方法

webkit-transformのscale3dやscaleを利用して、既存の文字フォントサイズを0.x倍縮小することで、フォントをもっと小さく表示できます。

・scale3dを利用した例：
　12pxで設定すると6pxになります。

p{
  width: 200%;
  line-height: 200%;
  font-size: 12px;
  -webkit-transform: scale3d(0.5, 0.5, 1);
  -webkit-transform-origin: 0px 0px;
}

・scaleを利用した例：

p{
  font-size:9px;
  -webkit-transform:scale(0.75);
  display:inline-block;
}

参照したページ

http://mjj.logdown.com/posts/39967-set-css-font-size-less-than-12px-in
http://hai3.net/blog/2013/06/11/chrome-mini-font/
http://www.dotblogs.com.tw/shunnien/archive/2013/06/07/105380.aspx