CSSフォントバリアントプロパティの使用方法（スモールキャップスの場合）

CSSのfont-variantの使用方法を学ぶ テキストにスモールキャップス文字を使用するプロパティ—およびスモールキャップスを使用する必要があるかどうか。

CSS font-variant プロパティは、テキストを通常のテキストケースとして表示するか、スモールキャップスフォントとして表示するかを指定します。プロパティには3つの値があります：

• 通常（デフォルトのテキストケース）
• 継承
• スモールキャップス

基本的な使用法：

.small-caps {
  font-variant: small-caps;
}

font-variantの使用を開始する前に プロパティは、それを正しく何を、いつ、どのように使用するかを理解していることを確認してください。 （多くはしません）

通常のテキストとスモールキャップスの違いを定義することから始めましょう：

• 通常のテキストケースは、文のケースとも呼ばれ、この文のような通常のテキストを意味し、文の最初の単語の最初の文字が大文字になります。
• スモールキャップスは短い 小文字とブレンドするように設計された大文字（同様のエックスハイトを使用）。

残念ながら、多くのWebフォントが本物を持っているわけではありません。 スモールキャップス。

テキストのいずれかをfont-variant: small-caps;に設定した場合 次のいずれかが得られます：

• 前に見た例のように、見栄えがよく、注意深く設計されたスモールキャップスで、通常の/文のケースのテキストにスムーズに溶け込みます👌
• 通常の/文のケーステキストとうまく調和しない、コンピュータで生成された偽のスモールキャップス—そしてあなたをプロらしくないように見せます😒

実際のスモールキャップスの例

これが本物の例です 通常/文の場合と完全に調和するスモールキャップスフォント：

上記の例でうまく機能する理由は、使用されているフォントファミリであるAlegreyaが本物のを提供するためです。 スモールキャップス。

偽のスモールキャップスの例

偽のスモールキャップフォントの例を次に示します。

これらのスモールキャップスが通常のテキストケースと自然に混ざらないことに注意してください。

上記の例でもAlegreyaを使用していますが、Alegreya SCフォントの面を無効にして、偽のスモールキャップスフォントでどのように見えるかを確認できるようにしました。

font-variant: small-capsでテキストがどのように見えるかを決定するもの 選択した書体（フォントファミリ）が本物を提供するかどうかです。 小さな帽子。

残念ながら、本物のスモールキャップスはまれです。したがって、font-variant: small-capsの使用について考える前に CSSスタイルシートで、次の手順を実行します。

1. 書体に実際のスモールキャップスがあるかどうかを調べます（ある場合は、書体デザイナーが指定します。調べてください）。
2. ある場合は、正しく有効になっていることを確認してください。

それ以外の場合は、このプロパティの使用を忘れてください。

幸い、font-variant プロパティは、フォント内のOpenTypeスモールキャップスが存在する場合は自動的にアクセスします。ただし、他のフォントをインポートするのと同じように、プロジェクトにインポートする必要があります。そうでない場合は、font-variant プロパティは、コンピュータで生成されたゴミのスモールキャップスをフォールバックとして使用しますが、これは望ましくありません。