From ec35860e99aebe90a636a33b40209894ccf6fb36 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 16 Feb 2022 09:58:00 +0900 Subject: Web/CSS/@font-face 以下の記述子の記事を移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/css/@font-face/font-stretch/index.html | 182 --------------------- 1 file changed, 182 deletions(-) delete mode 100644 files/ja/web/css/@font-face/font-stretch/index.html (limited to 'files/ja/web/css/@font-face/font-stretch/index.html') diff --git a/files/ja/web/css/@font-face/font-stretch/index.html b/files/ja/web/css/@font-face/font-stretch/index.html deleted file mode 100644 index 7f72c04a0b..0000000000 --- a/files/ja/web/css/@font-face/font-stretch/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: font-stretch -slug: Web/CSS/@font-face/font-stretch -tags: - - '@font-face' - - CSS - - リファレンス - - 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-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%
- -

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

- -ほとんどのフォントはキーワードの 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%;
-}
- -

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

- -特にフォントの[コントラストカラー比が低い](/ja/docs/Web/CSS/color#Accessibility_concerns)場合、識字障害をはじめとする認知症状のある人は凝縮しすぎたフォントを読むのが困難になる場合があります。詳細は以下をご覧ください。 - - - -## 仕様書 - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{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