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-stretch/index.html | 263 +++++++++++++++++++++++++++++++ 1 file changed, 263 insertions(+) create mode 100644 files/ja/web/css/font-stretch/index.html (limited to 'files/ja/web/css/font-stretch') diff --git a/files/ja/web/css/font-stretch/index.html b/files/ja/web/css/font-stretch/index.html new file mode 100644 index 0000000000..934810b87c --- /dev/null +++ b/files/ja/web/css/font-stretch/index.html @@ -0,0 +1,263 @@ +--- +title: font-stretch +slug: Web/CSS/font-stretch +tags: + - CSS + - CSS フォント + - CSS プロパティ + - リファレンス +translation_of: Web/CSS/font-stretch +--- +
{{CSSRef}}
+ +

font-stretch CSS プロパティは、フォントの normal, condensed, expanded のフェイスを選択します。

+ +
/* キーワード値 */
+font-stretch: ultra-condensed;
+font-stretch: extra-condensed;
+font-stretch: condensed;
+font-stretch: semi-condensed;
+font-stretch: normal;
+font-stretch: semi-expanded;
+font-stretch: expanded;
+font-stretch: extra-expanded;
+font-stretch: ultra-expanded;
+
+/* パーセント値 */
+font-stretch: 0%;
+font-stretch: 50%;
+font-stretch: 200%;
+
+/* グローバル値 */
+font-stretch: inherit;
+font-stretch: initial;
+font-stretch: unset;
+
+ +

フォントファミリによっては追加のフェイスを提供しており、通常より狭い文字、 (condensed フェイス)、通常より広い文字 (expanded フェイス) などがあります。

+ +

font-stretch を使うと、そのようなフォントで condensed や expanded フェイスを選択することができます。使用しているフォントが condensed や expanded フェイスを提供していない場合は、このプロパティは効果がありません。

+ +

一部のサンプルフォントでこのプロパティの効果を見るには、以下のフォントフェイスの選択をご覧ください。

+ +

構文

+ +

このプロパティは、単一のキーワード値又は単一の {{cssxref("<percentage>")}} 値として指定することができます。

+ +

値

+ +
+
normal
+
通常のフォントフェイスを指定します。
+
semi-condensed, condensed, extra-condensed, ultra-condensed
+
通常より幅の狭い (condensed) フォントフェイスを指定します。最も幅の狭いフェイスは ultra-condensed です。
+
semi-expanded, expanded, extra-expanded, ultra-expanded
+
通常より幅の広い (expanded) フォントフェイスを指定します。最も幅の広いフェイスは ultra-expanded です。
+
<percentage>
+
{{cssxref("<percentage>")}} 値です。このプロパティでは負の数は許可されていません。
+
+ +

font-stretch の古いバージョンの仕様書では、このプロパティは9つのキーワード値のみを受け付けていました。 CSS Fonts Level 4 で、構文が <percentage> を受け付けるように拡張されました。これによって、文字幅がもっと連続的になるように提供することができます。 TrueType や OpenType のフォントでは、 "wdth" バリエーションが様々な幅を実装するために使用されます。

+ +

但し、 <percentage> の構文はまた、すべてのブラウザーが対応しているわけではありません。詳しくは Browser compatibility をご覧ください。

+ +

キーワードと数値の対応

+ +

以下の表は、キーワード値とパーセントの数値の間の対応を示しています。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
キーワードパーセント値
ultra-condensed50%
extra-condensed62.5%
condensed75%
semi-condensed87.5%
normal100%
semi-expanded112.5%
expanded125%
extra-expanded150%
ultra-expanded200%
+ +

フォントフェイスの選択

+ +

font-stretch で与えられた値で選択されるフェイスは、フォントがそのフェイスに対応しているかによります。与えられた値に正確に一致するフェイスがフォントに存在しない場合、値が100%よりも小さい場合はより狭いフェイスが割り当てられ、100%と等しいか大きい場合はより広いフェイスが割り当てられます。

+ +

以下の表は二つの異なるフォントにおいて、 font-stretch に様々なパーセント値を提供した場合の効果を示しています。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 50%62.5%75%87.5%100%112.5%125%150%200%
Helvetica Neue
League Mono Variable
+ + + +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

パーセント値の構文

+ +

なお、この例は <percentage> 値に対応したブラウザーのみで動作します。

+ +
+

HTML

+ +
<div class="container">
+    <p class="condensed">an elephantine lizard</p>
+    <p class="normal">an elephantine lizard</p>
+    <p class="expanded">an elephantine lizard</p>
+</div>
+
+ +

CSS

+ +
/*
+This example uses the League Mono Variable font, developed by
+Tyler Finck (https://www.tylerfinck.com/) and used here under
+the terms of the SIL Open Font License, Version 1.1:
+http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
+*/
+
+@font-face {
+  src: url('https://mdn.mozillademos.org/files/16014/LeagueMonoVariable.ttf');
+  font-family:'LeagueMonoVariable';
+  font-style: normal;
+}
+
+.container {
+  border: 10px solid #f5f9fa;
+  padding: 0 1rem;
+  font: 1.5rem 'LeagueMonoVariable', sans-serif;
+}
+
+.condensed {
+  font-stretch: 50%;
+}
+
+.normal {
+  font-stretch: 100%;
+}
+
+.expanded {
+  font-stretch: 200%;
+}
+
+
+
+ +

結果

+ +

{{EmbedLiveSample("variable-font-demo", 1200, 250, "", "", "example-outcome-frame")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状況備考
{{ SpecName('CSS4 Fonts', '#propdef-font-stretch', 'font-stretch') }}{{ Spec2('CSS4 Fonts') }}可変フォントに <percentage> の構文を追加。
{{ SpecName('CSS3 Fonts', '#propdef-font-stretch', 'font-stretch') }}{{ Spec2('CSS3 Fonts') }}初回定義
+ +
+

CSS プロパティ font-stretch は初め CSS 2 で定義されましたが、CSS 2.1 で実装経験不足のため外されました。CSS 3 では新しく定義されました。

+
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.font-stretch")}}

-- cgit v1.2.3-54-g00ecf