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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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

ブラウザーの互換性

関連情報