From 917858acd763bfb1f5d1e794c4f3bf45d00f3666 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 6 Nov 2021 01:12:30 +0900 Subject: CSS Fonts の各プロパティを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/05 時点の英語版に同期 --- files/ja/web/css/font-stretch/index.md | 314 ++++++++++++--------------------- 1 file changed, 111 insertions(+), 203 deletions(-) (limited to 'files/ja/web/css/font-stretch') diff --git a/files/ja/web/css/font-stretch/index.md b/files/ja/web/css/font-stretch/index.md index 07040792cb..304ef6bb31 100644 --- a/files/ja/web/css/font-stretch/index.md +++ b/files/ja/web/css/font-stretch/index.md @@ -6,13 +6,20 @@ tags: - CSS フォント - CSS プロパティ - リファレンス + - recipe:css-property +browser-compat: css.properties.font-stretch translation_of: Web/CSS/font-stretch --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`font-stretch`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フォントの normal, condensed, expanded のフェイスを選択します。 -
/* キーワード値 */
+{{EmbedInteractiveExample("pages/css/font-stretch.html")}}
+
+## 構文
+
+```css
+/* キーワード値 */
 font-stretch: ultra-condensed;
 font-stretch: extra-condensed;
 font-stretch: condensed;
@@ -24,238 +31,139 @@ font-stretch: extra-expanded;
 font-stretch: ultra-expanded;
 
 /* パーセント値 */
-font-stretch: 0%;
 font-stretch: 50%;
+font-stretch: 100%;
 font-stretch: 200%;
 
 /* グローバル値 */
 font-stretch: inherit;
 font-stretch: initial;
+font-stretch: revert;
 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%
+``` -

フォントフェイスの選択

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

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

+### 値 -

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

+- `normal` + - : 通常のフォントフェイスを指定します。 +- `semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed` + - : 通常より幅の狭い (condensed) フォントフェイスを指定します。最も幅の狭いフェイスは ultra-condensed です。 +- `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded` + - : 通常より幅の広い (expanded) フォントフェイスを指定します。最も幅の広いフェイスは ultra-expanded です。 +- `` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 50%62.5%75%87.5%100%112.5%125%150%200%
Helvetica Neue
League Mono Variable
+ - : {{cssxref("<percentage>")}} 値です。このプロパティでは負の数は許可されていません。 - + > **Note:** `font-stretch` の古いバージョンの仕様書では、このプロパティは 9 つのキーワード値のみを受け付けていました。 + > + > **{{ SpecName('CSS4 Fonts', '#propdef-font-stretch') }} 仕様書**で、構文が `` を受け付けるように拡張されました。これによって、文字幅がもっと連続的になるように提供することができます。 TrueType や OpenType のフォントでは、 "`wdth`" バリエーションが様々な幅を実装するために使用されます。 + > + > 但し、`` の構文はまた、すべてのブラウザーが対応しているわけではありません。詳しくは[ブラウザーの互換性](#ブラウザーの互換性)をご覧ください。 -

形式文法

+### キーワードと数値の対応 -{{csssyntax}} +以下の表は、キーワード値とパーセントの数値の間の対応を示しています。 + +| キーワード | パーセント値 | +| ----------------- | ------------ | +| `ultra-condensed` | 50% | +| `extra-condensed` | 62.5% | +| `condensed` | 75% | +| `semi-condensed` | 87.5% | +| `normal` | 100% | +| `semi-expanded` | 112.5% | +| `expanded` | 125% | +| `extra-expanded` | 150% | +| `ultra-expanded` | 200% | -

例

+## 解説 -

パーセント値の構文

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

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

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

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

CSS

+以下の表は 2 つの異なるフォントにおいて、 `font-stretch` に様々なパーセント値を提供した場合の効果を示しています。 -
/*
-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
-*/
+
+  
+    
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+    
+  
+  
+    
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+    
+  
+
50%62.5%75%87.5%100%112.5%125%150%200%
Helvetica Neue
League Mono Variable

 
-@font-face {
-  src: url('https://mdn.mozillademos.org/files/16014/LeagueMonoVariable.ttf');
-  font-family:'LeagueMonoVariable';
-  font-style: normal;
-}
+- **Helvetica Neue** は、既定で macOS にインストールされているもので、普通のフェイスに加えて一つの condensed のフェイスを持ちます。 `font-stretch` の100%より小さいすべての値は condensed のフェイスを選択し、それ以外の値は normal のフェイスを選択します。
+- **[League Mono Variable](https://tylerfinck.com/leaguemonovariable/)** は、 `font-stretch` のさまざまなパーセント値に対して、幅の連続的な範囲のようなものを提供する可変フォントです。
 
-.container {
-  border: 10px solid #f5f9fa;
-  padding: 0 1rem;
-  font: 1.5rem 'LeagueMonoVariable', sans-serif;
-}
+## 公式定義
 
-.condensed {
-  font-stretch: 50%;
-}
+{{cssinfo}}
 
-.normal {
-  font-stretch: 100%;
-}
+## 形式文法
 
-.expanded {
-  font-stretch: 200%;
-}
+{{csssyntax}}
 
-
-
+## 例 -

結果

+### フォントの引き伸ばしパーセント値の設定 -

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

+> **Note:** この例は、`` 値に対応しているブラウザーでのみ動作します。 -

仕様書

+{{EmbedGHLiveSample("css-examples/variable-fonts/font-stretch.html", '100%', 950)}} - - - - - - - - - - - - - - - - - - - - -
仕様書状況備考
{{ SpecName('CSS4 Fonts', '#propdef-font-stretch', 'font-stretch') }}{{ Spec2('CSS4 Fonts') }}可変フォントに <percentage> の構文を追加。
{{ SpecName('CSS3 Fonts', '#propdef-font-stretch', 'font-stretch') }}{{ Spec2('CSS3 Fonts') }}初回定義
+## 仕様書 + +{{Specifications}} + +> **Note:** CSS プロパティ `font-stretch` は初め CSS 2 で定義されましたが、CSS 2.1 で実装経験不足のため外されました。CSS 3 では新しく定義されました。 -
-

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

-
+## ブラウザーの互換性 -

{{cssinfo}}

+{{Compat}} -

ブラウザーの対応

+## 関連情報 -

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

+- {{cssxref("font-style")}} +- {{cssxref("font-weight")}} +- [基本的なテキストとフォントの装飾](/ja/docs/Learn/CSS/Styling_text/Fundamentals) -- cgit v1.2.3-54-g00ecf