font-variant-capsプロパティ

font-variant-capsプロパティに指定できる値

font-variant-capsプロパティはOpenType特性に則って大文字と小文字が混在するテキストを表示するために、次の値を設定することができます。

以降はfont-variant-capsプロパティを使用するコード例とブラウザの表示例を紹介します。

使用例1

フォントを「Noto Sans」、テキスト「Apple」で上記の値を指定した例になります。

CSS コード例

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700&family=Noto+Serif+JP:wght@300;400;500;700&display=swap');

.sample1 p {
  margin-bottom: 20px;
  font-family: 'Noto Sans', sans-serif;
}
.sample1 .text1 {
  font-variant: normal;
}
.sample1 .text2 {
  font-variant-caps: small-caps;
}
.sample1 .text3 {
  font-variant-caps: all-small-caps;
}
.sample1 .text4 {
  font-variant-caps: petite-caps;
}
.sample1 .text5 {
  font-variant-caps: all-petite-caps;
}
.sample1 .text6 {
  font-variant-caps: unicase;
}
.sample1 .text7 {
  font-variant-caps: titling-caps;
}

HTML コード例

<div class="sample1">
  <p class="text1">Apple</p>
  <p class="text2">Apple</p>
  <p class="text3">Apple</p>
  <p class="text4">Apple</p>
  <p class="text5">Apple</p>
  <p class="text6">Apple</p>
  <p class="text7">Apple</p>
</div>

以下はブラウザ（Chrome）での表示例です。

class「text1」はそのまま「Apple」と表示していますが、「text2」は小文字が大文字表記になり、かつ1文字目のみやや大きいフォントサイズになります。
「text3」においては1文字目も含めて全て同じフォントサイズになり、小文字は大文字表記になります。

「Noto Sans」はpetite-capsに対応していないため、classが「text4」はsmall-capsが適用される「text2」と同じ表記になり、「text5」はall-small-capsが適用される「text3」と同じ表記になります。

classが「text6」はやや特殊で、「text3」と同様に1文字目を含めて全て同じフォントサイズになりますが、小文字表記はそのまま表示されます。
（大文字と小文字が同じフォントサイズになります）

class「text7」はテキストが全て大文字表記だった際に、フォントが太くなりすぎないよう調整してくれます。
ただし、今回の「Noto Sans」においては「text1」と際はありません。

使用例2

フォントは「Noto Sans」のまま、テキストに数字や日本語を含めたときの使用例です。

CSS コード例

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700&family=Noto+Serif+JP:wght@300;400;500;700&display=swap');

.sample2 p {
  margin-bottom: 20px;
  font-family: 'Noto Sans', sans-serif;
}
.sample2 .text1 {
  font-variant-caps: normal;
}
.sample2 .text2 {
  font-variant-caps: small-caps;
}
.sample2 .text3 {
  font-variant-caps: all-small-caps;
}
.sample2 .text4 {
  font-variant-caps: petite-caps;
}
.sample2 .text5 {
  font-variant-caps: all-petite-caps;
}
.sample2 .text6 {
  font-variant-caps: unicase;
}
.sample2 .text7 {
  font-variant-caps: titling-caps;
}

HTML コード例

<div class="sample2">
  <p class="text1">Coffee Diffi 0.1234567890 日本語のテキスト (normal)</p>
  <p class="text2">Coffee Diffi 0.1234567890 日本語のテキスト (small-caps)</p>
  <p class="text3">Coffee Diffi 0.1234567890 日本語のテキスト (all-small-caps)</p>
  <p class="text4">Coffee Diffi 0.1234567890 日本語のテキスト (petite-caps)</p>
  <p class="text5">Coffee Diffi 0.1234567890 日本語のテキスト (all-petite-caps)</p>
  <p class="text6">Coffee Diffi 0.1234567890 日本語のテキスト (unicase)</p>
  <p class="text7">Coffee Diffi 0.1234567890 日本語のテキスト (titling-caps)</p>
</div>

それぞれのテキストに対して適用するfont-variant-capsプロパティの効果については、先述の使用例1と同様です。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。