Google は 12 ピクセルより小さいフォントをサポートしていません。究極のソリューション_html/css_WEB-ITnose

各ブラウザのメーカーには独自の設計の主観があり、これらの出発点は良いように見えるかもしれませんが、多くの場合、プログラマを深く傷つけます。

1. 要件

レンダリングは Google Chrome 用に指定されており、フォント サイズは 6 ～ 8 ピクセル (小さい印刷サイズの場合) です。

2.

2.1 CSS HACK を探索する

多くの Web ページを検索し、すべて 1 つの結果を示しました:

html

{      -webkit-text-size-adjust:none;}

上記のコードをドキュメントの先頭に置きます。 。 。

しかし、それはうまくいきません。 。 。その結果、口調が荒くなったり、顔を赤らめたり、凝視したりするなど、一連の否定的な反応が起こります。

2.2 Spring of CSS 3

たまたま CSS3 の機能について書かれた本を持ってきたのですが、その本をざっと読んだところ、次のような機能を見つけました。たとえば、上記のコードのスケーリングとは、div とそのサブ要素 (テキスト、フォント サイズを含む) の高さ (Y) を 80% に減らすことを意味します。

同様に、幅のスケーリング:scaleX(pre)、全体のスケーリングscale(pre)。

試してみると、確かに拡大・縮小が可能です。

ただし、HTML が次のような場合:

div {    transform:scaleY(0.8);}

すると、d1 と d2 の間に大きな空白ができます。この空白を削除するにはどうすればよいでしょうか。

2 つの鉄則:

<div id="d1">your text</div><div id="d2">your text2</div>

marin の負の値を使用して、外側のマージンを指定された方向、つまり要素全体に移動します。

内側のマージンを指定された方向に移動するには、padding の負の値を使用します。方向、つまり中括弧

その後、縮小されたテキストは変化しないので、効果は得られますか? Google ブラウザーでフォントを縮小し、通常どおり実行します。

3. まとめ

Transform は、実際には 2D 変換、3D 変換などを含むコンピューター グラフィックスの実装です。

基礎はとても大切です、どんな努力も無駄にはなりませんよ〜。