クロームでフォントが10px以下にならないっていう仕様

a0002_011891_m
昨日コーディングして詰まったところ

なんか、クロームだとfont-sizeで10px以下にしても、10pxになってしまう。
CSSでfont-size: 8pxとかにしても実際表示されるのは10px。

なんかクロームの設定でデフォルトがそうなってる

クロームのオプションのところを見ると、フォントの最小サイズを設定できる。個人設定で。
そこを個人が8pxとかにしていれば最小サイズが8pxになるし、個人が3pxとかにしていれば最小サイズが3pxになる。
しかし、ほとんどのユーザーはそこいじらないだろうなあ。
デザイン上では10px以下にしたい文字って結構ある。補足的な部分で。
そうする際の解決方法は2つ

倍率をいじる

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

こんな感じにすれば、実質9pxで表示される。
でも、これはこれで不具合が起きる。少し長い文章だと、意図しないところで改行が発生する。
font-size: 10pxの時に改行されるところで改行が発生する。
何故かというと、10pxの文字でできた文章ブロック全体を縮小かけてるから。
それじゃダメじゃんということになったので2つ目

画像を使う

結局こうなった。基本的に、10px以下の文字を使う場合は、それ用のpng画像でも用意した方がいいと思う。その方が不具合起きないし。

以上

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。名前及びコメントは必須項目、メールアドレス及びサイトURLは任意です。