| 属性名 | font-optical-sizing |
|---|---|
| 値 | auto | none |
| 初期値 | auto |
| 適用可能要素 | すべての要素およびテキスト |
| 継承 | 継承する |
| サポート | https://caniuse.com/css-font-optical-sizing |
フォントの光学的サイジングを行うか否かを指定します。デフォルトは行う設定になっています。ブラウザは、フォントを読みやすくするために小さな文字は幅を少し広げたり、大きなフォントは幅をすこし狭めたりなど見栄えの自動調整を行います。この調整はフォントが opsz というプロパティをサポートしている場合に可能です。font-optical-sizing に none を指定することによりこの自動制御を抑制することができます。
下記の例では opsz をサポートする Roboto Flex Variable フォントを利用しています。小さな文字では横幅を少し広げる自動調整が行われており、none を指定すると少し狭くなります。大きなフォントでは逆に横幅を少し狭くする自動調整が行われており、none を指定すると少し広くなります。
@font-face {
font-family: 'Roboto Flex Variable';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url(https://cdn.jsdelivr.net/fontsource/fonts/roboto-flex:vf@latest/latin-opsz-normal.woff2)
format('woff2-variations');
unicode-range: U+0000-00FF;
}
.my-example {
font-family: 'Roboto Flex Variable';
}
<div class="my-example" style="font-size:9px">This is Japan.</div> <div class="my-example" style="font-size:9px; font-optical-sizing:none;">This is Japan.</div> <div class="my-example" style="font-size:32px">This is Japan.</div> <div class="my-example" style="font-size:32px; font-optical-sizing:none;">This is Japan.</div>