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-variation-settings/index.md | 178 ++++++++++------------ 1 file changed, 78 insertions(+), 100 deletions(-) (limited to 'files/ja/web/css/font-variation-settings') diff --git a/files/ja/web/css/font-variation-settings/index.md b/files/ja/web/css/font-variation-settings/index.md index 2fc23fc8f5..59236be607 100644 --- a/files/ja/web/css/font-variation-settings/index.md +++ b/files/ja/web/css/font-variation-settings/index.md @@ -5,21 +5,21 @@ tags: - CSS - CSS フォント - CSS プロパティ - - Reference - - 'recipe:css-property' + - リファレンス + - recipe:css-property +browser-compat: css.properties.font-variation-settings translation_of: Web/CSS/font-variation-settings --- -
{{CSSRef}}
+{{CSSRef}} -

font-variation-settings は CSS のプロパティで、変更したい特性の４文字の軸名と特性の値を指定することにより、可変フォントに対する低水準の制御を提供します。

+**`font-variation-settings`** は CSS のプロパティで、変更したい特性の 4 文字の軸名と特性の値を指定することにより、[可変フォント](/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide)に対する低水準の制御を提供します。 -
{{EmbedInteractiveExample("pages/css/font-variation-settings.html")}}
+{{EmbedInteractiveExample("pages/css/font-variation-settings.html")}} - +## 構文 -

構文

- -
/* 既定の設定を使用 */
+```css
+/* 既定の設定を使用 */
 font-variation-settings: normal;
 
 /* 可変フォントの軸名の値を設定 */
@@ -28,126 +28,104 @@ font-variation-settings: "XHGT" 0.7;
 /* グローバル値 */
 font-variation-settings: inherit;
 font-variation-settings: initial;
+font-variation-settings: revert;
 font-variation-settings: unset;
-
- -

値

+``` -

このプロパティは1つまたは2つの形を取ることができます。

+### 値 -
-
normal
-
テキストは既定の設定を使用してレイアウトされます。
-
<string> <number>
-
テキストを描画する際、フォントの特性を有効または無効にするために可変フォントの軸名のリストがテキストレイアウトエンジンへ渡されます。それぞれの設定は常に、一つ以上の4文字の ASCII 文字の {{cssxref("<string>")}} と、続いて設定する軸の値を示す {{cssxref("number")}} の組み合わせから成ります。 <string> の文字が多すぎたり少なすぎたり、文字が U+20 - U+7E のコード点の範囲を超えていたりした場合は、プロパティ全体が無効になります。フォントデザイナーによって定義された利用可能な値の範囲次第では、 <number> は小数や負の数を取ることもできます。
-
+このプロパティは 1 つまたは 2 つの形を取ることができます。 -

形式文法

+- `normal` + - : テキストは既定の設定を使用してレイアウトされます。 +- ` ` + - : テキストを描画する際、フォントの特性を有効または無効にするために可変フォントの軸名のリストがテキストレイアウトエンジンへ渡されます。それぞれの設定は常に、一つ以上の4文字の ASCII 文字の {{cssxref("<string>")}} と、続いて設定する軸の値を示す {{cssxref("number")}} の組み合わせから成ります。`` の文字が多すぎたり少なすぎたり、文字が U+20 - U+7E のコードポイントの範囲を超えていたりした場合は、プロパティ全体が無効になります。フォントデザイナーによって定義された利用可能な値の範囲次第では、`` は小数や負の数を取ることもできます。 -{{csssyntax}} +## 解説 -

解説

+このプロパティは、その特性を有効にしたりアクセスしたりするための他の方法がない場合に、可変フォント特性を設定するために設計された低水準の仕組みです。これらの特性 (例えば {{cssxref("font-weight")}} や {{cssxref("font-style")}}) を設定するための基本プロパティがない場合にのみ使用してください。 -

このプロパティは、その特性を有効にしたりアクセスしたりするための他の方法がない場合に、可変フォント特性を設定するために設計された低水準の仕組みです。これらの特性 (例えば {{cssxref("font-weight")}} や {{cssxref("font-style")}}) を設定するための基本プロパティがない場合にのみ使用してください。

+`font-variation-settings` を使用して設定されたフォント特性は、常に `font-weight` などの基本フォントプロパティに関する設定を上書きし、言うまでもなくカスケードに現れます。ブラウザーによっては、 `@font-face` 宣言が `font-weight` の範囲を含んでいる場合のみこれが成り立ちます。 -

font-variation-settings を使用して設定されたフォント特性は、常に font-weight などの基本フォントプロパティに関する設定を上書きし、言うまでもなくカスケードに現れます。ブラウザーによっては、 @font-face 宣言が font-weight の範囲を含んでいる場合のみこれが成り立ちます。

+### 登録済みの軸とカスタム軸 -

登録済みの軸と独自の軸

+可変フォントの軸には、**登録済み**の軸と**カスタム**軸があります。 -

可変フォントの軸には、登録済みの軸と独自の軸があります。

