CSS - font-synthesis-small-caps

概要

属性名	font-synthesis-small-caps
値	auto \| none
初期値	auto
適用可能要素	すべての要素およびテキスト
継承	継承する
サポート	https://caniuse.com/mdn-css_properties_font-synthesis-small-caps

説明

使用するフォントが、font-variant-caps で指定されたスモールキャプスフォント(小文字の高さの大文字フォント)をサポートしていない場合、利用可能なフォントから自動生成して表示するか否かをしていします。デフォルトでは自動生成します。

auto: ブラウザがスモールキャプスフォントをを自動生成して表示します。デフォルト値です。
none: ブラウザの自動生成を抑止します。

使用例

下記の例ではスモールキャプスをサポートしない Noto Sans JP フォントを読み込んでいます。最初の Japan はスモールキャプスフォントをブラウザが自動生成していますが、2番目の Japan は自動生成が抑止されています。

CSS

.my-example {
  font-family: "Noto Sans JP";
  font-variant-caps: small-caps;
  font-size: 32px;
}
.fss-none {
  font-synthesis-small-caps: none;
}

HTML

<head>
  ...
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap" rel="stylesheet">
  ...
</head>
<body>
  ...
<span class="my-example">Japan</span>
<span class="my-example fss-none">Japan</span>
  ...
</body>

表示

Japan Japan

リンク

初版：2025年2月9日、最終更新：2025年2月9日

https://www.tohoho-web.com/css/prop/font-synthesis-small-caps.htm

CSS - font-synthesis-small-caps

概要

説明

使用例

関連項目

リンク