Chromeの最小フォントサイズ制限12pxに対する最終的な解決策

ウェブサイトを作成するユーザーの多くが、このような問題に遭遇すると思います。Chrome のデフォルトの最小フォント サイズは 12 ピクセルです (最新の英語版でもこの問題があります)。これは、中国語をより適切に表示するために Chrome によって設計されていますが、これにより、一部の上付き文字と下付き文字が大きくなりすぎて、ユーザー エクスペリエンスに影響します。私もHybid Appを開発していたときにこの問題に悩まされました。長い間Baiduを検索したところ、インターネット上の解決策はどれも驚くほど似通っていることがわかりました。解決策は2つしかありませんでした。

1-プレフィックスを使用してGoogle Chromeに適応する

html{
  -webkit-テキストサイズ調整:なし;
  }

HTML タグに以下の属性を追加します。しかし、ブラウザを開いてみると、これは役に立たないことがわかりました。後でこの属性は Chrome 27 以降で廃止されたことがわかりました。本当に迷惑です!

2-CSS3のtransformプロパティを使用する

<div class=""small-font>これはテキストの段落です</div>

.ミニフォント{
  フォントサイズ: 12px;
  -webkit-transform-origin-x: 0;
  -webkit-transform: スケール(0.90);
}

この方法は、CSS3 のスケーリング プロパティを使用して、テキスト全体のサイズを元のサイズの 0.9 倍に縮小します。ただし、欠点があります。テキストのサイズを縮小するだけで、テキストが占める領域を縮小することはできません。つまり、要素の幅と高さを縮小できないため、非常に不便です。

3- 最終解決策! ！ ！ ！ブラウザ設定から始める

最初の 2 つの方法を試したところ、うまくいかないことがわかりました。仕方なく、デバッグ用にモバイル エミュレーターを使用して、フォントを 10 ピクセル以下に設定できることがわかりました。そこで、Google Chrome 自体が最小フォント サイズを制限しているのではないかと考えました。 ? ?そこでブラウザを開いてゆっくり調べてみたところ、ついに治療法を見つけました。

1.ブラウザを開いて「設定」を見つけます

2. 「フォント」を検索する

3. 「フォントのカスタマイズ」をクリックします。

4. 「最小フォントサイズ」を10px以下に変更します（読みにくくなるため、8px未満にしないことを推奨します）。

5. その後、問題は解決しました。実は、Google Chrome 自体が最小フォント サイズ制限を設定していたためでした。その後、IE と Firefox でデバッグしたところ、フォントを 10px と 8px に設定できました。これにより、CSS コードの問題ではなく、Google Chrome の問題ではないかと疑うようになりました。

Chrome の最小フォントサイズ制限 12px の最終的な解決策に関するこの記事はこれで終わりです。Chrome の最小フォントサイズに関するより関連性の高い情報については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。