font-synthesis-small-caps

Baseline 2023
Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

font-synthesis-small-caps は CSS プロパティで、フォントファミリーにスモールキャップの書体がない場合に、ブラウザーがスモールキャップの書体を合成するかどうかを指定します。スモールキャップの字体は通常、大文字の形状を使用しますが、小文字のサイズに縮小されます。

すべての書体合成値を制御するために、多くの場合は一括指定プロパティ font-synthesis を使用した方が便利です。

構文

css
/* キーワード値 */
font-synthesis-small-caps: auto;
font-synthesis-small-caps: none;

/* グローバル値 */
font-synthesis-small-caps: inherit;
font-synthesis-small-caps: initial;
font-synthesis-small-caps: revert;
font-synthesis-small-caps: revert-layer;
font-synthesis-small-caps: unset;

値

auto

不足しているスモールキャップの書体は、必要に応じてブラウザーが合成する可能性があることを示します。

none

不足しているスモールキャップの書体のブラウザーによる合成が許可されていないことを示します。

公式定義

初期値auto
適用対象すべての要素とテキスト。 ::first-letterおよび::first-line にも適用されます。
継承あり
計算値指定通り
アニメーションの種類離散値

形式文法

font-synthesis-small-caps = 
  auto  |
  none

例

スモールキャップの書体の合成の無効化

この例は、 Montserrat フォントでブラウザーによるスモールキャップの書体の合成をオフにすることを示しています。

HTML

html
<p class="english">
  これは既定の <span class="small-caps">small-caps</span>,
  <strong>bold</strong>, <em>oblique</em> の書体です。
</p>

<p class="english no-syn">
  <span class="small-caps">small-caps</span> の書体はオフになりましたが、 <strong>bold</strong> と <em>oblique</em> の書体はそうではありません。
</p>

CSS

css
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

.english {
  font-family: "Montserrat", sans-serif;
}
.small-caps {
  font-variant: small-caps;
}
.no-syn {
  font-synthesis-small-caps: none;
}

結果

仕様書

Specification
CSS Fonts Module Level 4
# font-synthesis-small-caps

ブラウザーの互換性

BCD tables only load in the browser

関連情報