CSS - font-optical-sizing

• トップ
• CSSリファレンス
• font-optical-sizing

概要

説明

フォントの光学的サイジングを行うか否かを指定します。デフォルトは行う設定になっています。ブラウザは、フォントを読みやすくするために小さな文字は幅を少し広げたり、大きなフォントは幅をすこし狭めたりなど見栄えの自動調整を行います。この調整はフォントが opsz というプロパティをサポートしている場合に可能です。font-optical-sizing に none を指定することによりこの自動制御を抑制することができます。

auto

光学的サイジングを行います。デフォルト値です。

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>

リンク

• https://drafts.csswg.org/css-fonts/#font-optical-sizing-def
• https://developer.mozilla.org/en-US/docs/Web/CSS/font-optical-sizing
• https://caniuse.com/mdn-css_properties_font-optical-sizing