デザイナー写真のテキストが10pxの場合、Webページに実装します。デザイナーが私たちに戻ってきて、「このフォントをもっと小さくできないか?」と尋ねることがよくあります。私がデザインしたのは10px?なぜ 12px なのでしょうか? 実際、Google Chrome の最小フォント サイズは 8px または 10px に設定しても、ブラウザには 12px しか表示されないことは誰もが知っています。では、この不正行為の問題を解決するにはどうすればよいでしょうか?解決策を見てみましょう！
私たちのアプローチは次のとおりです: Google Chrome カーネルの場合、Webkit プレフィックスを追加し、transform:scale()
属性
を使用してスケーリングします。
コードデモ: <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
font-size: 12px;
display: inline-block;
-webkit-transform:scale(0.8);
}
</style>
</head>
<body>
<span>测试10px</span>
</body>
</html>ログイン後にコピー
上記は、Chrome サポートテキストを HTML で 12px より小さくする方法です。すべてのコンテンツについては、このサイトにアクセスしてください検索!
関連する推奨事項:
CSS スクロール バー スタイルは IE8 および Chrome ブラウザーとどのように互換性がありますか? HTMLのテキストの最後の行が不完全に表示される場合の対処方法以上がChrome が HTML で 12 ピクセルより小さいテキストをサポートするようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
