最近面接を受けていて、いくつか面白いことに出会いました。例えば、今日、面接の前に一通りの面接問題を解いてみたのですが、その中に面白い問題があり、以前見たことがなかったので記録しておこうと思いました：
<!-- chromeブラウザは12pxフォントサイズ未満を表示できず、すべて12pxとして表示される。どう解決すればよいか。 -->
確かに少し戸惑いました。以前コードを書くときに、このような状況に遭遇したことはありませんでしたが、質問された以上、解決策を考えなければなりません。
まず、以前の問題を思い出しました。0.5px のボーダーをどう実現するか、scale(0.5)を使うことで実現できます。これは css3 の新しいプロパティです。
そのため、その時はtransform:scale()を使って実現できると書きました。しかし、その後の面接中、面接官はこれらの問題については言及しませんでした。
家に帰って、食事を終え、パソコンのそばに座っていると、ふと思い出した問題があり、自分でテストしてみました：
<div style="font-size: 13px;">
テスト
</div>
<div style="font-size: 12px;">
テスト
</div>
<div style="font-size: 11px;">
テスト
</div>
本当にこのような問題が存在するとは、Chrome では 12px 未満のフォントが正常に表示されず、すべて 12px として表示されます。
それから、scale を使って属性を設定しました。
<div style="font-size: 13px;">
テスト
</div>
<div style="font-size: 12px;">
テスト
</div>
<div style="font-size: 11px;transform: scale(0.5);">
テスト
</div>
フォントは確かに自分が考えた程度まで再び縮小できますが、いくつかの欠点があります。すべての長さを持つ属性が縮小されてしまうため、例えば画像の div の長さは、本来は100%ですが、表示は元の半分になってしまいました。
このような問題が存在しますが、私の予測では、普段私たちが閲覧するウェブサイトには基本的に 12px 未満のフォントはないでしょう！少なくとも私は遭遇したことがありません。面接問題も、私たちがあまり知らない知識への対処を試験しているのだと思いますが、あまり珍しいことではなく、前に 0.5px、後に 12px、実際には大差ないです。
この問題に直面したとき、確かにscale()を使って処理し、その後、他の属性を慎重に設定して、より多くの欠点を避けるようにすることができます。