JavaScriptはじめました。

JavaScriptはじめた初心者が日々精進するブログ。

Chromeのfont-size

Chromeでfont-sizeを10px未満に指定しても大きさは10pxになってしまうという問題があります。Chrome自体の設定を変えなくてはならなかったりでユーザーの設定に依存してしまいます。
ので、9px未満のQ数になるようにテストしてみます。

【結果はこんな感じ】

できました!
font-size:10pxの文字に「-webkit-transform: scale(数字);」でスケールを小さくし、「-webkit-transform-origin:数字 数字;」でスケール変更基準点を指定してあげるだけで問題なくいきました。

例えば「text-align:center;」で6pxの文字の場合

-webkit-transform: scale(0.6);
-webkit-transform-origin:50% 0;

「text-align:left;」で6pxの文字の場合

-webkit-transform: scale(0.6);
-webkit-transform-origin:0 0;

「text-align:right;」で6pxの文字の場合

-webkit-transform: scale(0.6);
-webkit-transform-origin:100% 0;

と設定してあげれば問題なく、6pxのQ数に設定することができます。