From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/font-variant-caps/index.html | 138 ++++++++++++++++++++++++++ 1 file changed, 138 insertions(+) create mode 100644 files/ja/web/css/font-variant-caps/index.html (limited to 'files/ja/web/css/font-variant-caps') diff --git a/files/ja/web/css/font-variant-caps/index.html b/files/ja/web/css/font-variant-caps/index.html new file mode 100644 index 0000000000..6ba11b38e0 --- /dev/null +++ b/files/ja/web/css/font-variant-caps/index.html @@ -0,0 +1,138 @@ +--- +title: font-variant-caps +slug: Web/CSS/font-variant-caps +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/font-variant-caps +--- +
{{CSSRef}}
+ +

font-variant-caps は CSS のプロパティで、大文字向けの代替字形の使用を制御します。

+ +
{{EmbedInteractiveExample("pages/css/font-variant-caps.html")}}
+ + + +

指定されたフォントに複数の異なる大きさで大文字の字形が含まれている場合、このプロパティは最適なものを選択します。 petite capital (小さなの大文字) の字形が利用できない場合は、スモールキャピタル (小ぶりの大文字) の字形を使用して表示します。これらが存在しない場合、ブラウザーは大文字の字形から合成します。

+ +

フォントには、様々な大文字小文字の区別がない文字の特殊な字形が含まれていることがあり (発音記号など)、これらが大文字の文字により一致することがあります。しかし、小さな大文字の字形は大文字小文字の区別がない文字のために合成されることはありません。

+ +

言語特有の規則

+ +

このプロパティは言語特有の一致規則を考慮します。例えば以下のようなものです。

+ + + +

構文

+ +
/* キーワード値 */
+font-variant-caps: normal;
+font-variant-caps: small-caps;
+font-variant-caps: all-small-caps;
+font-variant-caps: petite-caps;
+font-variant-caps: all-petite-caps;
+font-variant-caps: unicase;
+font-variant-caps: titling-caps;
+
+/* グローバル値 */
+font-variant-caps: inherit;
+font-variant-caps: initial;
+font-variant-caps: unset;
+
+ +

font-variant-caps プロパティは、以下のリスト内にある単一のキーワード値を使用して指定します。どの場合も、フォントが OpenType 値に対応していなければ、字形は合成によって生成されます。

+ +

値

+ +
+
normal
+
代替字形の使用を無効にします。
+
small-caps
+
小さな大文字の表示を有効にします (OpenType 特性: smcp)。スモールキャピタルの字形はふつう、大文字の形をしていますが、小文字の大きさに縮小されています。
+
all-small-caps
+
大文字と小文字の両方でスモールキャピタルの表示を有効にします (OpenType 機能: c2sc, smcp)。
+
petite-caps
+
petite capital の表示を有効にします (OpenType 特性: pcap)。
+
all-petite-caps
+
大文字と小文字の両方で petite capital の表示を有効にします (OpenType 特性: c2pc, pcap)。
+
unicase
+
大文字のスモールキャピタルと通常の小文字の混合表示を有効にします (OpenType 特性: unic).
+
titling-caps
+
タイトルキャピタルの表示を有効化します (OpenType 特性: titl)。大文字の字形は、ふつう小文字と一緒に使用するためにデザインされています。すべて大文字のタイトル文字列で使用された場合、太くなりすぎることがあります。タイトルキャピタルはこの場合に専用のデザインが行われたものです。
+
+ +

アクセシビリティの考慮

+ +

長い区間のテキストに対して font-variant の値を all-small-caps や all-petite-caps を設定すると、失読症のような認知障害を抱えた人にとって読むのが難しくなることがあります。

+ + + +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

スモールキャップのフォント変化形の設定

+ +

HTML

+ +
<p class="small-caps">Firefox rocks, small caps!</p>
+<p class="normal">Firefox rocks, normal caps!</p>
+
+ +

CSS

+ +
.small-caps {
+  font-variant-caps: small-caps;
+  font-style: italic;
+}
+.normal {
+  font-variant-caps: normal;
+  font-style: italic;
+}
+
+ +

結果

+ +

{{ EmbedLiveSample('Setting_the_small-caps_font_variant') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#propdef-font-variant-caps', 'font-variant-caps')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.font-variant-caps")}}

-- cgit v1.2.3-54-g00ecf