昨日コーディングして詰まったところ
なんか、クロームだと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画像でも用意した方がいいと思う。その方が不具合起きないし。
以上