+登録済みの軸は、もっとも頻繁に遭遇するもので、仕様書の著者が標準化する価値があると感じるほど一般的なものです。なお、これは作者がフォントにすべてを入れる必要があることを意味するものではありません。 -

登録済みの軸はよく現れます。 — 仕様書の作者が標準化する価値があると感じるほどよく使われます。なお、これは作者がフォントにすべてを入れる必要があることを意味するものではありません。

- -

こちらは関連する CSS プロパティに対応する登録済みの軸です。

+こちらは関連する CSS プロパティに対応する登録済みの軸です。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + +
軸のタグCSS プロパティ
"wght"{{cssxref("font-weight")}}
"wdth"{{cssxref("font-stretch")}}
"slnt" (slant){{cssxref("font-style")}}: oblique + angle
"ital"{{cssxref("font-style")}}: italic
"opsz" -

{{cssxref("font-optical-sizing")}}

-
軸のタグCSS プロパティ
"wght"{{cssxref("font-weight")}}
"wdth"{{cssxref("font-stretch")}}
"slnt" (slant){{cssxref("font-style")}}: `oblique + angle`
"ital"{{cssxref("font-style")}}: `italic`
"opsz"

{{cssxref("font-optical-sizing")}}
-

独自の軸はフォントデザイナーがフォントに変化を付けるためのもの全てがあり得、例えばアセンダーまたはデセンダーの高さ、セリフの大きさ、その他想像できるすべてのものです。どの軸も4文字の固有の軸名を与えれば使用することができます。一部はもっと有名になっており、そのうち登録されるものもあるかもしれません。

+カスタム軸はフォントデザイナーがフォントに変化を付けるためのもの全てがあり得ます。例えばアセンダーまたはデセンダーの高さ、セリフの大きさ、その他想像できるすべてのものです。どの軸も 4 文字の固有の軸名を与えれば使用することができます。一部はもっと有名になっており、そのうち登録されるものもあるかもしれません。 + +> **Note:** 登録済みの軸のタグは小文字のタグを使用するのに対し、カスタム軸は大文字のタグを使用します。なお、フォントデザイナーはこの慣習に従うことを強制されているわけではなく、従っていないものもあります。ここで重要なことは、軸のタグは大文字と小文字を区別することです。 -
-

注: 登録済みの軸のタグは小文字のタグを使用するのに対し、d久慈の軸は大文字のタグを使用します。なお、フォントデザイナーはこの慣習に従うことを強制されているわけではなく、従っていないものもあります。ここで重要なことは、軸のタグは大文字と小文字を区別することです。

-
+オペレーティングシステムで可変フォントを使用するためには、最新版であることを確認する必要があります。例えば、 Linux ベースの OS では最新版の Linux Freetype が必要であり、 macOS 10.13 より前では可変フォントに対応していません。オペレーティングシステムが最新版でない場合、ウェブページや Firefox 開発者ツールで可変フォントを使用することができません。 -

例

+## 公式定義 -

登録済みの軸を記述した以下のデモを見てください。その他の可変フォントの例は、 可変フォントガイド, v-fonts.com, and axis-praxis.org などで見られます。

+{{cssinfo}} -
-

警告: オペレーティングシステムで可変フォントを使用するためには、最新版であることを確認する必要があります。例えば、 Linux ベースの OS では最新版の Linux Freetype が必要であり、 macOS 10.13 より前では可変フォントに対応していません。オペレーティングシステムが最新版でない場合、ウェブページや Firefox 開発者ツールで可変フォントを使用することができません。

-
+## 形式文法 -

Weight (wght)

+{{csssyntax}} -

以下のデモの CSS は、フォントの重みの値を編集することができます。

+## 例 -
{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}
+他にも多数の可変フォントの例が、 [可変フォントガイド](/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide), [v-fonts.com](https://v-fonts.com/), [axis-praxis.org](https://www.axis-praxis.org/) などにあります。 -

Slant (slnt)

+### 太さ (wght) -

以下のデモの CSS は、フォントの傾きの値を編集することができます。

+以下のデモの CSS は、フォントの太さの値を編集することができます。 -
{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}
+{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}} -

仕様書

+### 傾き (slnt) - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Fonts', '#descdef-font-face-font-variation-settings', 'font-variation-settings')}}{{Spec2('CSS4 Fonts')}}初回定義
+以下のデモの CSS は、フォントの傾きの値を編集することができます。 + +{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}} + +## 仕様書 -

{{cssinfo}}

+{{Specifications}} -

ブラウザーの互換性

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

{{Compat("css.properties.font-variation-settings")}}

+{{Compat}} -

関連情報

+## 関連情報 - +- [可変フォントガイド](/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide) +- [OpenType Font Variations Overview](https://docs.microsoft.com/typography/opentype/spec/otvaroverview) +- [OpenType Design-Variation Axis Tag Registry](https://docs.microsoft.com/typography/opentype/spec/dvaraxisreg) -- cgit v1.2.3-54-g00ecf