From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../ja/web/css/@font-face/font-stretch/index.html | 187 +++++++++++++++++++++ 1 file changed, 187 insertions(+) create mode 100644 files/ja/web/css/@font-face/font-stretch/index.html (limited to 'files/ja/web/css/@font-face/font-stretch') diff --git a/files/ja/web/css/@font-face/font-stretch/index.html b/files/ja/web/css/@font-face/font-stretch/index.html new file mode 100644 index 0000000000..1704f1d662 --- /dev/null +++ b/files/ja/web/css/@font-face/font-stretch/index.html @@ -0,0 +1,187 @@ +--- +title: font-stretch +slug: Web/CSS/@font-face/font-stretch +tags: + - '@font-face' + - CSS + - Reference + - descripter + - font-stretch + - 記述子 +translation_of: Web/CSS/@font-face/font-stretch +--- +
{{CSSRef}}{{draft}}
+ +

font-stretch は CSS の記述子で、ウェブページ作成者が {{cssxref("@font-face")}} 規則で定義されているフォントが通常か、幅狭か、幅広かを指定できるようにします。

+ +

ある特定のフォントについて、作成者は同じフォントの異なるスタイルに対応するさまざまなフォントフェイスをダウンロードでき、font-stretch 記述子を用いることでフォントフェイスのストレッチを明示的に指定します。CSS 記述子の値は、対応するフォントプロパティの値と同じです。

+ +

{{cssinfo}}

+ +

構文

+ +
/* 単一の値 */
+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: 50%;
+font-stretch: 100%;
+font-stretch: 200%;
+
+/* 複数値 */
+font-stretch: 75% 125%;
+font-stretch: condensed ultra-condensed;;
+
+ +

font-weight プロパティは以下にリストとして示されている値のいずれかを使用して記述されます。

+ +

値

+ +
+
normal
+
普通の文字幅。
+
semi-condensed, condensed, extra-condensed, ultra-condensed
+
通常より幅狭な字を示します。semi-condenced が regular に比べてわずかに幅が細い程度で、そこから右 (ultra-condenced) に向かうにつれてさらに細くなっていきます。
+
semi-expanded, expanded, extra-expanded, ultra-expanded
+
通常より幅広な字を示します。semi-rxpanded がわずかに広い程度で、そこから右 (ultra-expanded) に向かうにつれてさらに広くなっていきます。
+
<percentage>
+
50% から 200% の {{cssxref("<percentage>")}} 値で示します。このプロパティに負の値は許可されていません。
+
+ +

font-stretch の旧バージョンではプロパティは上記の <percentage> 以外の 9 つのキーワードのみを許可していましたが、CSS Fonts Level 4 における構文の拡張により<percentage> も使用できるようになりました。これにより、バリアブルフォントは連続した文字幅のようなものを提供できます。TrueType または OpenType バリアブルフォント (後述) の場合、"wdth" バリエーションを使用してさまざまな幅を実装できます。

+ +

フォントが指定された値と完全に一致するフェイスが提供されない場合、100% 未満の値は幅狭に現像され、100% 以上の値は幅広に現像されます。

+ +

キーワードとパーセント値の対照表

+ +

以下の表はキーワード指定の際の字幅と <percentage> 指定時の幅の違いを示します:

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

バリアブル (可変) フォント

+ +

ほとんどのフォントはキーワードの 1 つに対応する特定の幅を持ちます。しかしながら、バリアブル (可変) フォントと呼ばれる一部のフォントはきめ細かい精度で一連の伸縮が可能になっています。これにより、デザイナーは選択したウェイトをより厳密に制御できます。 これにはパーセント範囲が役立ちます。

+ +

TrueType または OpenType 可変フォントの場合、"wdth" バリエーションを使用して、さまざまなグリフ幅を実装します。

+ +

以下の例が動作するには、CSS Fonts Level 4 構文をサポートするブラウザーが必要です。この構文では font-weight は 1 から 1000 の任意の数値にできます。

+ +

形式文法

+ +
{{csssyntax}}
+
+ +

例

+ +

以下はローカルの Open Sans 書体をインポートし、normal、semi-condensed、ならびに semi-expanded を使用できるようにするものです。

+ +
@font-face {
+  font-family: "Open Sans";
+  src: local("Open Sans") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+  font-stretch: 87.5% 112.5%;
+}
+ +

アクセシビリティの考慮事項

+ +

特にフォントのコントラストカラー比が低い場合、識字障害をはじめとする認知症状のある人は凝縮しすぎたフォントを読むのが困難になる場合があります。詳細は以下をご覧ください。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-stretch')}}{{Spec2('CSS4 Fonts')}}
{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-stretch')}}{{Spec2('CSS3 Fonts')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.font-face.font-stretch")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf