- 最終更新日
- 記事公開日
「font-max-size」というCSSはないので、「min」で文字サイズの最大値を設定
![お客さん](https://www.css-rescue.com/wp-content/uploads/2021/05/guest.png)
font-max-sizeのような文字サイズ最大値を設定できるCSSってないの?
![隊員1号](https://www.css-rescue.com/wp-content/uploads/2021/05/profile.png)
残念ながらありません。
しかし、min()を使うことで最大文字サイズを設定することが可能です↓
#container {
max-width:960px;
}
#container p {
font-size:min(3.5vw, 2em);
}
<div id="container">
<p>文字</p>
</div>
![文字サイズの最大値が変わるアニメーション](https://www.css-rescue.com/wp-content/uploads/2021/05/font_anime.gif)
![font-sizeに対するmin()の解説](https://www.css-rescue.com/wp-content/uploads/2021/05/20210521-4-1024x256.jpg)
例えば「font-size:3.5vw」とだけ文字サイズを指定した場合、大画面ディスプレイでは、非常に大きな文字で表示されてしまいます。
そこで、containerで画面の最大幅を決めておき、今回のmin()で文字サイズを指定しておくと、レスポンシブできれいに収まります。