memocarilog

10px 以下という小さいフォントサイズを指定する機会は頻繁にないかもしれませんが、遭遇した時に少し手こずったので、IE9 以下のオールドブラウザとその他のモダンブラウザとで 10px 以下のフォントサイズを同じように表示する方法を考えてみました。

10px 以下のフォントサイズ指定ができない Google Chrome

Google Chrome は、デフォルト設定で 10px 以下のフォントサイズは表示されないようになっており、8px などの小さいフォントサイズを指定した場合は全て 10px で表示されてしまいます。そこで、transform プロパティの scale() をつかい「縮小する」という方法で小さいフォントサイズを表示します。

Google Chrome 以外でも共通の見た目に

最近では transform プロパティが解釈できるブラウザも増えており（Can I use… Support tables for HTML5, CSS3, etc）、というよりも Opera Mini と IE8 以外では transform プロパティを解釈できるので、10px 以下のフォントサイズを指定する場合、transform で縮小表示をし、それに対応してない IE8 には補うものを指定という方が、共通の見た目に近づけるためにはよいかなと思いました。

具体的な CSS コードとサンプル、コードの解説

「transform プロパティで縮小表示、それに対応してない IE8 には補うものを指定」という手法で、8px を指定したい場合の具体的なコードは以下のようになります。

.sample{
    width: 150%;
    font-weight: 500;
    font-size: 10px;
    -webkit-transform: scale(0.8);
    -webkit-transform-origin: 0% 0%;
    -ms-transform: scale(0.8);
    -ms-transform-origin: 0% 0%;
    transform: scale(0.8);
    transform-origin: 0% 0%;
    zoom: 0.8;
}
.sample:not(:target){
    zoom: 1;
}

サンプル

サンプルも作りました。上段が font-size 、下段が transform: scale でフォントサイズを調整したものです。各ブラウザでの表示キャプチャは「ページ最後」にまとめました。

◆ 10px 以下のフォントサイズを指定する demo｜memocarilog

コードの解説

.sample{
    font-size: 10px;
    // ↑ まず、縮小の基本となるフォントサイズを指定します。
    font-weight: 500;
    // ↑ 縮小すると、フォントのウェイトも細くなってしまうため、
    // 少し太めの太さを指定します。
    -webkit-transform: scale(0.8);
    -webkit-transform-origin: 0% 0%;
    -ms-transform: scale(0.8);
    -ms-transform-origin: 0% 0%;
    transform: scale(0.8);
    transform-origin: 0% 0%;
    // ↑ IE9+ とその他のブラウザ用に、8（px）× 0.1を指定します。
    // transform-origin で縮小の起点を指定します。0% 0% だと左0 上0 を起点に縮小します。
    width: 150%;
    // ↑ ボックスの横幅も縮小されるので、100% 以上の数値を指定して横幅を調整します。
    zoom: 0.8;
    // ↑ IE8 用の拡大指定です。
    // zoom は IE5.5〜IE9 でのみ解釈されます。
}
.sample:not(:target){
    zoom: 1;
    // ↑ IE9 には zoom の拡大指定も効いてしまう為、 zoom をリセットします。
    //:not(:target) は IE9 のみが解釈するハックです。
}

サンプルを各ブラウザで表示したキャプチャ画像

Google Chrome

※Google Chrome では上段のフォントサイズが 10px で表示されています。

Fire Fox

Safari

IE9

IE8

わりと共通の見た目が実現できているのではないかなと思います。

いつの間にか transform プロパティが使えるブラウザが多くなっていてブラウザの進化を感じます。IE8 もそのうち消え去ることですし、CSS3 の活用範囲もどんどん広がっていきますね。