From ce4c4c52ab46ed108664ebc833eeab8d80bbe2f2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 5 Nov 2021 00:08:59 +0900 Subject: CSS Font 系のプロパティ文書の更新準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/font-feature-settings/index.html | 117 ------ files/ja/web/css/font-feature-settings/index.md | 117 ++++++ files/ja/web/css/font-kerning/index.html | 118 ------ files/ja/web/css/font-kerning/index.md | 118 ++++++ files/ja/web/css/font-language-override/index.html | 107 ------ files/ja/web/css/font-language-override/index.md | 107 ++++++ files/ja/web/css/font-optical-sizing/index.html | 96 ----- files/ja/web/css/font-optical-sizing/index.md | 96 +++++ files/ja/web/css/font-size-adjust/index.html | 122 ------- files/ja/web/css/font-size-adjust/index.md | 122 +++++++ files/ja/web/css/font-size/index.html | 226 ------------ files/ja/web/css/font-size/index.md | 226 ++++++++++++ files/ja/web/css/font-stretch/index.html | 261 -------------- files/ja/web/css/font-stretch/index.md | 261 ++++++++++++++ files/ja/web/css/font-style/index.html | 225 ------------ files/ja/web/css/font-style/index.md | 225 ++++++++++++ files/ja/web/css/font-synthesis/index.html | 109 ------ files/ja/web/css/font-synthesis/index.md | 109 ++++++ files/ja/web/css/font-variant-caps/index.html | 136 ------- files/ja/web/css/font-variant-caps/index.md | 136 +++++++ .../ja/web/css/font-variant-east-asian/index.html | 184 ---------- files/ja/web/css/font-variant-east-asian/index.md | 184 ++++++++++ files/ja/web/css/font-variant-ligatures/index.html | 215 ----------- files/ja/web/css/font-variant-ligatures/index.md | 215 +++++++++++ files/ja/web/css/font-variant-numeric/index.html | 135 ------- files/ja/web/css/font-variant-numeric/index.md | 135 +++++++ files/ja/web/css/font-variant-position/index.html | 106 ------ files/ja/web/css/font-variant-position/index.md | 106 ++++++ files/ja/web/css/font-variant/index.html | 137 ------- files/ja/web/css/font-variant/index.md | 137 +++++++ .../ja/web/css/font-variation-settings/index.html | 153 -------- files/ja/web/css/font-variation-settings/index.md | 153 ++++++++ files/ja/web/css/font-weight/index.html | 394 --------------------- files/ja/web/css/font-weight/index.md | 394 +++++++++++++++++++++ files/ja/web/css/font/index.html | 374 ------------------- files/ja/web/css/font/index.md | 374 +++++++++++++++++++ files/ja/web/css/line-height/index.html | 179 ---------- files/ja/web/css/line-height/index.md | 179 ++++++++++ 38 files changed, 3394 insertions(+), 3394 deletions(-) delete mode 100644 files/ja/web/css/font-feature-settings/index.html create mode 100644 files/ja/web/css/font-feature-settings/index.md delete mode 100644 files/ja/web/css/font-kerning/index.html create mode 100644 files/ja/web/css/font-kerning/index.md delete mode 100644 files/ja/web/css/font-language-override/index.html create mode 100644 files/ja/web/css/font-language-override/index.md delete mode 100644 files/ja/web/css/font-optical-sizing/index.html create mode 100644 files/ja/web/css/font-optical-sizing/index.md delete mode 100644 files/ja/web/css/font-size-adjust/index.html create mode 100644 files/ja/web/css/font-size-adjust/index.md delete mode 100644 files/ja/web/css/font-size/index.html create mode 100644 files/ja/web/css/font-size/index.md delete mode 100644 files/ja/web/css/font-stretch/index.html create mode 100644 files/ja/web/css/font-stretch/index.md delete mode 100644 files/ja/web/css/font-style/index.html create mode 100644 files/ja/web/css/font-style/index.md delete mode 100644 files/ja/web/css/font-synthesis/index.html create mode 100644 files/ja/web/css/font-synthesis/index.md delete mode 100644 files/ja/web/css/font-variant-caps/index.html create mode 100644 files/ja/web/css/font-variant-caps/index.md delete mode 100644 files/ja/web/css/font-variant-east-asian/index.html create mode 100644 files/ja/web/css/font-variant-east-asian/index.md delete mode 100644 files/ja/web/css/font-variant-ligatures/index.html create mode 100644 files/ja/web/css/font-variant-ligatures/index.md delete mode 100644 files/ja/web/css/font-variant-numeric/index.html create mode 100644 files/ja/web/css/font-variant-numeric/index.md delete mode 100644 files/ja/web/css/font-variant-position/index.html create mode 100644 files/ja/web/css/font-variant-position/index.md delete mode 100644 files/ja/web/css/font-variant/index.html create mode 100644 files/ja/web/css/font-variant/index.md delete mode 100644 files/ja/web/css/font-variation-settings/index.html create mode 100644 files/ja/web/css/font-variation-settings/index.md delete mode 100644 files/ja/web/css/font-weight/index.html create mode 100644 files/ja/web/css/font-weight/index.md delete mode 100644 files/ja/web/css/font/index.html create mode 100644 files/ja/web/css/font/index.md delete mode 100644 files/ja/web/css/line-height/index.html create mode 100644 files/ja/web/css/line-height/index.md (limited to 'files/ja/web') diff --git a/files/ja/web/css/font-feature-settings/index.html b/files/ja/web/css/font-feature-settings/index.html deleted file mode 100644 index 58982e86dd..0000000000 --- a/files/ja/web/css/font-feature-settings/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: font-feature-settings -slug: Web/CSS/font-feature-settings -tags: - - CSS - - CSS フォント - - CSS プロパティ - - リファレンス -translation_of: Web/CSS/font-feature-settings ---- -
{{CSSRef}}
- -

CSS の font-feature-settings プロパティは、 OpenType フォントの拡張タイポグラフィの特性を制御します。

- -
{{EmbedInteractiveExample("pages/css/font-feature-settings.html")}}
- - - -

構文

- -
/* 既定の設定を使用する */
-font-feature-settings: normal;
-
-/* OpenType の特性タグの値を設定する */
-font-feature-settings: "smcp";
-font-feature-settings: "smcp" on;
-font-feature-settings: "swsh" 2;
-font-feature-settings: "smcp", "swsh" 2;
-
-/* グローバル値 */
-font-feature-settings: inherit;
-font-feature-settings: initial;
-font-feature-settings: unset;
- -
メモ: 可能な限り、ウェブの作者は代わりに {{cssxref("font-variant")}} 一括指定プロパティ、又は関連する個別指定プロパティである {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}} プロパティを使うべきです。
-
-これらは font-feature-settings よりも、もっと効率的で、予想でき、理解できる結果をもたらし、 font-feature-settings は、 OpenType フォント特性を有効またはアクセスするための他の方法が存在しない特殊なケースを処理するように設計された低レベルの機能です。特に、スモールキャップの表現に font-feature-settings を使うべきではありません。
- -

値

- -
-
normal
-
テキストは既定の設定で配置されます。
-
<feature-tag-value>
-
テキストの描画時、 OpenType の特性タグ値のリストがテキストレイアウトエンジンに渡され、フォントの機能を有効化または無効化します。タグは常に 4 文字の ASCII 文字の {{cssxref("<string>")}} です。文字数がこれより少ないか多い場合、もしくはコードポイント U+20 - U+7E の範囲外の文字を含む場合、プロパティ全体が無効になります。
- 値は正の整数です。キーワード on と off はそれぞれ 1 と 0 の別名です。値が設定されていなければ、既定値は 1 です。 非真偽値の OpenType 特性 (例: stylistic alternates) では、この値は選ばれる特定のグリフを意味します。真偽値の特性はオンとオフを切り替えます。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -
/* use small-cap alternate glyphs */
-.smallcaps { font-feature-settings: "smcp" on; }
-
-/* convert both upper and lowercase to small caps (affects punctuation also) */
-.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }
-
-/* use zeros with a slash through them to differentiate from "O" */
-
-.nicezero { font-feature-settings: "zero"; }
-
-/* enable historical forms */
-.hist { font-feature-settings: "hist"; }
-
-/* disable common ligatures, usually on by default */
-.noligs { font-feature-settings: "liga" 0; }
-
-/* enable tabular (monospaced) figures */
-td.tabular { font-feature-settings: "tnum"; }
-
-/* enable automatic fractions */
-.fractions { font-feature-settings: "frac"; }
-
-/* use the second available swash character */
-.swash { font-feature-settings: "swsh" 2; }
-
-/* enable stylistic set 7 */
-.fancystyle {
-  font-family: Gabriola; /* available on Windows 7, and on Mac OS */
-  font-feature-settings: "ss07";
-}
-
- -

{{cssinfo}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Fonts', '#propdef-font-feature-settings', 'font-feature-settings')}}{{Spec2('CSS3 Fonts')}}初回定義
- -

ブラウザーの対応

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/font-feature-settings/index.md b/files/ja/web/css/font-feature-settings/index.md new file mode 100644 index 0000000000..58982e86dd --- /dev/null +++ b/files/ja/web/css/font-feature-settings/index.md @@ -0,0 +1,117 @@ +--- +title: font-feature-settings +slug: Web/CSS/font-feature-settings +tags: + - CSS + - CSS フォント + - CSS プロパティ + - リファレンス +translation_of: Web/CSS/font-feature-settings +--- +
{{CSSRef}}
+ +

CSS の font-feature-settings プロパティは、 OpenType フォントの拡張タイポグラフィの特性を制御します。

+ +
{{EmbedInteractiveExample("pages/css/font-feature-settings.html")}}
+ + + +

構文

+ +
/* 既定の設定を使用する */
+font-feature-settings: normal;
+
+/* OpenType の特性タグの値を設定する */
+font-feature-settings: "smcp";
+font-feature-settings: "smcp" on;
+font-feature-settings: "swsh" 2;
+font-feature-settings: "smcp", "swsh" 2;
+
+/* グローバル値 */
+font-feature-settings: inherit;
+font-feature-settings: initial;
+font-feature-settings: unset;
+ +
メモ: 可能な限り、ウェブの作者は代わりに {{cssxref("font-variant")}} 一括指定プロパティ、又は関連する個別指定プロパティである {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}} プロパティを使うべきです。
+
+これらは font-feature-settings よりも、もっと効率的で、予想でき、理解できる結果をもたらし、 font-feature-settings は、 OpenType フォント特性を有効またはアクセスするための他の方法が存在しない特殊なケースを処理するように設計された低レベルの機能です。特に、スモールキャップの表現に font-feature-settings を使うべきではありません。
+ +

値

+ +
+
normal
+
テキストは既定の設定で配置されます。
+
<feature-tag-value>
+
テキストの描画時、 OpenType の特性タグ値のリストがテキストレイアウトエンジンに渡され、フォントの機能を有効化または無効化します。タグは常に 4 文字の ASCII 文字の {{cssxref("<string>")}} です。文字数がこれより少ないか多い場合、もしくはコードポイント U+20 - U+7E の範囲外の文字を含む場合、プロパティ全体が無効になります。
+ 値は正の整数です。キーワード on と off はそれぞれ 1 と 0 の別名です。値が設定されていなければ、既定値は 1 です。 非真偽値の OpenType 特性 (例: stylistic alternates) では、この値は選ばれる特定のグリフを意味します。真偽値の特性はオンとオフを切り替えます。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +
/* use small-cap alternate glyphs */
+.smallcaps { font-feature-settings: "smcp" on; }
+
+/* convert both upper and lowercase to small caps (affects punctuation also) */
+.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }
+
+/* use zeros with a slash through them to differentiate from "O" */
+
+.nicezero { font-feature-settings: "zero"; }
+
+/* enable historical forms */
+.hist { font-feature-settings: "hist"; }
+
+/* disable common ligatures, usually on by default */
+.noligs { font-feature-settings: "liga" 0; }
+
+/* enable tabular (monospaced) figures */
+td.tabular { font-feature-settings: "tnum"; }
+
+/* enable automatic fractions */
+.fractions { font-feature-settings: "frac"; }
+
+/* use the second available swash character */
+.swash { font-feature-settings: "swsh" 2; }
+
+/* enable stylistic set 7 */
+.fancystyle {
+  font-family: Gabriola; /* available on Windows 7, and on Mac OS */
+  font-feature-settings: "ss07";
+}
+
+ +

{{cssinfo}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#propdef-font-feature-settings', 'font-feature-settings')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの対応

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/font-kerning/index.html b/files/ja/web/css/font-kerning/index.html deleted file mode 100644 index 7d61cd8165..0000000000 --- a/files/ja/web/css/font-kerning/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: font-kerning -slug: Web/CSS/font-kerning -tags: - - CSS - - CSS フォント - - CSS プロパティ - - Reference -translation_of: Web/CSS/font-kerning ---- -
{{CSSRef}}
- -

font-kerning CSS プロパティはフォントに存在するカーニング情報の使用方法を制御します。

- -
/* キーワード値 */
-font-kerning: auto;
-font-kerning: normal;
-font-kerning: none;
-
-/* グローバル値 */
-font-kerning: inherit;
-font-kerning: initial;
-font-kerning: unset;
-
- -

カーニングは、文字間にどれだけ間隔を置くかを制御します。カーニング情報はフォントに含まれており、かつフォントが well-kerned であれば、この機能によりどのような文字でも文字同士の間隔をほぼ同一にできます。

- -

Example of font-kerning

- -

{{cssinfo}}

- -

構文

- -

font-kerning プロパティは以下のキーワード内の一つを指定します。

- -

値

- -
-
auto
-
このキーワードは、カーニングを使用するかをブラウザーに任せます。フォントサイズが小さい場合はカーニングが不自然になることがあるため、ブラウザーは無効化するでしょう。これは既定値です。
-
normal
-
このキーワードは、カーニングを適用するよう要求します。
-
none
-
このキーワードは、ブラウザーがフォントのカーニング情報を使用しないようにします。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<div id="kern"></div>
-<div id="nokern"></div>
-<textarea id="input">AV T. ij</textarea>
- -

CSS

- -
div {
-  font-size: 2rem;
-  font-family: serif;
-}
-
-#nokern {
-  font-kerning: none;
-}
-
-#kern {
-  font-kerning: normal;
-}
- -

JavaScript

- -
var input  = document.getElementById('input'),
-    kern   = document.getElementById('kern'),
-    nokern = document.getElementById('nokern');
-
-input.addEventListener('keyup', function() {
-  kern.textContent = input.value; /* Update content */
-  nokern.textContent = input.value;
-});
-
-kern.textContent = input.value; /* Initialize content */
-nokern.textContent = input.value;
-
- -

{{ EmbedLiveSample('Example') }}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Fonts', '#propdef-font-kerning', 'font-kerning')}}{{Spec2('CSS3 Fonts')}}初回定義
- -

ブラウザーの対応

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/font-kerning/index.md b/files/ja/web/css/font-kerning/index.md new file mode 100644 index 0000000000..7d61cd8165 --- /dev/null +++ b/files/ja/web/css/font-kerning/index.md @@ -0,0 +1,118 @@ +--- +title: font-kerning +slug: Web/CSS/font-kerning +tags: + - CSS + - CSS フォント + - CSS プロパティ + - Reference +translation_of: Web/CSS/font-kerning +--- +
{{CSSRef}}
+ +

font-kerning CSS プロパティはフォントに存在するカーニング情報の使用方法を制御します。

+ +
/* キーワード値 */
+font-kerning: auto;
+font-kerning: normal;
+font-kerning: none;
+
+/* グローバル値 */
+font-kerning: inherit;
+font-kerning: initial;
+font-kerning: unset;
+
+ +

カーニングは、文字間にどれだけ間隔を置くかを制御します。カーニング情報はフォントに含まれており、かつフォントが well-kerned であれば、この機能によりどのような文字でも文字同士の間隔をほぼ同一にできます。

+ +

Example of font-kerning

+ +

{{cssinfo}}

+ +

構文

+ +

font-kerning プロパティは以下のキーワード内の一つを指定します。

+ +

値

+ +
+
auto
+
このキーワードは、カーニングを使用するかをブラウザーに任せます。フォントサイズが小さい場合はカーニングが不自然になることがあるため、ブラウザーは無効化するでしょう。これは既定値です。
+
normal
+
このキーワードは、カーニングを適用するよう要求します。
+
none
+
このキーワードは、ブラウザーがフォントのカーニング情報を使用しないようにします。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<div id="kern"></div>
+<div id="nokern"></div>
+<textarea id="input">AV T. ij</textarea>
+ +

CSS

+ +
div {
+  font-size: 2rem;
+  font-family: serif;
+}
+
+#nokern {
+  font-kerning: none;
+}
+
+#kern {
+  font-kerning: normal;
+}
+ +

JavaScript

+ +
var input  = document.getElementById('input'),
+    kern   = document.getElementById('kern'),
+    nokern = document.getElementById('nokern');
+
+input.addEventListener('keyup', function() {
+  kern.textContent = input.value; /* Update content */
+  nokern.textContent = input.value;
+});
+
+kern.textContent = input.value; /* Initialize content */
+nokern.textContent = input.value;
+
+ +

{{ EmbedLiveSample('Example') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#propdef-font-kerning', 'font-kerning')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの対応

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/font-language-override/index.html b/files/ja/web/css/font-language-override/index.html deleted file mode 100644 index f4ef1885c8..0000000000 --- a/files/ja/web/css/font-language-override/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: font-language-override -slug: Web/CSS/font-language-override -tags: - - CSS - - CSS Fonts - - CSS Property - - Reference - - font-language-override - - l10n - - 'recipe:css-property' -translation_of: Web/CSS/font-language-override ---- -
{{CSSRef}}
- -

font-language-override は CSS のプロパティで、書体で言語に固有の字形の使用を制御します。

- -
/* キーワード値 */
-font-language-override: normal;
-
-/* <string> 値 */
-font-language-override: "ENG";  /* 英語の字形 */
-font-language-override: "TRK";  /* トルコ語の字形 */
-
-/* グローバル値 */
-font-language-override: initial;
-font-language-override: inherit;
-font-language-override: unset;
-
- -

既定では、 HTML の lang 属性がブラウザーにその言語に特化してデザインされた字形を表示することを指示します。例えば、多くのフォントが合字 fi に特別な文字を持っており、 "i" の点を "f" に統合しています。しかし、言語がトルコ語に設定された場合、その書体では統合した字形を使用しません。トルコ語では "i" に、点が付いたもの (i) と点が付かないもの (ı) の二つの種類があり、この合字を使用すると点が付いた "i" を点がない "ı" に誤った変換をしてしまいます。

- -

font-language-override プロパティで、その書体における特定の言語の動作を上書きすることができます。これは例えば、使用している書体でその言語に対して正しい対応が行われていないときに便利です。例えば、ある書体がアゼルバイジャン語の正しい規則を持っていない場合、同様の規則に従うトルコ語の字形を強制的に使用することができます。

- -

構文

- -

font-language-override プロパティは、キーワード normal または一つの <string> として指定します。

- -

値

- -
-
normal
-
lang 属性で指定された言語で適切なフォントの字形を使用するよう、ブラウザーに指示します。
-
{{cssxref("string")}}
-
文字列で指定された言語で適切なフォントの字形を使用するよう、ブラウザーに指示します。値は OpenType language system にある言語タグと一致している必要があります。例えば、 "ENG" は英語で、 "KOR" は韓国語です。
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

デンマーク語の文字の使用Using Danish glyphs

- -

HTML

- -
<p class="para1">Default language setting.</p>
-<p class="para2">This is a string with the <code>font-language-override</code> set to Danish.</p>
-
- -

CSS

- -
p.para1 {
-  font-language-override: normal;
-}
-
-p.para2 {
-  font-language-override: "DAN";
-}
- -

結果

- -

{{ EmbedLiveSample('Using_Danish_glyphs', '600', '', '', 'Web/CSS/font-language-override') }}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Fonts', '#propdef-font-language-override', 'font-language-override')}}{{Spec2('CSS4 Fonts')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.font-language-override")}}

- -

関連情報

- - diff --git a/files/ja/web/css/font-language-override/index.md b/files/ja/web/css/font-language-override/index.md new file mode 100644 index 0000000000..f4ef1885c8 --- /dev/null +++ b/files/ja/web/css/font-language-override/index.md @@ -0,0 +1,107 @@ +--- +title: font-language-override +slug: Web/CSS/font-language-override +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - font-language-override + - l10n + - 'recipe:css-property' +translation_of: Web/CSS/font-language-override +--- +
{{CSSRef}}
+ +

font-language-override は CSS のプロパティで、書体で言語に固有の字形の使用を制御します。

+ +
/* キーワード値 */
+font-language-override: normal;
+
+/* <string> 値 */
+font-language-override: "ENG";  /* 英語の字形 */
+font-language-override: "TRK";  /* トルコ語の字形 */
+
+/* グローバル値 */
+font-language-override: initial;
+font-language-override: inherit;
+font-language-override: unset;
+
+ +

既定では、 HTML の lang 属性がブラウザーにその言語に特化してデザインされた字形を表示することを指示します。例えば、多くのフォントが合字 fi に特別な文字を持っており、 "i" の点を "f" に統合しています。しかし、言語がトルコ語に設定された場合、その書体では統合した字形を使用しません。トルコ語では "i" に、点が付いたもの (i) と点が付かないもの (ı) の二つの種類があり、この合字を使用すると点が付いた "i" を点がない "ı" に誤った変換をしてしまいます。

+ +

font-language-override プロパティで、その書体における特定の言語の動作を上書きすることができます。これは例えば、使用している書体でその言語に対して正しい対応が行われていないときに便利です。例えば、ある書体がアゼルバイジャン語の正しい規則を持っていない場合、同様の規則に従うトルコ語の字形を強制的に使用することができます。

+ +

構文

+ +

font-language-override プロパティは、キーワード normal または一つの <string> として指定します。

+ +

値

+ +
+
normal
+
lang 属性で指定された言語で適切なフォントの字形を使用するよう、ブラウザーに指示します。
+
{{cssxref("string")}}
+
文字列で指定された言語で適切なフォントの字形を使用するよう、ブラウザーに指示します。値は OpenType language system にある言語タグと一致している必要があります。例えば、 "ENG" は英語で、 "KOR" は韓国語です。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

デンマーク語の文字の使用Using Danish glyphs

+ +

HTML

+ +
<p class="para1">Default language setting.</p>
+<p class="para2">This is a string with the <code>font-language-override</code> set to Danish.</p>
+
+ +

CSS

+ +
p.para1 {
+  font-language-override: normal;
+}
+
+p.para2 {
+  font-language-override: "DAN";
+}
+ +

結果

+ +

{{ EmbedLiveSample('Using_Danish_glyphs', '600', '', '', 'Web/CSS/font-language-override') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Fonts', '#propdef-font-language-override', 'font-language-override')}}{{Spec2('CSS4 Fonts')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.font-language-override")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/font-optical-sizing/index.html b/files/ja/web/css/font-optical-sizing/index.html deleted file mode 100644 index 8893a42e18..0000000000 --- a/files/ja/web/css/font-optical-sizing/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: font-optical-sizing -slug: Web/CSS/font-optical-sizing -tags: - - CSS - - CSS フォント - - CSS プロパティ - - Reference -translation_of: Web/CSS/font-optical-sizing ---- -
{{CSSRef}}
- -

CSS の font-optical-sizing プロパティは、テキストの描画をそれぞれの大きさでの表示に最適化して表示するかどうかを設定します。これは光学的サイズバリエーション軸があるフォントのみで動作します。

- -

例えば、小さいテキストは太い角と大きなセリフで描かれる傾向があるのに対し、大きなテキストは太い角と細い角の間のコントラストがもっと微妙に描画される傾向があります。

- -
-

メモ: 光学的サイズバリエーション軸は、 {{cssxref("font-variation-settings")}} の opsz で表現されます。

-
- -

構文

- -
/* キーワード値 */
-font-optical-sizing: none;
-font-optical-sizing: auto; /* default */
-
-/* グローバル値 */
-font-optical-sizing: inherit;
-font-optical-sizing: initial;
-font-optical-sizing: unset;
-
- -

値

- -
-
none
-
ブラウザーは表示の最適化のために書体の形を変更しません。
-
auto
-
ブラウザーは表示の最適化のために書体の形を変更します。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -
<p class="optical-sizing">This paragraph is optically sized.
- This is the default across browsers.</p>
-
-<p class="no-optical-sizing">This paragraph is not optically sized.
- You should see a difference in supporting browsers.</p>
- -
@font-face {
-    src: url('AmstelvarAlpha-VF.ttf');
-    font-family:'Amstelvar';
-    font-style: normal;
-}
-
-p {
-  font-size: 36px;
-  font-family: Amstelvar;
-}
-
-.no-optical-sizing {
-  font-optical-sizing: none;
-}
- -
-

メモ: 上記で参照されているフォント — 光学的サイズを含みライセンスフリーであるもの — はテストに適しています。 GitHub からダウンロードできます。

-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-optical-sizing-def', 'font-optical-sizing')}}{{Spec2('CSS4 Fonts')}} 
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

{{Compat("css.properties.font-optical-sizing")}}

diff --git a/files/ja/web/css/font-optical-sizing/index.md b/files/ja/web/css/font-optical-sizing/index.md new file mode 100644 index 0000000000..8893a42e18 --- /dev/null +++ b/files/ja/web/css/font-optical-sizing/index.md @@ -0,0 +1,96 @@ +--- +title: font-optical-sizing +slug: Web/CSS/font-optical-sizing +tags: + - CSS + - CSS フォント + - CSS プロパティ + - Reference +translation_of: Web/CSS/font-optical-sizing +--- +
{{CSSRef}}
+ +

CSS の font-optical-sizing プロパティは、テキストの描画をそれぞれの大きさでの表示に最適化して表示するかどうかを設定します。これは光学的サイズバリエーション軸があるフォントのみで動作します。

+ +

例えば、小さいテキストは太い角と大きなセリフで描かれる傾向があるのに対し、大きなテキストは太い角と細い角の間のコントラストがもっと微妙に描画される傾向があります。

+ +
+

メモ: 光学的サイズバリエーション軸は、 {{cssxref("font-variation-settings")}} の opsz で表現されます。

+
+ +

構文

+ +
/* キーワード値 */
+font-optical-sizing: none;
+font-optical-sizing: auto; /* default */
+
+/* グローバル値 */
+font-optical-sizing: inherit;
+font-optical-sizing: initial;
+font-optical-sizing: unset;
+
+ +

値

+ +
+
none
+
ブラウザーは表示の最適化のために書体の形を変更しません。
+
auto
+
ブラウザーは表示の最適化のために書体の形を変更します。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +
<p class="optical-sizing">This paragraph is optically sized.
+ This is the default across browsers.</p>
+
+<p class="no-optical-sizing">This paragraph is not optically sized.
+ You should see a difference in supporting browsers.</p>
+ +
@font-face {
+    src: url('AmstelvarAlpha-VF.ttf');
+    font-family:'Amstelvar';
+    font-style: normal;
+}
+
+p {
+  font-size: 36px;
+  font-family: Amstelvar;
+}
+
+.no-optical-sizing {
+  font-optical-sizing: none;
+}
+ +
+

メモ: 上記で参照されているフォント — 光学的サイズを含みライセンスフリーであるもの — はテストに適しています。 GitHub からダウンロードできます。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-optical-sizing-def', 'font-optical-sizing')}}{{Spec2('CSS4 Fonts')}} 
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

{{Compat("css.properties.font-optical-sizing")}}

diff --git a/files/ja/web/css/font-size-adjust/index.html b/files/ja/web/css/font-size-adjust/index.html deleted file mode 100644 index bc36ec5ced..0000000000 --- a/files/ja/web/css/font-size-adjust/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: font-size-adjust -slug: Web/CSS/font-size-adjust -tags: - - CSS - - CSS Fonts - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/font-size-adjust ---- -

font-size-adjust は CSS のプロパティで、 (大文字の大きさを定義する) 現在のフォントサイズに相対的な小文字の大きさを設定します。

- -
/* 指定されたフォントサイズを使用 */
-font-size-adjust: none;
-
-/* 小文字のフォントサイズを、指定された
-フォントサイズの半分にする */
-font-size-adjust: 0.5;
-
-/* グローバル値 */
-font-size-adjust: inherit;
-font-size-adjust: initial;
-font-size-adjust: unset;
-
- -

このプロパティが便利なのは、特に小さなサイズのフォントの読みやすさは、大文字の高さではなく小文字の高さで決まるからです。最初に選択した {{Cssxref("font-family")}} が利用できず、その代替フォントのアスペクト比 (小文字の大きさとフォントの大きさの比率) が著しく異なる場合、読みやすさが問題になることがあります。

- -

このプロパティの使い方は、 font-size-adjust に対応していないブラウザーと互換性を持たせるため、 {{ Cssxref("font-size") }} プロパティに掛け合わせる数値として指定します。つまり、このプロパティ指定された値は、ふつう最初に選択されたフォントのアスペクト比になります。例えば、次のように指定されたスタイルシートでは、

- -
font-size: 14px;
-font-size-adjust: 0.5;
-
- -

実際のところ、フォントの小文字が 7px の高さ (0.5 x 14px) を持つべきであると指定しています。これは、 font-size-adjust に対応していないブラウザーでは 14px のフォントが使用されている場合でも、妥当な結果が得られます。

- -

構文

- -

値

- -
-
none
-
{{ Cssxref("font-size") }} プロパティだけを基準にフォントサイズを選びます。
-
{{cssxref("<number>")}}
-
-

{{ Cssxref("font-size") }} に掛け合わせて小文字の高さ (そのフォントの文字 x の高さ) になるような値を指定し、フォントサイズを選びます。

- -

指定した数値は、通常は最初に選んだ {{ Cssxref("font-family") }} のアスペクト比 (文字 x の高さとフォントサイズの比率) にしてください。こうすれば、最初に選んだフォントが利用可能なら、ブラウザーが font-size-adjust に対応しているかどうかに関わらず、どのブラウザーでも同じサイズで表示されます。

- -

0 は高さが 0 のテキスト (非表示テキスト) になります。

-
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

小文字の大きさの調整

- -

HTML

- -
<p class="times">This text uses the Times font (10px), which is hard to read in small sizes.</p>
-<p class="verdana">This text uses the Verdana font (10px), which has relatively large lowercase letters.</p>
-<p class="adjtimes">This is the 10px Times, but now adjusted to the same aspect ratio as the Verdana.</p>
- -

CSS

- -
.times {
-  font-family: Times, serif;
-  font-size: 10px;
-}
-
-.verdana {
-  font-family: Verdana, sans-serif;
-  font-size: 10px;
-}
-
-.adjtimes {
-  font-family: Times, serif;
-  font-size-adjust: 0.58;
-  font-size: 10px;
-}
-
- -

結果

- -

{{ EmbedLiveSample('Adjusting_lower-case_letter_sizes', 500, 200) }}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS3 Fonts', '#propdef-font-size-adjust', 'font-size-adjust') }}{{ Spec2('CSS3 Fonts') }}初回定義
- -
-

font-size-adjust は最初に CSS 2 で定義されましたが、 CSS 2.1 で削除されました。 CSS 3 で新たに定義し直されました。

-
- -

ブラウザーの互換性

- -

{{Compat("css.properties.font-size-adjust")}}

- -
{{CSSRef}}
diff --git a/files/ja/web/css/font-size-adjust/index.md b/files/ja/web/css/font-size-adjust/index.md new file mode 100644 index 0000000000..bc36ec5ced --- /dev/null +++ b/files/ja/web/css/font-size-adjust/index.md @@ -0,0 +1,122 @@ +--- +title: font-size-adjust +slug: Web/CSS/font-size-adjust +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/font-size-adjust +--- +

font-size-adjust は CSS のプロパティで、 (大文字の大きさを定義する) 現在のフォントサイズに相対的な小文字の大きさを設定します。

+ +
/* 指定されたフォントサイズを使用 */
+font-size-adjust: none;
+
+/* 小文字のフォントサイズを、指定された
+フォントサイズの半分にする */
+font-size-adjust: 0.5;
+
+/* グローバル値 */
+font-size-adjust: inherit;
+font-size-adjust: initial;
+font-size-adjust: unset;
+
+ +

このプロパティが便利なのは、特に小さなサイズのフォントの読みやすさは、大文字の高さではなく小文字の高さで決まるからです。最初に選択した {{Cssxref("font-family")}} が利用できず、その代替フォントのアスペクト比 (小文字の大きさとフォントの大きさの比率) が著しく異なる場合、読みやすさが問題になることがあります。

+ +

このプロパティの使い方は、 font-size-adjust に対応していないブラウザーと互換性を持たせるため、 {{ Cssxref("font-size") }} プロパティに掛け合わせる数値として指定します。つまり、このプロパティ指定された値は、ふつう最初に選択されたフォントのアスペクト比になります。例えば、次のように指定されたスタイルシートでは、

+ +
font-size: 14px;
+font-size-adjust: 0.5;
+
+ +

実際のところ、フォントの小文字が 7px の高さ (0.5 x 14px) を持つべきであると指定しています。これは、 font-size-adjust に対応していないブラウザーでは 14px のフォントが使用されている場合でも、妥当な結果が得られます。

+ +

構文

+ +

値

+ +
+
none
+
{{ Cssxref("font-size") }} プロパティだけを基準にフォントサイズを選びます。
+
{{cssxref("<number>")}}
+
+

{{ Cssxref("font-size") }} に掛け合わせて小文字の高さ (そのフォントの文字 x の高さ) になるような値を指定し、フォントサイズを選びます。

+ +

指定した数値は、通常は最初に選んだ {{ Cssxref("font-family") }} のアスペクト比 (文字 x の高さとフォントサイズの比率) にしてください。こうすれば、最初に選んだフォントが利用可能なら、ブラウザーが font-size-adjust に対応しているかどうかに関わらず、どのブラウザーでも同じサイズで表示されます。

+ +

0 は高さが 0 のテキスト (非表示テキスト) になります。

+
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

小文字の大きさの調整

+ +

HTML

+ +
<p class="times">This text uses the Times font (10px), which is hard to read in small sizes.</p>
+<p class="verdana">This text uses the Verdana font (10px), which has relatively large lowercase letters.</p>
+<p class="adjtimes">This is the 10px Times, but now adjusted to the same aspect ratio as the Verdana.</p>
+ +

CSS

+ +
.times {
+  font-family: Times, serif;
+  font-size: 10px;
+}
+
+.verdana {
+  font-family: Verdana, sans-serif;
+  font-size: 10px;
+}
+
+.adjtimes {
+  font-family: Times, serif;
+  font-size-adjust: 0.58;
+  font-size: 10px;
+}
+
+ +

結果

+ +

{{ EmbedLiveSample('Adjusting_lower-case_letter_sizes', 500, 200) }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Fonts', '#propdef-font-size-adjust', 'font-size-adjust') }}{{ Spec2('CSS3 Fonts') }}初回定義
+ +
+

font-size-adjust は最初に CSS 2 で定義されましたが、 CSS 2.1 で削除されました。 CSS 3 で新たに定義し直されました。

+
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.font-size-adjust")}}

+ +
{{CSSRef}}
diff --git a/files/ja/web/css/font-size/index.html b/files/ja/web/css/font-size/index.html deleted file mode 100644 index 634f106168..0000000000 --- a/files/ja/web/css/font-size/index.html +++ /dev/null @@ -1,226 +0,0 @@ ---- -title: font-size -slug: Web/CSS/font-size -tags: - - CSS - - CSS Fonts - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/font-size ---- -
{{CSSRef}}
- -

CSS の font-size プロパティはフォントの大きさを定義します。フォントの大きさを変更すると、フォントの大きさに相対的な {{cssxref("<length>")}} の単位例えば em, ex, なども更新されます。

- -
{{EmbedInteractiveExample("pages/css/font-size.html")}}
- - - -

構文

- -
/* <absolute-size> 値 */
-font-size: xx-small;
-font-size: x-small;
-font-size: small;
-font-size: medium;
-font-size: large;
-font-size: x-large;
-font-size: xx-large;
-font-size: xxx-large;
-
-/* <relative-size> 値 */
-font-size: smaller;
-font-size: larger;
-
-/* <length> 値 */
-font-size: 12px;
-font-size: 0.8em;
-
-/* <percentage> 値 */
-font-size: 80%;
-
-/* グローバル値 */
-font-size: inherit;
-font-size: initial;
-font-size: unset;
-
- -

font-size プロパティは、以下の何れかの方法で指定します。

- - - -

値

- -
-
xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large
-
ユーザーの既定のフォントサイズ (つまり medium) を基準とした絶対的なサイズのキーワードです。
-
larger, smaller
-
相対的なサイズのキーワードです。フォントは親要素のフォントサイズから相対的に、上記の絶対的サイズのキーワードで使われている倍率におよそ沿う形で拡大または縮小されます。
-
{{cssxref("<length>")}}
-
-

正の {{cssxref("<length>")}} の値。 (em や ex などの) フォント相対単位のほとんどは、親要素のフォントサイズに対する相対値です。

- -

(rem などの) ルートを基準としたフォント相対単位では、フォントサイズは {{HTMLElement("html")}} (ルート) 要素で使われているフォントのサイズからの相対値です。

-
-
{{cssxref("<percentage>")}}
-
-

正の {{cssxref("<percentage>")}} 値で、親要素のフォントサイズからの相対値です。

-
-
- -
-

注: アクセシビリティを最大化するために、一般的に最適なのは、ユーザーの既定のフォントサイズからの相対値を使用することです。

-
- -

解説

- -

フォントサイズの定義にはいくつかの方法があり、キーワードと数値 (ピクセルや em の場合) が使われます。個々のウェブページで必要とされるものにあわせて、最適な方法を選んでください。

- -

キーワード

- -

キーワードはウェブのフォントサイズを決める良い方法です。 {{HTMLElement("body")}} 要素のフォントサイズをキーワードで定義すると、ページのどこであってもフォントサイズを相対的に調整することができ、したがってページ全体のフォントサイズの拡大縮小が容易にできます。

- -

ピクセル

- -

ピクセル値 (px) でフォントサイズを設定することは、ピクセル制度が必要な場合に適しています。ピクセル値は静的です。これは OS にもブラウザーにも依存しない方法であり、ブラウザーに文字を指定した高さのピクセルの数値で描画することを厳密に指示します。ブラウザーによって、同じ効果を得るのに異なるアルゴリズムが使われている可能性があるため、結果は多少異なるかもしれません。

- -

フォントサイズの指定を組み合わせることもできます。例えば親要素のフォントサイズを 16px 、子要素を larger とした場合、子要素のフォントサイズは親要素の 16px より大きくレンダリングされます。

- -
注: フォントサイズを px で定義すると、ブラウザーによってはユーザーがフォントサイズを変更することができないため、アクセシブルではありません。例えば、弱視の人は、ウェブデザイナーが選んだサイズより大きなフォントにしたがるかもしれません。こうした配慮のあるデザインをしたい場合は、フォントサイズにピクセルを使わないようにしてください。
- -

em

- -

フォントサイズを設定するもうひとつの方法は em 値を使うものです。 em 値の大きさは動的です。font-size プロパティを定義すると、 em はその em が用いられている要素のフォントサイズと一致します。ページ内でまだフォントサイズをセットしていなければ、ブラウザーの既定値、たいてい 16px が使われます。したがって、既定では 1em = 16px であり、2em = 32px です。もし body 要素で font-size を 20px にセットすれば、1em = 20px で 2em = 40px です。本質的には、値の 2 が現在の em の大きさの乗数であることに注意してください。

- -

必要なピクセル値に相当する em は、次の式で計算することができます。

- -
em = 要素に設定したい pixel 値 / 親要素のピクセル単位でのフォントサイズ
- -

例えば、 body のフォントサイズが 1em にセットされているものとすると、ブラウザー標準の 1em = 16px です。使いたいフォントサイズが 12px なら、 0.75em を指定します (12/16 = 0.75 だからです)。同様に、使いたいフォントサイズが 10px なら、 0.625em を指定します (10/16 = 0.625)。22px なら 1.375em です (22/16)。

- -

em は読者が選んだフォントに自動的に再調整されるため、CSS ではとても便利な単位です。

- -

em と ex の単位が {{cssxref("font-size")}} プロパティで用いられると、親要素のフォントサイズからの相対になります (要素のフォントサイズからの相対値を使用する他のプロパティとは異なります)。すなわち、 em の単位やパーセント値は {{cssxref("font-size")}} の場合と同様です。

- -

em 値が複合的であるということは、覚えておくべき重要な事実です。以下の HTML と CSS をご覧ください。

- -
html {
-  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
-}
-span {
-  font-size: 1.6em;
-}
- -
<div>
-<span>Outer <span>inner</span> outer</span>
-</div>
-
- -

結果は以下のようになります。

- -

{{EmbedLiveSample("Ems", 400, 40)}}

- -

ブラウザーの既定の font-size が 16px と仮定すると、単語 “outer” は 16px で描画され、単語 “inner” は 25.6px で描画されます。これは、内側の {{HTMLElement("span")}} 要素の font-size は 1.6em ですが、これは親要素の font-size からの相対値で、さらにその親要素の font-size からの相対値になるからです。これはよく複合 (compounding) と呼ばれます。

- -

rem

- -

rem 値は、複合の問題を避けるために考案されました。 rem 値は親要素ではなく、ルート html 要素に対して相対的です。言い換えると、親要素のサイズの影響を受けることなく相対的な方法でフォントサイズを指定できますので、複合が発生しません。

- -

以下の CSS は、先ほどの例とほぼ同じです。唯一の違いは、単位を rem に変更したことです。

- -
html {
-  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
-}
-span {
-  font-size: 1.6rem;
-}
-
- -

この CSS を同じ HTML に適用すると、以下のようになります:

- -
<span>Outer <span>inner</span> outer</span>
- -

{{EmbedLiveSample("Rems", 400, 40)}}

- -

この例では、単語 “outer inner outer” はすべて 16px で表示されます (ブラウザーの font-size は既定値が 10px のままであるとします)。

- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

フォントサイズの設定

- -

CSS

- -
.small {
-  font-size: xx-small;
-}
-.larger {
-  font-size: larger;
-}
-.point {
-  font-size: 24pt;
-}
-.percent {
-  font-size: 200%;
-}
-
- -

HTML

- -
<h1 class="small">Small H1</h1>
-<h1 class="larger">Larger H1</h1>
-<h1 class="point">24 point H1</h1>
-<h1 class="percent">200% H1</h1>
- -

結果

- -

{{EmbedLiveSample('Setting_font_sizes','600','200')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-size-prop', 'font-size')}}{{Spec2('CSS4 Fonts')}}xxx-large キーワードを追加
{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}{{Spec2('CSS3 Fonts')}}変更なし
{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#font-size', 'font-size')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの互換性

- -

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

diff --git a/files/ja/web/css/font-size/index.md b/files/ja/web/css/font-size/index.md new file mode 100644 index 0000000000..634f106168 --- /dev/null +++ b/files/ja/web/css/font-size/index.md @@ -0,0 +1,226 @@ +--- +title: font-size +slug: Web/CSS/font-size +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/font-size +--- +
{{CSSRef}}
+ +

CSS の font-size プロパティはフォントの大きさを定義します。フォントの大きさを変更すると、フォントの大きさに相対的な {{cssxref("<length>")}} の単位例えば em, ex, なども更新されます。

+ +
{{EmbedInteractiveExample("pages/css/font-size.html")}}
+ + + +

構文

+ +
/* <absolute-size> 値 */
+font-size: xx-small;
+font-size: x-small;
+font-size: small;
+font-size: medium;
+font-size: large;
+font-size: x-large;
+font-size: xx-large;
+font-size: xxx-large;
+
+/* <relative-size> 値 */
+font-size: smaller;
+font-size: larger;
+
+/* <length> 値 */
+font-size: 12px;
+font-size: 0.8em;
+
+/* <percentage> 値 */
+font-size: 80%;
+
+/* グローバル値 */
+font-size: inherit;
+font-size: initial;
+font-size: unset;
+
+ +

font-size プロパティは、以下の何れかの方法で指定します。

+ + + +

値

+ +
+
xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large
+
ユーザーの既定のフォントサイズ (つまり medium) を基準とした絶対的なサイズのキーワードです。
+
larger, smaller
+
相対的なサイズのキーワードです。フォントは親要素のフォントサイズから相対的に、上記の絶対的サイズのキーワードで使われている倍率におよそ沿う形で拡大または縮小されます。
+
{{cssxref("<length>")}}
+
+

正の {{cssxref("<length>")}} の値。 (em や ex などの) フォント相対単位のほとんどは、親要素のフォントサイズに対する相対値です。

+ +

(rem などの) ルートを基準としたフォント相対単位では、フォントサイズは {{HTMLElement("html")}} (ルート) 要素で使われているフォントのサイズからの相対値です。

+
+
{{cssxref("<percentage>")}}
+
+

正の {{cssxref("<percentage>")}} 値で、親要素のフォントサイズからの相対値です。

+
+
+ +
+

注: アクセシビリティを最大化するために、一般的に最適なのは、ユーザーの既定のフォントサイズからの相対値を使用することです。

+
+ +

解説

+ +

フォントサイズの定義にはいくつかの方法があり、キーワードと数値 (ピクセルや em の場合) が使われます。個々のウェブページで必要とされるものにあわせて、最適な方法を選んでください。

+ +

キーワード

+ +

キーワードはウェブのフォントサイズを決める良い方法です。 {{HTMLElement("body")}} 要素のフォントサイズをキーワードで定義すると、ページのどこであってもフォントサイズを相対的に調整することができ、したがってページ全体のフォントサイズの拡大縮小が容易にできます。

+ +

ピクセル

+ +

ピクセル値 (px) でフォントサイズを設定することは、ピクセル制度が必要な場合に適しています。ピクセル値は静的です。これは OS にもブラウザーにも依存しない方法であり、ブラウザーに文字を指定した高さのピクセルの数値で描画することを厳密に指示します。ブラウザーによって、同じ効果を得るのに異なるアルゴリズムが使われている可能性があるため、結果は多少異なるかもしれません。

+ +

フォントサイズの指定を組み合わせることもできます。例えば親要素のフォントサイズを 16px 、子要素を larger とした場合、子要素のフォントサイズは親要素の 16px より大きくレンダリングされます。

+ +
注: フォントサイズを px で定義すると、ブラウザーによってはユーザーがフォントサイズを変更することができないため、アクセシブルではありません。例えば、弱視の人は、ウェブデザイナーが選んだサイズより大きなフォントにしたがるかもしれません。こうした配慮のあるデザインをしたい場合は、フォントサイズにピクセルを使わないようにしてください。
+ +

em

+ +

フォントサイズを設定するもうひとつの方法は em 値を使うものです。 em 値の大きさは動的です。font-size プロパティを定義すると、 em はその em が用いられている要素のフォントサイズと一致します。ページ内でまだフォントサイズをセットしていなければ、ブラウザーの既定値、たいてい 16px が使われます。したがって、既定では 1em = 16px であり、2em = 32px です。もし body 要素で font-size を 20px にセットすれば、1em = 20px で 2em = 40px です。本質的には、値の 2 が現在の em の大きさの乗数であることに注意してください。

+ +

必要なピクセル値に相当する em は、次の式で計算することができます。

+ +
em = 要素に設定したい pixel 値 / 親要素のピクセル単位でのフォントサイズ
+ +

例えば、 body のフォントサイズが 1em にセットされているものとすると、ブラウザー標準の 1em = 16px です。使いたいフォントサイズが 12px なら、 0.75em を指定します (12/16 = 0.75 だからです)。同様に、使いたいフォントサイズが 10px なら、 0.625em を指定します (10/16 = 0.625)。22px なら 1.375em です (22/16)。

+ +

em は読者が選んだフォントに自動的に再調整されるため、CSS ではとても便利な単位です。

+ +

em と ex の単位が {{cssxref("font-size")}} プロパティで用いられると、親要素のフォントサイズからの相対になります (要素のフォントサイズからの相対値を使用する他のプロパティとは異なります)。すなわち、 em の単位やパーセント値は {{cssxref("font-size")}} の場合と同様です。

+ +

em 値が複合的であるということは、覚えておくべき重要な事実です。以下の HTML と CSS をご覧ください。

+ +
html {
+  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
+}
+span {
+  font-size: 1.6em;
+}
+ +
<div>
+<span>Outer <span>inner</span> outer</span>
+</div>
+
+ +

結果は以下のようになります。

+ +

{{EmbedLiveSample("Ems", 400, 40)}}

+ +

ブラウザーの既定の font-size が 16px と仮定すると、単語 “outer” は 16px で描画され、単語 “inner” は 25.6px で描画されます。これは、内側の {{HTMLElement("span")}} 要素の font-size は 1.6em ですが、これは親要素の font-size からの相対値で、さらにその親要素の font-size からの相対値になるからです。これはよく複合 (compounding) と呼ばれます。

+ +

rem

+ +

rem 値は、複合の問題を避けるために考案されました。 rem 値は親要素ではなく、ルート html 要素に対して相対的です。言い換えると、親要素のサイズの影響を受けることなく相対的な方法でフォントサイズを指定できますので、複合が発生しません。

+ +

以下の CSS は、先ほどの例とほぼ同じです。唯一の違いは、単位を rem に変更したことです。

+ +
html {
+  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
+}
+span {
+  font-size: 1.6rem;
+}
+
+ +

この CSS を同じ HTML に適用すると、以下のようになります:

+ +
<span>Outer <span>inner</span> outer</span>
+ +

{{EmbedLiveSample("Rems", 400, 40)}}

+ +

この例では、単語 “outer inner outer” はすべて 16px で表示されます (ブラウザーの font-size は既定値が 10px のままであるとします)。

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

フォントサイズの設定

+ +

CSS

+ +
.small {
+  font-size: xx-small;
+}
+.larger {
+  font-size: larger;
+}
+.point {
+  font-size: 24pt;
+}
+.percent {
+  font-size: 200%;
+}
+
+ +

HTML

+ +
<h1 class="small">Small H1</h1>
+<h1 class="larger">Larger H1</h1>
+<h1 class="point">24 point H1</h1>
+<h1 class="percent">200% H1</h1>
+ +

結果

+ +

{{EmbedLiveSample('Setting_font_sizes','600','200')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-size-prop', 'font-size')}}{{Spec2('CSS4 Fonts')}}xxx-large キーワードを追加
{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}{{Spec2('CSS3 Fonts')}}変更なし
{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#font-size', 'font-size')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ +

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

diff --git a/files/ja/web/css/font-stretch/index.html b/files/ja/web/css/font-stretch/index.html deleted file mode 100644 index 07040792cb..0000000000 --- a/files/ja/web/css/font-stretch/index.html +++ /dev/null @@ -1,261 +0,0 @@ ---- -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")}}

diff --git a/files/ja/web/css/font-stretch/index.md b/files/ja/web/css/font-stretch/index.md new file mode 100644 index 0000000000..07040792cb --- /dev/null +++ b/files/ja/web/css/font-stretch/index.md @@ -0,0 +1,261 @@ +--- +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")}}

diff --git a/files/ja/web/css/font-style/index.html b/files/ja/web/css/font-style/index.html deleted file mode 100644 index 339426e6c0..0000000000 --- a/files/ja/web/css/font-style/index.html +++ /dev/null @@ -1,225 +0,0 @@ ---- -title: font-style -slug: Web/CSS/font-style -tags: - - CSS - - CSS フォント - - CSS プロパティ - - Reference - - font - - ウェブ -translation_of: Web/CSS/font-style ---- -
{{CSSRef}}
- -

CSS の font-style プロパティは、フォントが {{cssxref("font-family")}} の中で通常体 (normal)、筆記体 (italic)、斜体 (oblique) のどれでスタイル付けするかを設定します。

- -
{{EmbedInteractiveExample("pages/css/font-style.html")}}
- - - -

italic フォントフェイスは通常、本質的に筆記体であり、スタイル付けされていない書体より水平方向の幅が小さいのが一般的です。一方 oblique フェイスはたいてい、通常のフェイスを傾けただけです。 italic と oblique のいずれも、通常のフェイスのグリフを人工的に傾けることによってシミュレートされます (この制御については {{cssxref("font-synthesis")}} をご覧ください)。

- -

構文

- -
font-style: normal;
-font-style: italic;
-font-style: oblique;
-font-style: oblique 10deg;
-
-/* グローバル値 */
-font-style: inherit;
-font-style: initial;
-font-style: unset;
-
- -

font-style プロパティは、以下の一覧から選択した単一のキーワードで指定し、キーワードが oblique であれば任意で角度を含めることができます。

- -

値

- -
-
normal
-
{{Cssxref("font-family")}} の中で normal に分類されているフォントを選択します。
-
italic
-
italic として分類されているフォントを選択します。 italic フェイスが使用できない場合は、代わりに oblique に分類されているフォントを選択します。どちらも利用できない場合は、スタイルは人工的にシミュレートされます。
-
oblique
-
oblique として分類されているフォントを選択します。 oblique フェイスが使用できない場合は、代わりに italic に分類されているフォントを選択します。どちらも利用できない場合は、スタイルは人工的にシミュレートされます。
-
oblique <angle>
-
oblique として分類されているフォントを選択し、加えてテキストの傾きの角度を指定します。選択されたフォントファミリで１つまたは複数の oblique フェイスが利用できる場合、指定した角度に最も近いものが選択されます。 oblique フェイスが利用できない場合、ブラウザーは通常のフェイスを指定した大きさだけ傾けることで、 oblique バージョンを作成します。有効な値は-90以上90以下の角度の値です。角度が指定されない場合、14度の角度が使用されます。正の数では行末に向けて傾け、負の数では行頭に向けて傾けます。
-
- 一般に、要求された角度が14度以上の場合、大きな角度が推奨されます。その他の場合は、より小さい角度が推奨されます (アルゴリズムの詳細は、仕様書の font matching section を参照してください)。
-
- -

可変フォント

- -

可変フォントでは、 oblique フェイスをどれだけ傾けるかの角度を細かく制御することができます。 oblique キーワードに <angle> 修飾子を使用して選択することができます。

- -

TrueType または OpenType の可変フォントでは、 "slnt" 変数が oblique の傾く角度を様々に実装するために使用され、 "ital" 変数の値が 1 ならば、 italic の値を使用します。 {{cssxref("font-variation-settings")}} を参照してください。

- -

次の例を動作させるには、 CSS Fonts Level 4 の font-style: oblique が <angle> を受け入れる構文に対応したブラウザーが必要です。

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

HTML

- -
-
<header>
-    <input type="range" id="slant" name="slant" min="-90" max="90" />
-    <label for="slant">Slant</label>
-</header>
-<div class="container">
-    <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
-</div>
-
- -

CSS

- -
/*
-AmstelvarAlpha-VF is created by David Berlow (https://github.com/TypeNetwork/Amstelvar)
-and is used here under the terms of its license:
-https://github.com/TypeNetwork/Amstelvar/blob/master/OFL.txt
-*/
-
-@font-face {
-  src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf');
-  font-family:'AmstelvarAlpha';
-  font-style: normal;
-}
-
-label {
-  font: 1rem monospace;
-}
-
-.container {
-  max-height: 150px;
-  overflow: scroll;
-}
-
-.sample {
-  font: 2rem 'AmstelvarAlpha', sans-serif;
-}
-
-
- - - -

JavaScript

- -
let slantLabel = document.querySelector('label[for="slant"]');
-let slantInput = document.querySelector('#slant');
-let sampleText = document.querySelector('.sample');
-
-function update() {
-  let slant = `oblique ${slantInput.value}deg`;
-  slantLabel.textContent = `font-style: ${slant};`;
-  sampleText.style.fontStyle = slant;
-}
-
-slantInput.addEventListener('input', update);
-
-update();
-
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

フォントスタイル

- - - -
.normal {
-  font-style: normal;
-}
-
-.italic {
-  font-style: italic;
-}
-
-.oblique {
-  font-style: oblique;
-}
- -

{{ EmbedLiveSample('Font_styles') }}

- -

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

- -

テキストの長い区間に渡って font-style の値を italic に設定すると、失読症のような認知問題を抱える人にとって読むのが難しくなる可能性があります。

- - - -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-style-prop', 'font-style')}}{{Spec2('CSS4 Fonts')}}oblique の後で角度を指定できるようになった
{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}{{Spec2('CSS3 Fonts')}}変更なし
{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#font-style', 'font-style')}}{{Spec2('CSS1')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

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

diff --git a/files/ja/web/css/font-style/index.md b/files/ja/web/css/font-style/index.md new file mode 100644 index 0000000000..339426e6c0 --- /dev/null +++ b/files/ja/web/css/font-style/index.md @@ -0,0 +1,225 @@ +--- +title: font-style +slug: Web/CSS/font-style +tags: + - CSS + - CSS フォント + - CSS プロパティ + - Reference + - font + - ウェブ +translation_of: Web/CSS/font-style +--- +
{{CSSRef}}
+ +

CSS の font-style プロパティは、フォントが {{cssxref("font-family")}} の中で通常体 (normal)、筆記体 (italic)、斜体 (oblique) のどれでスタイル付けするかを設定します。

+ +
{{EmbedInteractiveExample("pages/css/font-style.html")}}
+ + + +

italic フォントフェイスは通常、本質的に筆記体であり、スタイル付けされていない書体より水平方向の幅が小さいのが一般的です。一方 oblique フェイスはたいてい、通常のフェイスを傾けただけです。 italic と oblique のいずれも、通常のフェイスのグリフを人工的に傾けることによってシミュレートされます (この制御については {{cssxref("font-synthesis")}} をご覧ください)。

+ +

構文

+ +
font-style: normal;
+font-style: italic;
+font-style: oblique;
+font-style: oblique 10deg;
+
+/* グローバル値 */
+font-style: inherit;
+font-style: initial;
+font-style: unset;
+
+ +

font-style プロパティは、以下の一覧から選択した単一のキーワードで指定し、キーワードが oblique であれば任意で角度を含めることができます。

+ +

値

+ +
+
normal
+
{{Cssxref("font-family")}} の中で normal に分類されているフォントを選択します。
+
italic
+
italic として分類されているフォントを選択します。 italic フェイスが使用できない場合は、代わりに oblique に分類されているフォントを選択します。どちらも利用できない場合は、スタイルは人工的にシミュレートされます。
+
oblique
+
oblique として分類されているフォントを選択します。 oblique フェイスが使用できない場合は、代わりに italic に分類されているフォントを選択します。どちらも利用できない場合は、スタイルは人工的にシミュレートされます。
+
oblique <angle>
+
oblique として分類されているフォントを選択し、加えてテキストの傾きの角度を指定します。選択されたフォントファミリで１つまたは複数の oblique フェイスが利用できる場合、指定した角度に最も近いものが選択されます。 oblique フェイスが利用できない場合、ブラウザーは通常のフェイスを指定した大きさだけ傾けることで、 oblique バージョンを作成します。有効な値は-90以上90以下の角度の値です。角度が指定されない場合、14度の角度が使用されます。正の数では行末に向けて傾け、負の数では行頭に向けて傾けます。
+
+ 一般に、要求された角度が14度以上の場合、大きな角度が推奨されます。その他の場合は、より小さい角度が推奨されます (アルゴリズムの詳細は、仕様書の font matching section を参照してください)。
+
+ +

可変フォント

+ +

可変フォントでは、 oblique フェイスをどれだけ傾けるかの角度を細かく制御することができます。 oblique キーワードに <angle> 修飾子を使用して選択することができます。

+ +

TrueType または OpenType の可変フォントでは、 "slnt" 変数が oblique の傾く角度を様々に実装するために使用され、 "ital" 変数の値が 1 ならば、 italic の値を使用します。 {{cssxref("font-variation-settings")}} を参照してください。

+ +

次の例を動作させるには、 CSS Fonts Level 4 の font-style: oblique が <angle> を受け入れる構文に対応したブラウザーが必要です。

+ +
{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}
+ +

HTML

+ +
+
<header>
+    <input type="range" id="slant" name="slant" min="-90" max="90" />
+    <label for="slant">Slant</label>
+</header>
+<div class="container">
+    <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
+</div>
+
+ +

CSS

+ +
/*
+AmstelvarAlpha-VF is created by David Berlow (https://github.com/TypeNetwork/Amstelvar)
+and is used here under the terms of its license:
+https://github.com/TypeNetwork/Amstelvar/blob/master/OFL.txt
+*/
+
+@font-face {
+  src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf');
+  font-family:'AmstelvarAlpha';
+  font-style: normal;
+}
+
+label {
+  font: 1rem monospace;
+}
+
+.container {
+  max-height: 150px;
+  overflow: scroll;
+}
+
+.sample {
+  font: 2rem 'AmstelvarAlpha', sans-serif;
+}
+
+
+ + + +

JavaScript

+ +
let slantLabel = document.querySelector('label[for="slant"]');
+let slantInput = document.querySelector('#slant');
+let sampleText = document.querySelector('.sample');
+
+function update() {
+  let slant = `oblique ${slantInput.value}deg`;
+  slantLabel.textContent = `font-style: ${slant};`;
+  sampleText.style.fontStyle = slant;
+}
+
+slantInput.addEventListener('input', update);
+
+update();
+
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

フォントスタイル

+ + + +
.normal {
+  font-style: normal;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.oblique {
+  font-style: oblique;
+}
+ +

{{ EmbedLiveSample('Font_styles') }}

+ +

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

+ +

テキストの長い区間に渡って font-style の値を italic に設定すると、失読症のような認知問題を抱える人にとって読むのが難しくなる可能性があります。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-style-prop', 'font-style')}}{{Spec2('CSS4 Fonts')}}oblique の後で角度を指定できるようになった
{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}{{Spec2('CSS3 Fonts')}}変更なし
{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#font-style', 'font-style')}}{{Spec2('CSS1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

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

diff --git a/files/ja/web/css/font-synthesis/index.html b/files/ja/web/css/font-synthesis/index.html deleted file mode 100644 index 3505c10be2..0000000000 --- a/files/ja/web/css/font-synthesis/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: font-synthesis -slug: Web/CSS/font-synthesis -tags: - - CSS - - CSS Fonts - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/font-synthesis ---- -
{{CSSRef}}
- -

font-synthesis は CSS のプロパティで、太字やイタリックの字体がない場合に、ブラウザーが合成してよいかどうかを制御します。

- -
{{EmbedInteractiveExample("pages/css/font-synthesis.html")}}
- - - -

構文

- -

このプロパティは以下の形のうちの一つを取ることができます。

- - - -

値

- -
-
none
-
太字およびイタリックの字体を合成しないことを示すキーワードです。
-
weight
-
必要であれば、太字の字体を合成してよいことを示すキーワードです。
-
style
-
必要であれば、イタリックの字体を合成してよいことを示すキーワードです。
-
- -

解説

- -

ほとんどの標準的な欧文フォントにはイタリック体や太字の変化形が含まれていますが、多くのノベルティフォントには含まれていません。中国語、日本語、韓国語、その他の表語文字に使用されているフォントは、これらの変化形を含まない傾向があり、それらを合成するとテキストの可読性が損なわれる可能性があります。このような場合には、ブラウザーの既定のフォント合成機能をオフにしたほうがよいかもしれません。

- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

フォント合成の無効化

- -

HTML

- -
<em class="syn">Synthesize me! 站直。</em>
-<br/>
-<em class="no-syn">Don't synthesize me! 站直。</em>
-
- -

CSS

- -
em {
-  font-weight: bold;
-}
-.syn {
-  font-synthesis: style weight;
-}
-.no-syn {
-  font-synthesis: none;
-}
-
- -

結果

- -

{{ EmbedLiveSample('Disabling_font_synthesis', '', '50') }}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Fonts', '#propdef-font-synthesis', 'font-synthesis')}}{{Spec2('CSS3 Fonts')}}初回定義
- -

ブラウザーの互換性

- -

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

- -

See also

- - diff --git a/files/ja/web/css/font-synthesis/index.md b/files/ja/web/css/font-synthesis/index.md new file mode 100644 index 0000000000..3505c10be2 --- /dev/null +++ b/files/ja/web/css/font-synthesis/index.md @@ -0,0 +1,109 @@ +--- +title: font-synthesis +slug: Web/CSS/font-synthesis +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/font-synthesis +--- +
{{CSSRef}}
+ +

font-synthesis は CSS のプロパティで、太字やイタリックの字体がない場合に、ブラウザーが合成してよいかどうかを制御します。

+ +
{{EmbedInteractiveExample("pages/css/font-synthesis.html")}}
+ + + +

構文

+ +

このプロパティは以下の形のうちの一つを取ることができます。

+ + + +

値

+ +
+
none
+
太字およびイタリックの字体を合成しないことを示すキーワードです。
+
weight
+
必要であれば、太字の字体を合成してよいことを示すキーワードです。
+
style
+
必要であれば、イタリックの字体を合成してよいことを示すキーワードです。
+
+ +

解説

+ +

ほとんどの標準的な欧文フォントにはイタリック体や太字の変化形が含まれていますが、多くのノベルティフォントには含まれていません。中国語、日本語、韓国語、その他の表語文字に使用されているフォントは、これらの変化形を含まない傾向があり、それらを合成するとテキストの可読性が損なわれる可能性があります。このような場合には、ブラウザーの既定のフォント合成機能をオフにしたほうがよいかもしれません。

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

フォント合成の無効化

+ +

HTML

+ +
<em class="syn">Synthesize me! 站直。</em>
+<br/>
+<em class="no-syn">Don't synthesize me! 站直。</em>
+
+ +

CSS

+ +
em {
+  font-weight: bold;
+}
+.syn {
+  font-synthesis: style weight;
+}
+.no-syn {
+  font-synthesis: none;
+}
+
+ +

結果

+ +

{{ EmbedLiveSample('Disabling_font_synthesis', '', '50') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#propdef-font-synthesis', 'font-synthesis')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

See also

+ + diff --git a/files/ja/web/css/font-variant-caps/index.html b/files/ja/web/css/font-variant-caps/index.html deleted file mode 100644 index 5ee4c77ecd..0000000000 --- a/files/ja/web/css/font-variant-caps/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: font-variant-caps -slug: Web/CSS/font-variant-caps -tags: - - CSS - - CSS Fonts - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/font-variant-caps ---- -
{{CSSRef}}
- -

font-variant-caps は CSS のプロパティで、大文字向けの代替字形の使用を制御します。

- -
{{EmbedInteractiveExample("pages/css/font-variant-caps.html")}}
- - - -

指定されたフォントに複数の異なる大きさで大文字の字形が含まれている場合、このプロパティは最適なものを選択します。 petite capital (小さなの大文字) の字形が利用できない場合は、スモールキャピタル (小ぶりの大文字) の字形を使用して表示します。これらが存在しない場合、ブラウザーは大文字の字形から合成します。

- -

フォントには、様々な大文字小文字の区別がない文字の特殊な字形が含まれていることがあり (発音記号など)、これらが大文字の文字により一致することがあります。しかし、小さな大文字の字形は大文字小文字の区別がない文字のために合成されることはありません。

- -

言語特有の規則

- -

このプロパティは言語特有の一致規則を考慮します。例えば以下のようなものです。

- - - -

構文

- -
/* キーワード値 */
-font-variant-caps: normal;
-font-variant-caps: small-caps;
-font-variant-caps: all-small-caps;
-font-variant-caps: petite-caps;
-font-variant-caps: all-petite-caps;
-font-variant-caps: unicase;
-font-variant-caps: titling-caps;
-
-/* グローバル値 */
-font-variant-caps: inherit;
-font-variant-caps: initial;
-font-variant-caps: unset;
-
- -

font-variant-caps プロパティは、以下のリスト内にある単一のキーワード値を使用して指定します。どの場合も、フォントが OpenType 値に対応していなければ、字形は合成によって生成されます。

- -

値

- -
-
normal
-
代替字形の使用を無効にします。
-
small-caps
-
小さな大文字の表示を有効にします (OpenType 特性: smcp)。スモールキャピタルの字形はふつう、大文字の形をしていますが、小文字の大きさに縮小されています。
-
all-small-caps
-
大文字と小文字の両方でスモールキャピタルの表示を有効にします (OpenType 機能: c2sc, smcp)。
-
petite-caps
-
petite capital の表示を有効にします (OpenType 特性: pcap)。
-
all-petite-caps
-
大文字と小文字の両方で petite capital の表示を有効にします (OpenType 特性: c2pc, pcap)。
-
unicase
-
大文字のスモールキャピタルと通常の小文字の混合表示を有効にします (OpenType 特性: unic).
-
titling-caps
-
タイトルキャピタルの表示を有効化します (OpenType 特性: titl)。大文字の字形は、ふつう小文字と一緒に使用するためにデザインされています。すべて大文字のタイトル文字列で使用された場合、太くなりすぎることがあります。タイトルキャピタルはこの場合に専用のデザインが行われたものです。
-
- -

アクセシビリティの考慮

- -

長い区間のテキストに対して font-variant の値を all-small-caps や all-petite-caps を設定すると、失読症のような認知障害を抱えた人にとって読むのが難しくなることがあります。

- - - -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

スモールキャップのフォント変化形の設定

- -

HTML

- -
<p class="small-caps">Firefox rocks, small caps!</p>
-<p class="normal">Firefox rocks, normal caps!</p>
-
- -

CSS

- -
.small-caps {
-  font-variant-caps: small-caps;
-  font-style: italic;
-}
-.normal {
-  font-variant-caps: normal;
-  font-style: italic;
-}
-
- -

結果

- -

{{ EmbedLiveSample('Setting_the_small-caps_font_variant') }}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Fonts', '#propdef-font-variant-caps', 'font-variant-caps')}}{{Spec2('CSS3 Fonts')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.font-variant-caps")}}

diff --git a/files/ja/web/css/font-variant-caps/index.md b/files/ja/web/css/font-variant-caps/index.md new file mode 100644 index 0000000000..5ee4c77ecd --- /dev/null +++ b/files/ja/web/css/font-variant-caps/index.md @@ -0,0 +1,136 @@ +--- +title: font-variant-caps +slug: Web/CSS/font-variant-caps +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/font-variant-caps +--- +
{{CSSRef}}
+ +

font-variant-caps は CSS のプロパティで、大文字向けの代替字形の使用を制御します。

+ +
{{EmbedInteractiveExample("pages/css/font-variant-caps.html")}}
+ + + +

指定されたフォントに複数の異なる大きさで大文字の字形が含まれている場合、このプロパティは最適なものを選択します。 petite capital (小さなの大文字) の字形が利用できない場合は、スモールキャピタル (小ぶりの大文字) の字形を使用して表示します。これらが存在しない場合、ブラウザーは大文字の字形から合成します。

+ +

フォントには、様々な大文字小文字の区別がない文字の特殊な字形が含まれていることがあり (発音記号など)、これらが大文字の文字により一致することがあります。しかし、小さな大文字の字形は大文字小文字の区別がない文字のために合成されることはありません。

+ +

言語特有の規則

+ +

このプロパティは言語特有の一致規則を考慮します。例えば以下のようなものです。

+ + + +

構文

+ +
/* キーワード値 */
+font-variant-caps: normal;
+font-variant-caps: small-caps;
+font-variant-caps: all-small-caps;
+font-variant-caps: petite-caps;
+font-variant-caps: all-petite-caps;
+font-variant-caps: unicase;
+font-variant-caps: titling-caps;
+
+/* グローバル値 */
+font-variant-caps: inherit;
+font-variant-caps: initial;
+font-variant-caps: unset;
+
+ +

font-variant-caps プロパティは、以下のリスト内にある単一のキーワード値を使用して指定します。どの場合も、フォントが OpenType 値に対応していなければ、字形は合成によって生成されます。

+ +

値

+ +
+
normal
+
代替字形の使用を無効にします。
+
small-caps
+
小さな大文字の表示を有効にします (OpenType 特性: smcp)。スモールキャピタルの字形はふつう、大文字の形をしていますが、小文字の大きさに縮小されています。
+
all-small-caps
+
大文字と小文字の両方でスモールキャピタルの表示を有効にします (OpenType 機能: c2sc, smcp)。
+
petite-caps
+
petite capital の表示を有効にします (OpenType 特性: pcap)。
+
all-petite-caps
+
大文字と小文字の両方で petite capital の表示を有効にします (OpenType 特性: c2pc, pcap)。
+
unicase
+
大文字のスモールキャピタルと通常の小文字の混合表示を有効にします (OpenType 特性: unic).
+
titling-caps
+
タイトルキャピタルの表示を有効化します (OpenType 特性: titl)。大文字の字形は、ふつう小文字と一緒に使用するためにデザインされています。すべて大文字のタイトル文字列で使用された場合、太くなりすぎることがあります。タイトルキャピタルはこの場合に専用のデザインが行われたものです。
+
+ +

アクセシビリティの考慮

+ +

長い区間のテキストに対して font-variant の値を all-small-caps や all-petite-caps を設定すると、失読症のような認知障害を抱えた人にとって読むのが難しくなることがあります。

+ + + +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

スモールキャップのフォント変化形の設定

+ +

HTML

+ +
<p class="small-caps">Firefox rocks, small caps!</p>
+<p class="normal">Firefox rocks, normal caps!</p>
+
+ +

CSS

+ +
.small-caps {
+  font-variant-caps: small-caps;
+  font-style: italic;
+}
+.normal {
+  font-variant-caps: normal;
+  font-style: italic;
+}
+
+ +

結果

+ +

{{ EmbedLiveSample('Setting_the_small-caps_font_variant') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#propdef-font-variant-caps', 'font-variant-caps')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.font-variant-caps")}}

diff --git a/files/ja/web/css/font-variant-east-asian/index.html b/files/ja/web/css/font-variant-east-asian/index.html deleted file mode 100644 index 4c37b35a16..0000000000 --- a/files/ja/web/css/font-variant-east-asian/index.html +++ /dev/null @@ -1,184 +0,0 @@ ---- -title: font-variant-east-asian -slug: Web/CSS/font-variant-east-asian -tags: - - CSS - - CSS Fonts - - CSS Property - - NeedsLiveSample - - Reference - - 'recipe:css-property' - - 日本語処理 -translation_of: Web/CSS/font-variant-east-asian ---- -
{{CSSRef}}
- -

CSS の font-variant-numeric プロパティは、日本語と中国語のような東アジアの字形の違いを制御するために使用します。

- -
font-variant-east-asian: normal;
-font-variant-east-asian: ruby;
-font-variant-east-asian: jis78;              /* <east-asian-variant-values> */
-font-variant-east-asian: jis83;              /* <east-asian-variant-values> */
-font-variant-east-asian: jis90;              /* <east-asian-variant-values> */
-font-variant-east-asian: jis04;              /* <east-asian-variant-values> */
-font-variant-east-asian: simplified;         /* <east-asian-variant-values> */
-font-variant-east-asian: traditional;        /* <east-asian-variant-values> */
-font-variant-east-asian: full-width;         /* <east-asian-width-values> */
-font-variant-east-asian: proportional-width; /* <east-asian-width-values> */
-font-variant-east-asian: ruby full-width jis83;
-
-/* グローバル値 */
-font-variant-east-asian: inherit;
-font-variant-east-asian: initial;
-font-variant-east-asian: unset;
-
- -

構文

- -

値

- -
-
normal
-
このキーワードは、別形式の表記の使用を無効にします。
-
ruby
-
このキーワードは、ルビ文字のための特殊な表記の使用を強制します。ふつうは小さめで、フォントの作者がよく特定の形状でデザインし、ふつうはコントラストを上げるためにわずかに太くします。このキーワードは OpenType の ruby の値に対応します。
-
<east-asian-variant-values>
-
これらの値は、表示に使用される字形の違いのセットを指定します。利用可能な値は以下の通りです。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
キーワード標準による形状の定義OpenType の対応
jis78JIS X 0208:1978jp78
jis83JIS X 0208:1983jp83
jis90JIS X 0208:1990jp90
jis04JIS X 0213:2004jp04
simplifiedなし。簡体字中国語の字形を使用smpl
traditionalなし。繁体字中国語の字形を使用trad
-
-
<east-asian-width-values>
-
これらの値は東アジアの文字の大きさを制御します。二つの値が利用できます。 -
    -
  • proportional-width は、東アジアの文字の幅が多様なセットを有効にします。 OpenType の pwid の値に対応します。
    • -
  • full-width は、東アジアの文字がすべて同じ、およそ正方形で、一定幅のセットを有効にします。 OpenType の fwid に対応します。
    • -
-
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

東アジアの字形の変化形を設定

- -

この例は OS に「游ゴシック」フォントがインストールされていることが必要で、ほかのフォントでは OpenType 機能に対応していない可能性があります。

- -

HTML

- -
<table>
-<thead></thead>
-<tbody style="border:0;">
-  <tr>
-    <th>normal/jis78:</th>
-    <td>麹町</td>
-    <td class="jis78">麹町</td>
-  </tr>
-  <tr>
-    <th>normal/ruby:</th>
-    <td>しんかんせん</td>
-    <td class="ruby">しんかんせん</td>
-  </tr>
-  <tr>
-    <th>normal/traditional:</th>
-    <td>大学</td>
-    <td class="traditional">大学</td>
-  </tr>
-</tbody>
-</table>
-
- -

CSS

- -
td{
-  font-family:"Yu Gothic";
-  font-size:20px;
-}
-th{
-  color:grey;
-  padding-right:10px;
-}
-
-.ruby {
-  font-variant-east-asian: ruby;
-}
-
-.jis78 {
-  font-variant-east-asian: jis78;
-}
-
-.traditional{
-  font-variant-east-asian: traditional;
-}
-
-
- -

結果

- -

{{EmbedLiveSample('Setting_East_Asian_glyph_variants')}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状況備考
{{SpecName('CSS3 Fonts', '#propdef-font-variant-east-asian', 'font-variant-east-asian')}}{{Spec2('CSS3 Fonts')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.font-variant-east-asian")}}

diff --git a/files/ja/web/css/font-variant-east-asian/index.md b/files/ja/web/css/font-variant-east-asian/index.md new file mode 100644 index 0000000000..4c37b35a16 --- /dev/null +++ b/files/ja/web/css/font-variant-east-asian/index.md @@ -0,0 +1,184 @@ +--- +title: font-variant-east-asian +slug: Web/CSS/font-variant-east-asian +tags: + - CSS + - CSS Fonts + - CSS Property + - NeedsLiveSample + - Reference + - 'recipe:css-property' + - 日本語処理 +translation_of: Web/CSS/font-variant-east-asian +--- +
{{CSSRef}}
+ +

CSS の font-variant-numeric プロパティは、日本語と中国語のような東アジアの字形の違いを制御するために使用します。

+ +
font-variant-east-asian: normal;
+font-variant-east-asian: ruby;
+font-variant-east-asian: jis78;              /* <east-asian-variant-values> */
+font-variant-east-asian: jis83;              /* <east-asian-variant-values> */
+font-variant-east-asian: jis90;              /* <east-asian-variant-values> */
+font-variant-east-asian: jis04;              /* <east-asian-variant-values> */
+font-variant-east-asian: simplified;         /* <east-asian-variant-values> */
+font-variant-east-asian: traditional;        /* <east-asian-variant-values> */
+font-variant-east-asian: full-width;         /* <east-asian-width-values> */
+font-variant-east-asian: proportional-width; /* <east-asian-width-values> */
+font-variant-east-asian: ruby full-width jis83;
+
+/* グローバル値 */
+font-variant-east-asian: inherit;
+font-variant-east-asian: initial;
+font-variant-east-asian: unset;
+
+ +

構文

+ +

値

+ +
+
normal
+
このキーワードは、別形式の表記の使用を無効にします。
+
ruby
+
このキーワードは、ルビ文字のための特殊な表記の使用を強制します。ふつうは小さめで、フォントの作者がよく特定の形状でデザインし、ふつうはコントラストを上げるためにわずかに太くします。このキーワードは OpenType の ruby の値に対応します。
+
<east-asian-variant-values>
+
これらの値は、表示に使用される字形の違いのセットを指定します。利用可能な値は以下の通りです。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
キーワード標準による形状の定義OpenType の対応
jis78JIS X 0208:1978jp78
jis83JIS X 0208:1983jp83
jis90JIS X 0208:1990jp90
jis04JIS X 0213:2004jp04
simplifiedなし。簡体字中国語の字形を使用smpl
traditionalなし。繁体字中国語の字形を使用trad
+
+
<east-asian-width-values>
+
これらの値は東アジアの文字の大きさを制御します。二つの値が利用できます。 +
    +
  • proportional-width は、東アジアの文字の幅が多様なセットを有効にします。 OpenType の pwid の値に対応します。
    • +
  • full-width は、東アジアの文字がすべて同じ、およそ正方形で、一定幅のセットを有効にします。 OpenType の fwid に対応します。
    • +
+
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

東アジアの字形の変化形を設定

+ +

この例は OS に「游ゴシック」フォントがインストールされていることが必要で、ほかのフォントでは OpenType 機能に対応していない可能性があります。

+ +

HTML

+ +
<table>
+<thead></thead>
+<tbody style="border:0;">
+  <tr>
+    <th>normal/jis78:</th>
+    <td>麹町</td>
+    <td class="jis78">麹町</td>
+  </tr>
+  <tr>
+    <th>normal/ruby:</th>
+    <td>しんかんせん</td>
+    <td class="ruby">しんかんせん</td>
+  </tr>
+  <tr>
+    <th>normal/traditional:</th>
+    <td>大学</td>
+    <td class="traditional">大学</td>
+  </tr>
+</tbody>
+</table>
+
+ +

CSS

+ +
td{
+  font-family:"Yu Gothic";
+  font-size:20px;
+}
+th{
+  color:grey;
+  padding-right:10px;
+}
+
+.ruby {
+  font-variant-east-asian: ruby;
+}
+
+.jis78 {
+  font-variant-east-asian: jis78;
+}
+
+.traditional{
+  font-variant-east-asian: traditional;
+}
+
+
+ +

結果

+ +

{{EmbedLiveSample('Setting_East_Asian_glyph_variants')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状況備考
{{SpecName('CSS3 Fonts', '#propdef-font-variant-east-asian', 'font-variant-east-asian')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.font-variant-east-asian")}}

diff --git a/files/ja/web/css/font-variant-ligatures/index.html b/files/ja/web/css/font-variant-ligatures/index.html deleted file mode 100644 index edf996a99a..0000000000 --- a/files/ja/web/css/font-variant-ligatures/index.html +++ /dev/null @@ -1,215 +0,0 @@ ---- -title: font-variant-ligatures -slug: Web/CSS/font-variant-ligatures -tags: - - CSS - - CSS Fonts - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/font-variant-ligatures ---- -
{{CSSRef}}
- -

font-variant-ligatures は CSS のプロパティで、適用される用途の文字コンテンツで使われる{{Glossary("ligature", "合字")}}および{{Glossary("contextual forms", "文脈に合わせた字形")}}を制御します。これにより、結果のテキストでより調和した形を利用することができます。

- -
{{EmbedInteractiveExample("pages/css/font-variant-ligatures.html")}}
- - - -

構文

- -
/* キーワード値 */
-font-variant-ligatures: normal;
-font-variant-ligatures: none;
-font-variant-ligatures: common-ligatures;           /* <common-lig-values> */
-font-variant-ligatures: no-common-ligatures;        /* <common-lig-values> */
-font-variant-ligatures: discretionary-ligatures;    /* <discretionary-lig-values> */
-font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */
-font-variant-ligatures: historical-ligatures;       /* <historical-lig-values> */
-font-variant-ligatures: no-historical-ligatures;    /* <historical-lig-values> */
-font-variant-ligatures: contextual;                 /* <contextual-alt-values> */
-font-variant-ligatures: no-contextual;              /* <contextual-alt-values> */
-
-/* グローバル値 */
-font-variant-ligatures: inherit;
-font-variant-ligatures: initial;
-font-variant-ligatures: unset;
-
- -

font-variant-ligatures プロパティは、以下の一覧のキーワード値のうち一つで指定します。

- -

値

- -
-
normal
-
正しいレンダリングに必要な通常の合字や文脈書式を有効にします。有効になる合字と書式は、フォント、言語、および書法の種類によって異なります。これが既定値です。
-
none
-
一般的なものであっても、すべての合字や文脈書式を無効にします。
-
<common-lig-values>
-
fi, ffi, th などの、よくある合字を制御します。 OpenType の値 liga および clig に対応します。二つの値が指定できます。 -
    -
  • common-ligatures: これらの合字を有効にします。なお、キーワード normal はこれらの合字を有効にします。
    • -
  • no-common-ligatures: これらの合字を無効にします。
    • -
-
-
<discretionary-lig-values>
-
フォントに依存し文字デザイナーが定義する特定の合字を制御します。対応する OpenType の値は dlig です。二つの値が指定できます。 -
    -
  • discretionary-ligatures: これらの合字を有効にします。
    • -
  • no-discretionary-ligatures: これらの合字を無効にします。なお、キーワード normal はふつう、これらの合字を無効にします。
    • -
-
-
<historical-lig-values>
-
古い本で歴史的に使用された、ドイツ語の tz を ꜩ と表示するような合字です。対応する OpenType の値は hlig です。二つの値が指定できます。 -
    -
  • historical-ligatures: これらの合字を有効にします。
    • -
  • no-historical-ligatures これらの合字を無効にします。なお、キーワード normal はふつう、これらの合字を無効にします。
    • -
-
-
<contextual-alt-values>
-
字形を文脈に合わせるかどうかを制御します。つまり、字形を周囲の文字に合わせるかどうかです。対応する OpenType の値は calt です。二つの値が指定できます。 -
    -
  • contextual: 文脈的な変更を使用するよう指定します。なお、キーワード normal はこれらの合字も有効にします。
    • -
  • no-contextual: 使用を避けます。
    • -
-
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

フォントの合字と文脈に合わせた字形の設定

- -

HTML

- -
<link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet">
-<p class="normal">
-  normal<br>
-  if fi ff tf ft jf fj
-</p>
-<p class="none">
-  none<br>
-  if fi ff tf ft jf fj
-</p>
-<p class="common-ligatures">
-  common-ligatures<br>
-  if fi ff tf ft jf fj
-</p>
-<p class="no-common-ligatures">
-  no-common-ligatures<br>
-  if fi ff tf ft jf fj
-</p>
-<p class="discretionary-ligatures">
-  discretionary-ligatures<br>
-  if fi ff tf ft jf fj
-</p>
-<p class="no-discretionary-ligatures">
-  no-discretionary-ligatures<br>
-  if fi ff tf ft jf fj
-</p>
-<p class="historical-ligatures">
-  historical-ligatures<br>
-  if fi ff tf ft jf fj
-</p>
-<p class="no-historical-ligatures">
-  no-historical-ligatures<br>
-  if fi ff tf ft jf fj
-</p>
-<p class="contextual">
-  contextual<br>
-  if fi ff tf ft jf fj
-</p>
-<p class="no-contextual">
-  no-contextual<br>
-  if fi ff tf ft jf fj
-</p>
-<p class="contextual">
-  contextual<br>
-  if fi ff tf ft jf fj
-</p>
-
-
- -

CSS

- -
p {
-  font-family: Lora, serif;
-}
-.normal {
-  font-variant-ligatures: normal;
-}
-
-.none {
-  font-variant-ligatures: none;
-}
-
-.common-ligatures {
-  font-variant-ligatures: common-ligatures;
-}
-
-.no-common-ligatures {
-  font-variant-ligatures: no-common-ligatures;
-}
-
-.discretionary-ligatures {
-  font-variant-ligatures: discretionary-ligatures;
-}
-
-.no-discretionary-ligatures {
-  font-variant-ligatures: no-discretionary-ligatures;
-}
-
-.historical-ligatures {
-  font-variant-ligatures: historical-ligatures;
-}
-
-.no-historical-ligatures {
-  font-variant-ligatures: no-historical-ligatures;
-}
-
-.contextual {
-  font-variant-ligatures: contextual;
-}
-
-.no-contextual {
-  font-variant-ligatures: no-contextual;
-}
-
-.contextual {
-  font-variant-ligatures: contextual;
-}
- -

結果

- -

{{ EmbedLiveSample('Setting_font_ligatures_and_contextual_forms', '', '700', '', 'Web/CSS/font-variant-ligatures') }}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Fonts', '#propdef-font-variant-ligatures', 'font-variant-ligatures')}}{{Spec2('CSS3 Fonts')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.font-variant-ligatures")}}

diff --git a/files/ja/web/css/font-variant-ligatures/index.md b/files/ja/web/css/font-variant-ligatures/index.md new file mode 100644 index 0000000000..edf996a99a --- /dev/null +++ b/files/ja/web/css/font-variant-ligatures/index.md @@ -0,0 +1,215 @@ +--- +title: font-variant-ligatures +slug: Web/CSS/font-variant-ligatures +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/font-variant-ligatures +--- +
{{CSSRef}}
+ +

font-variant-ligatures は CSS のプロパティで、適用される用途の文字コンテンツで使われる{{Glossary("ligature", "合字")}}および{{Glossary("contextual forms", "文脈に合わせた字形")}}を制御します。これにより、結果のテキストでより調和した形を利用することができます。

+ +
{{EmbedInteractiveExample("pages/css/font-variant-ligatures.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+font-variant-ligatures: normal;
+font-variant-ligatures: none;
+font-variant-ligatures: common-ligatures;           /* <common-lig-values> */
+font-variant-ligatures: no-common-ligatures;        /* <common-lig-values> */
+font-variant-ligatures: discretionary-ligatures;    /* <discretionary-lig-values> */
+font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */
+font-variant-ligatures: historical-ligatures;       /* <historical-lig-values> */
+font-variant-ligatures: no-historical-ligatures;    /* <historical-lig-values> */
+font-variant-ligatures: contextual;                 /* <contextual-alt-values> */
+font-variant-ligatures: no-contextual;              /* <contextual-alt-values> */
+
+/* グローバル値 */
+font-variant-ligatures: inherit;
+font-variant-ligatures: initial;
+font-variant-ligatures: unset;
+
+ +

font-variant-ligatures プロパティは、以下の一覧のキーワード値のうち一つで指定します。

+ +

値

+ +
+
normal
+
正しいレンダリングに必要な通常の合字や文脈書式を有効にします。有効になる合字と書式は、フォント、言語、および書法の種類によって異なります。これが既定値です。
+
none
+
一般的なものであっても、すべての合字や文脈書式を無効にします。
+
<common-lig-values>
+
fi, ffi, th などの、よくある合字を制御します。 OpenType の値 liga および clig に対応します。二つの値が指定できます。 +
    +
  • common-ligatures: これらの合字を有効にします。なお、キーワード normal はこれらの合字を有効にします。
    • +
  • no-common-ligatures: これらの合字を無効にします。
    • +
+
+
<discretionary-lig-values>
+
フォントに依存し文字デザイナーが定義する特定の合字を制御します。対応する OpenType の値は dlig です。二つの値が指定できます。 +
    +
  • discretionary-ligatures: これらの合字を有効にします。
    • +
  • no-discretionary-ligatures: これらの合字を無効にします。なお、キーワード normal はふつう、これらの合字を無効にします。
    • +
+
+
<historical-lig-values>
+
古い本で歴史的に使用された、ドイツ語の tz を ꜩ と表示するような合字です。対応する OpenType の値は hlig です。二つの値が指定できます。 +
    +
  • historical-ligatures: これらの合字を有効にします。
    • +
  • no-historical-ligatures これらの合字を無効にします。なお、キーワード normal はふつう、これらの合字を無効にします。
    • +
+
+
<contextual-alt-values>
+
字形を文脈に合わせるかどうかを制御します。つまり、字形を周囲の文字に合わせるかどうかです。対応する OpenType の値は calt です。二つの値が指定できます。 +
    +
  • contextual: 文脈的な変更を使用するよう指定します。なお、キーワード normal はこれらの合字も有効にします。
    • +
  • no-contextual: 使用を避けます。
    • +
+
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

フォントの合字と文脈に合わせた字形の設定

+ +

HTML

+ +
<link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet">
+<p class="normal">
+  normal<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="none">
+  none<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="common-ligatures">
+  common-ligatures<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="no-common-ligatures">
+  no-common-ligatures<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="discretionary-ligatures">
+  discretionary-ligatures<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="no-discretionary-ligatures">
+  no-discretionary-ligatures<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="historical-ligatures">
+  historical-ligatures<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="no-historical-ligatures">
+  no-historical-ligatures<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="contextual">
+  contextual<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="no-contextual">
+  no-contextual<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="contextual">
+  contextual<br>
+  if fi ff tf ft jf fj
+</p>
+
+
+ +

CSS

+ +
p {
+  font-family: Lora, serif;
+}
+.normal {
+  font-variant-ligatures: normal;
+}
+
+.none {
+  font-variant-ligatures: none;
+}
+
+.common-ligatures {
+  font-variant-ligatures: common-ligatures;
+}
+
+.no-common-ligatures {
+  font-variant-ligatures: no-common-ligatures;
+}
+
+.discretionary-ligatures {
+  font-variant-ligatures: discretionary-ligatures;
+}
+
+.no-discretionary-ligatures {
+  font-variant-ligatures: no-discretionary-ligatures;
+}
+
+.historical-ligatures {
+  font-variant-ligatures: historical-ligatures;
+}
+
+.no-historical-ligatures {
+  font-variant-ligatures: no-historical-ligatures;
+}
+
+.contextual {
+  font-variant-ligatures: contextual;
+}
+
+.no-contextual {
+  font-variant-ligatures: no-contextual;
+}
+
+.contextual {
+  font-variant-ligatures: contextual;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Setting_font_ligatures_and_contextual_forms', '', '700', '', 'Web/CSS/font-variant-ligatures') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#propdef-font-variant-ligatures', 'font-variant-ligatures')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.font-variant-ligatures")}}

diff --git a/files/ja/web/css/font-variant-numeric/index.html b/files/ja/web/css/font-variant-numeric/index.html deleted file mode 100644 index 9421481409..0000000000 --- a/files/ja/web/css/font-variant-numeric/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: font-variant-numeric -slug: Web/CSS/font-variant-numeric -tags: - - CSS - - CSS フォント - - CSS プロパティ - - リファレンス -translation_of: Web/CSS/font-variant-numeric ---- -
{{CSSRef}}
- -

CSS の font-variant-numeric プロパティは、数字、分数、序数記号の表記を制御するために使用します。

- -
{{EmbedInteractiveExample("pages/css/font-variant-numeric.html")}}
- - - -

構文

- -
font-variant-numeric: normal;
-font-variant-numeric: ordinal;
-font-variant-numeric: slashed-zero;
-font-variant-numeric: lining-nums;         /* <numeric-figure-values> */
-font-variant-numeric: oldstyle-nums;       /* <numeric-figure-values> */
-font-variant-numeric: proportional-nums;   /* <numeric-spacing-values> */
-font-variant-numeric: tabular-nums;        /* <numeric-spacing-values> */
-font-variant-numeric: diagonal-fractions;  /* <numeric-fraction-values> */
-font-variant-numeric: stacked-fractions;   /* <numeric-fraction-values> */
-font-variant-numeric: oldstyle-nums stacked-fractions;
-
-/* グローバル値 */
-font-variant-numeric: inherit;
-font-variant-numeric: initial;
-font-variant-numeric: unset;
-
- -

このプロパティは二つの形のうちの一つを取ります。

- - - -

値

- -
-
normal
-
このキーワードは、別形式の表記の使用を無効にします。
-
ordinal
-
このキーワードは、序数記号に対して特別な表記を使用します。英語では 1st, 2nd, 3rd, 4th、イタリア語では 1a です。 OpenType の ordn の値に対応します。
-
slashed-zero
-
このキーワードは、スラッシュ付きの 0 を使用します。これは O と 0 を明確に区別する必要がある場合に便利です。 OpenType の zero の値に対応します。
-
<numeric-figure-values>
-
これらの値は、数字の形状を制御します。二つの値が利用できます。 -
    -
  • lining-nums は、全てをベースライン上に並べる表記を有効にします。 OpenType の lnum の値に対応します。
    • -
  • oldstyle-nums は、 3, 4, 7, 9 などいくつかの数字を下げる表記を有効にします。 OpenType の onum の値に対応します。
    • -
-
-
<numeric-spacing-values>
-
これらの値は、数字の表記の大きさを制御します。二つの値が利用できます。 -
    -
  • proportional-nums は、数字をすべて同じ大きさにしない表記を有効にします。 OpenType の pnum の値に対応します。
    • -
  • tabular-nums は、数字を同じ大きさにする表記を有効にし、表の中に配置しやすくします。 OpenType の tnum の値に対応します。
    • -
-
-
<numeric-fraction-values>
-
これらの値は、分数の表示に使う表記を制御します。二つの値が利用できます。 -
    -
  • diagonal-fractions は、分子と分母が小さめになり、スラッシュで区切られる表記を有効にします。 OpenType の frac の値に対応します。
    • -
  • stacked-fractions は、分子と分母が小さめになり、積み重ねられて水平線で区切られた表記を有効にします。 OpenType の afrc の値に対応します。
    • -
-
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p>
- -

CSS

- -
/*
-This example uses the Source Sans Pro OpenType font, developed by Adobe
-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 {
-  font-family: "Source Sans Pro";
-  font-style: normal;
-  font-weight: 400;
-  src: url("https://mdn.mozillademos.org/files/15757/SourceSansPro-Regular.otf") format("opentype");
-}
-
-.ordinal {
-  font-variant-numeric: ordinal;
-  font-family: "Source Sans Pro";
-}
-
- -

結果

- -

{{EmbedLiveSample('Examples')}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状況備考
{{SpecName('CSS3 Fonts', '#propdef-font-variant-numeric', 'font-variant-numeric')}}{{Spec2('CSS3 Fonts')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

{{Compat("css.properties.font-variant-numeric")}}

diff --git a/files/ja/web/css/font-variant-numeric/index.md b/files/ja/web/css/font-variant-numeric/index.md new file mode 100644 index 0000000000..9421481409 --- /dev/null +++ b/files/ja/web/css/font-variant-numeric/index.md @@ -0,0 +1,135 @@ +--- +title: font-variant-numeric +slug: Web/CSS/font-variant-numeric +tags: + - CSS + - CSS フォント + - CSS プロパティ + - リファレンス +translation_of: Web/CSS/font-variant-numeric +--- +
{{CSSRef}}
+ +

CSS の font-variant-numeric プロパティは、数字、分数、序数記号の表記を制御するために使用します。

+ +
{{EmbedInteractiveExample("pages/css/font-variant-numeric.html")}}
+ + + +

構文

+ +
font-variant-numeric: normal;
+font-variant-numeric: ordinal;
+font-variant-numeric: slashed-zero;
+font-variant-numeric: lining-nums;         /* <numeric-figure-values> */
+font-variant-numeric: oldstyle-nums;       /* <numeric-figure-values> */
+font-variant-numeric: proportional-nums;   /* <numeric-spacing-values> */
+font-variant-numeric: tabular-nums;        /* <numeric-spacing-values> */
+font-variant-numeric: diagonal-fractions;  /* <numeric-fraction-values> */
+font-variant-numeric: stacked-fractions;   /* <numeric-fraction-values> */
+font-variant-numeric: oldstyle-nums stacked-fractions;
+
+/* グローバル値 */
+font-variant-numeric: inherit;
+font-variant-numeric: initial;
+font-variant-numeric: unset;
+
+ +

このプロパティは二つの形のうちの一つを取ります。

+ + + +

値

+ +
+
normal
+
このキーワードは、別形式の表記の使用を無効にします。
+
ordinal
+
このキーワードは、序数記号に対して特別な表記を使用します。英語では 1st, 2nd, 3rd, 4th、イタリア語では 1a です。 OpenType の ordn の値に対応します。
+
slashed-zero
+
このキーワードは、スラッシュ付きの 0 を使用します。これは O と 0 を明確に区別する必要がある場合に便利です。 OpenType の zero の値に対応します。
+
<numeric-figure-values>
+
これらの値は、数字の形状を制御します。二つの値が利用できます。 +
    +
  • lining-nums は、全てをベースライン上に並べる表記を有効にします。 OpenType の lnum の値に対応します。
    • +
  • oldstyle-nums は、 3, 4, 7, 9 などいくつかの数字を下げる表記を有効にします。 OpenType の onum の値に対応します。
    • +
+
+
<numeric-spacing-values>
+
これらの値は、数字の表記の大きさを制御します。二つの値が利用できます。 +
    +
  • proportional-nums は、数字をすべて同じ大きさにしない表記を有効にします。 OpenType の pnum の値に対応します。
    • +
  • tabular-nums は、数字を同じ大きさにする表記を有効にし、表の中に配置しやすくします。 OpenType の tnum の値に対応します。
    • +
+
+
<numeric-fraction-values>
+
これらの値は、分数の表示に使う表記を制御します。二つの値が利用できます。 +
    +
  • diagonal-fractions は、分子と分母が小さめになり、スラッシュで区切られる表記を有効にします。 OpenType の frac の値に対応します。
    • +
  • stacked-fractions は、分子と分母が小さめになり、積み重ねられて水平線で区切られた表記を有効にします。 OpenType の afrc の値に対応します。
    • +
+
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p>
+ +

CSS

+ +
/*
+This example uses the Source Sans Pro OpenType font, developed by Adobe
+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 {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  src: url("https://mdn.mozillademos.org/files/15757/SourceSansPro-Regular.otf") format("opentype");
+}
+
+.ordinal {
+  font-variant-numeric: ordinal;
+  font-family: "Source Sans Pro";
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Examples')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状況備考
{{SpecName('CSS3 Fonts', '#propdef-font-variant-numeric', 'font-variant-numeric')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

{{Compat("css.properties.font-variant-numeric")}}

diff --git a/files/ja/web/css/font-variant-position/index.html b/files/ja/web/css/font-variant-position/index.html deleted file mode 100644 index 8e474c20c5..0000000000 --- a/files/ja/web/css/font-variant-position/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: font-variant-position -slug: Web/CSS/font-variant-position -tags: - - CSS - - CSS フォント - - CSS プロパティ - - Reference -translation_of: Web/CSS/font-variant-position ---- -
{{CSSRef}}
- -

CSS の font-variant-position プロパティは、上付き文字または下付き文字として配置された小さな代替文字の使用を制御します。

- -

文字は変更されないまま、フォントのベースラインから相対的に配置されます。これらの文字はふつう、 {{HTMLElement("sub")}} と {{HTMLElement("sup")}} 要素で使用されます。

- -
/* キーワード値 */
-font-variant-position: normal;
-font-variant-position: sub;
-font-variant-position: super;
-
-/* グローバル値 */
-font-variant-position: inherit;
-font-variant-position: initial;
-font-variant-position: unset;
-
- -

これらの代替文字の使用が有効の場合、一連の中のある文字がそのような字体 - 強調字体を持っていない場合、一連の文字のセット全体が代替方法を使用して、合成によって描画されます。

- -

これらの代替字体は、フォントの他の部分と同じ em ボックスと同じベースラインを共有します。それらは単にグラフィカルに強化されており、行の高さや他のボックスの特性には影響しません。

- -

{{cssinfo}}

- -

構文

- -

font-variant-position プロパティは、以下に列挙されたキーワード値のうちの一つで指定します。

- -

値

- -
-
normal
-
上付き文字および下付き文字の字体の代替を無効にします。
-
sub
-
下付き文字の代替グリフを有効にします。特定の文字列で、そのような文字の1つが使用できない場合、文字列内のすべての文字が合成を使用して描画されます。
-
super
-
上付き文字の代替グリフを有効にします。特定の文字列で、そのような文字の1つが使用できない場合、文字列内のすべての文字が合成を使用して描画されます。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<p class="normal">Normal!</p>
-<p class="super">Super!</p>
-<p class="sub">Sub!</p>
-
- -

CSS

- -
p {
-  display: inline;
-}
-
-.normal {
-  font-variant-position: normal;
-}
-
-.super {
-  font-variant-position: super;
-}
-
-.sub {
-  font-variant-position: sub;
-}
-
- -

結果

- -

{{ EmbedLiveSample('Examples') }}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Fonts', '#propdef-font-variant-position', 'font-variant-position')}}{{Spec2('CSS3 Fonts')}}初回定義
- -

ブラウザーの対応

- -

{{Compat("css.properties.font-variant-position")}}

diff --git a/files/ja/web/css/font-variant-position/index.md b/files/ja/web/css/font-variant-position/index.md new file mode 100644 index 0000000000..8e474c20c5 --- /dev/null +++ b/files/ja/web/css/font-variant-position/index.md @@ -0,0 +1,106 @@ +--- +title: font-variant-position +slug: Web/CSS/font-variant-position +tags: + - CSS + - CSS フォント + - CSS プロパティ + - Reference +translation_of: Web/CSS/font-variant-position +--- +
{{CSSRef}}
+ +

CSS の font-variant-position プロパティは、上付き文字または下付き文字として配置された小さな代替文字の使用を制御します。

+ +

文字は変更されないまま、フォントのベースラインから相対的に配置されます。これらの文字はふつう、 {{HTMLElement("sub")}} と {{HTMLElement("sup")}} 要素で使用されます。

+ +
/* キーワード値 */
+font-variant-position: normal;
+font-variant-position: sub;
+font-variant-position: super;
+
+/* グローバル値 */
+font-variant-position: inherit;
+font-variant-position: initial;
+font-variant-position: unset;
+
+ +

これらの代替文字の使用が有効の場合、一連の中のある文字がそのような字体 - 強調字体を持っていない場合、一連の文字のセット全体が代替方法を使用して、合成によって描画されます。

+ +

これらの代替字体は、フォントの他の部分と同じ em ボックスと同じベースラインを共有します。それらは単にグラフィカルに強化されており、行の高さや他のボックスの特性には影響しません。

+ +

{{cssinfo}}

+ +

構文

+ +

font-variant-position プロパティは、以下に列挙されたキーワード値のうちの一つで指定します。

+ +

値

+ +
+
normal
+
上付き文字および下付き文字の字体の代替を無効にします。
+
sub
+
下付き文字の代替グリフを有効にします。特定の文字列で、そのような文字の1つが使用できない場合、文字列内のすべての文字が合成を使用して描画されます。
+
super
+
上付き文字の代替グリフを有効にします。特定の文字列で、そのような文字の1つが使用できない場合、文字列内のすべての文字が合成を使用して描画されます。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<p class="normal">Normal!</p>
+<p class="super">Super!</p>
+<p class="sub">Sub!</p>
+
+ +

CSS

+ +
p {
+  display: inline;
+}
+
+.normal {
+  font-variant-position: normal;
+}
+
+.super {
+  font-variant-position: super;
+}
+
+.sub {
+  font-variant-position: sub;
+}
+
+ +

結果

+ +

{{ EmbedLiveSample('Examples') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#propdef-font-variant-position', 'font-variant-position')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの対応

+ +

{{Compat("css.properties.font-variant-position")}}

diff --git a/files/ja/web/css/font-variant/index.html b/files/ja/web/css/font-variant/index.html deleted file mode 100644 index 9f91a7c734..0000000000 --- a/files/ja/web/css/font-variant/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: font-variant -slug: Web/CSS/font-variant -tags: - - CSS - - CSS Fonts - - CSS Property - - Reference - - 'recipe:css-shorthand-property' -translation_of: Web/CSS/font-variant ---- -
{{CSSRef}}
- -

font-variant は CSS の一括指定プロパティで、フォントのすべての変化形を設定することができます。

- -

CSS Level 2 (Revision 1) における font-variant の値 (つまり、 normal や small-caps) は、一括指定の {{cssxref("font")}} を用いて設定することもできます。

- -
{{EmbedInteractiveExample("pages/css/font-variant.html")}}
- - - -

構成要素のプロパティ

- -

このプロパティは以下の CSS プロパティの一括指定です。

- - - -

構文

- -
font-variant: small-caps;
-font-variant: common-ligatures small-caps;
-
-/* グローバル値 */
-font-variant: inherit;
-font-variant: initial;
-font-variant: unset;
-
- -

値

- -
-
normal
-
通常のフォントフェイスを定義します。それぞれの個別指定プロパティは通常の初期値になります。 font-variant の個別指定プロパティは、 {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-east-asian")}} です。
-
none
-
{{cssxref("font-variant-ligatures")}} を none に、その他の個別指定プロパティを normal に、それぞれの初期値を設定します。
-
<common-lig-values>, <discretionary-lig-values>, <historical-lig-values>, <contextual-alt-values>
-
個別指定の {{cssxref("font-variant-ligatures")}} プロパティに関するキーワードを指定します。指定可能な値は、 common-ligatures, no-common-ligatures, discretionary-ligatures, no-discretionary-ligatures, historical-ligatures, no-historical-ligatures, contextual, no-contextual です。
-
stylistic(), historical-forms, styleset(), character-variant(), swash(), ornaments(), annotation()
-
個別指定の {{cssxref("font-variant-alternates")}} プロパティに関するキーワードや関数を指定します。
-
small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps
-
個別指定の {{cssxref("font-variant-caps")}} プロパティに関するキーワードや関数を指定します。
-
<numeric-figure-values>, <numeric-spacing-values>, <numeric-fraction-values>, ordinal, slashed-zero
-
個別指定の {{cssxref("font-variant-numeric")}} プロパティに関するキーワードを指定します。指定可能な値は、 lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions, ordinal, slashed-zero です。
-
<east-asian-variant-values>, <east-asian-width-values>, ruby
-
個別指定の {{cssxref("font-variant-east-asian")}} プロパティに関するキーワードを指定します。指定可能な値は、 jis78, jis83, jis90, jis04, simplified, traditional, full-width, proportional-width, ruby です。
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

スモールキャップのフォント変化形の設定

- -

HTML

- -
<p class="normal">Firefox rocks!</p>
-<p class="small">Firefox rocks!</p>
-
- -

CSS

- -
p.normal {
-  font-variant: normal;
-}
-p.small {
-  font-variant: small-caps;
-}
-
- -

結果

- -

{{ EmbedLiveSample('Setting_the_small-caps_font_variant', '', '', '', 'Web/CSS/font-variant') }}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Fonts', '#propdef-font-variant', 'font-variant')}}{{Spec2('CSS3 Fonts')}}新しい font-variant-* プロパティの一括指定になった。
{{SpecName('CSS2.1', 'fonts.html#propdef-font-variant', 'font-variant')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#font-variant', 'font-variant')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの互換性

- -
-

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

-
- -

関連情報

- - diff --git a/files/ja/web/css/font-variant/index.md b/files/ja/web/css/font-variant/index.md new file mode 100644 index 0000000000..9f91a7c734 --- /dev/null +++ b/files/ja/web/css/font-variant/index.md @@ -0,0 +1,137 @@ +--- +title: font-variant +slug: Web/CSS/font-variant +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/font-variant +--- +
{{CSSRef}}
+ +

font-variant は CSS の一括指定プロパティで、フォントのすべての変化形を設定することができます。

+ +

CSS Level 2 (Revision 1) における font-variant の値 (つまり、 normal や small-caps) は、一括指定の {{cssxref("font")}} を用いて設定することもできます。

+ +
{{EmbedInteractiveExample("pages/css/font-variant.html")}}
+ + + +

構成要素のプロパティ

+ +

このプロパティは以下の CSS プロパティの一括指定です。

+ + + +

構文

+ +
font-variant: small-caps;
+font-variant: common-ligatures small-caps;
+
+/* グローバル値 */
+font-variant: inherit;
+font-variant: initial;
+font-variant: unset;
+
+ +

値

+ +
+
normal
+
通常のフォントフェイスを定義します。それぞれの個別指定プロパティは通常の初期値になります。 font-variant の個別指定プロパティは、 {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-east-asian")}} です。
+
none
+
{{cssxref("font-variant-ligatures")}} を none に、その他の個別指定プロパティを normal に、それぞれの初期値を設定します。
+
<common-lig-values>, <discretionary-lig-values>, <historical-lig-values>, <contextual-alt-values>
+
個別指定の {{cssxref("font-variant-ligatures")}} プロパティに関するキーワードを指定します。指定可能な値は、 common-ligatures, no-common-ligatures, discretionary-ligatures, no-discretionary-ligatures, historical-ligatures, no-historical-ligatures, contextual, no-contextual です。
+
stylistic(), historical-forms, styleset(), character-variant(), swash(), ornaments(), annotation()
+
個別指定の {{cssxref("font-variant-alternates")}} プロパティに関するキーワードや関数を指定します。
+
small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps
+
個別指定の {{cssxref("font-variant-caps")}} プロパティに関するキーワードや関数を指定します。
+
<numeric-figure-values>, <numeric-spacing-values>, <numeric-fraction-values>, ordinal, slashed-zero
+
個別指定の {{cssxref("font-variant-numeric")}} プロパティに関するキーワードを指定します。指定可能な値は、 lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions, ordinal, slashed-zero です。
+
<east-asian-variant-values>, <east-asian-width-values>, ruby
+
個別指定の {{cssxref("font-variant-east-asian")}} プロパティに関するキーワードを指定します。指定可能な値は、 jis78, jis83, jis90, jis04, simplified, traditional, full-width, proportional-width, ruby です。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

スモールキャップのフォント変化形の設定

+ +

HTML

+ +
<p class="normal">Firefox rocks!</p>
+<p class="small">Firefox rocks!</p>
+
+ +

CSS

+ +
p.normal {
+  font-variant: normal;
+}
+p.small {
+  font-variant: small-caps;
+}
+
+ +

結果

+ +

{{ EmbedLiveSample('Setting_the_small-caps_font_variant', '', '', '', 'Web/CSS/font-variant') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#propdef-font-variant', 'font-variant')}}{{Spec2('CSS3 Fonts')}}新しい font-variant-* プロパティの一括指定になった。
{{SpecName('CSS2.1', 'fonts.html#propdef-font-variant', 'font-variant')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#font-variant', 'font-variant')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ +
+

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

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/font-variation-settings/index.html b/files/ja/web/css/font-variation-settings/index.html deleted file mode 100644 index 2fc23fc8f5..0000000000 --- a/files/ja/web/css/font-variation-settings/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: font-variation-settings -slug: Web/CSS/font-variation-settings -tags: - - CSS - - CSS フォント - - CSS プロパティ - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/font-variation-settings ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/font-variation-settings.html")}}
- - - -

構文

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

値

- -

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

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

形式文法

- -{{csssyntax}} - -

解説

- -

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

- -

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

- -

登録済みの軸と独自の軸

- -

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

- -

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

- -

こちらは関連する 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")}}

-
- -

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

- -
-

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

-
- -

例

- -

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

- -
-

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

-
- -

Weight (wght)

- -

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

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}
- -

Slant (slnt)

- -

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

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Fonts', '#descdef-font-face-font-variation-settings', 'font-variation-settings')}}{{Spec2('CSS4 Fonts')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

{{Compat("css.properties.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 new file mode 100644 index 0000000000..2fc23fc8f5 --- /dev/null +++ b/files/ja/web/css/font-variation-settings/index.md @@ -0,0 +1,153 @@ +--- +title: font-variation-settings +slug: Web/CSS/font-variation-settings +tags: + - CSS + - CSS フォント + - CSS プロパティ + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/font-variation-settings +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/font-variation-settings.html")}}
+ + + +

構文

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

値

+ +

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

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

形式文法

+ +{{csssyntax}} + +

解説

+ +

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

+ +

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

+ +

登録済みの軸と独自の軸

+ +

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

+ +

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

+ +

こちらは関連する 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")}}

+
+ +

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

+ +
+

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

+
+ +

例

+ +

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

+ +
+

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

+
+ +

Weight (wght)

+ +

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

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}
+ +

Slant (slnt)

+ +

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

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Fonts', '#descdef-font-face-font-variation-settings', 'font-variation-settings')}}{{Spec2('CSS4 Fonts')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/font-weight/index.html b/files/ja/web/css/font-weight/index.html deleted file mode 100644 index 66b685f51b..0000000000 --- a/files/ja/web/css/font-weight/index.html +++ /dev/null @@ -1,394 +0,0 @@ ---- -title: font-weight -slug: Web/CSS/font-weight -tags: - - CSS - - CSS Fonts - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/font-weight ---- -
{{CSSRef}}
- -

font-weight は CSS のプロパティで、フォントの太さ (あるいは重み) を指定します。実際に表示されるフォントの太さは、現在設定されている {{cssxref("font-family")}} に依存する場合があります。

- -
{{EmbedInteractiveExample("pages/css/font-weight.html")}}
- - - -

構文

- -
/* キーワード値 */
-font-weight: normal;
-font-weight: bold;
-
-/* 親要素に対して相対的なキーワード値 */
-font-weight: lighter;
-font-weight: bolder;
-
-/* 数値のキーワード値 */
-font-weight: 100;
-font-weight: 200;
-font-weight: 300;
-font-weight: 400;// normal
-font-weight: 500;
-font-weight: 600;
-font-weight: 700;// bold
-font-weight: 800;
-font-weight: 900;
-
-/* グローバル値 */
-font-weight: inherit;
-font-weight: initial;
-font-weight: unset;
-
- -

font-weight プロパティは、以下の一覧から選択した単一のキーワードで指定します。

- -

値

- -
-
normal
-
通常のフォントの太さです。 400 と同じです。
-
bold
-
太字のフォントの太さです。 700 と同じです。
-
lighter
-
フォントの太さが親要素よりも相対的に1つ細くなります。相対的な太さの計算には、フォントの太さが4つのみ考慮されることに注意してください。下記の{{anch("Meaning of relative weights", "相対的な太さの意味")}}を参照してください。
-
bolder
-
フォントの太さが親要素よりも相対的に1つ太くなります。相対的な太さの計算には、フォントの太さが4つのみ考慮されることに注意してください。下記の{{anch("Meaning of relative weights", "相対的な太さの意味")}}を参照してください。
-
<number>
-
1 以上 1000 以下の {{cssxref("<number>")}} 値です。数値が大きいと、数値が小さい物より太さが太い (又は同じ) ことを表します。よく使用される値は、以下の一般的な太さ名との対応にあるように、共通の太さ名に対応しています。
-
- -

font-weight 仕様書の古いバージョンでは、このプロパティはキーワード値と数値 100, 200, 300, 400, 500, 600, 700, 800, 900 のみを受け付けていました。可変フォント以外では実際にはこれらのセット値しか利用できません。ただし、可変フォント以外では細かい値 (例えば 451) は{{anch("Fallback weights", "太さのフォールバック")}}の仕組みを用いて、これらの値のいずれかに変換されます。

- -

CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任意の数値を受け付けるようになり、{{anch("Variable fonts", "可変フォント")}}が導入され、フォントの太さにもっと細かい範囲を使用することができるようになりました。

- -

太さのフォールバック

- -

ちょうど一致する太さが利用できない場合、実際に表示される太さを定めるために以下の規則が使用されます。

- - - -

相対的な太さの意味

- -

以下の表は、 lighter または bolder を指定する場合に要素の絶対的な太さを算出する方法を示しています。

- -

なお、相対的な太さを使用した場合、 thin (100), normal (400), bold (700), heavy (900) の4つの太さのみが考慮されます。 font-family でもっと多くの太さが利用できる場合であっても、相対的な太さの計算の用途では無視されます。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
継承値bolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700
- -

一般的な太さ名との対応

- -

100 から 900 の数値は、おおよそ以下の太さ名に対応します (OpenType 仕様書を参照してください)。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
値太さ名
100Thin (Hairline)
200Extra Light (Ultra Light)
300Light
400Normal (Regular)
500Medium
600Semi Bold (Demi Bold)
700Bold
800Extra Bold (Ultra Bold)
900Black (Heavy)
950Extra Black (Ultra Black)
- -

可変フォント

- -

多くのフォントは、一般的な太さ名との対応の中の数値の一つに対応する特定の太さを持っています。しかし、可変フォントと呼ばれる一部のフォントは、もっと高い又は低い粒度の太さの範囲に対応しており、これにより、デザイナーは選択した太さをより詳細に制御することができます。

- -

TrueType や OpenType の可変フォントでは、 "wght" バリエーションが様々な幅を実装するために使用されます。

- -

以下の例を動作させるには、 CSS Fonts Level 4 の font-weight が 1～1000 の任意の数を取れる構文に対応したブラウザーが必要です。

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

HTML

- -
-
<header>
-    <input type="range" id="weight" name="weight" min="1" max="1000" />
-    <label for="weight">Weight</label>
-</header>
-<div class="container">
-    <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
-</div>
-
- -

CSS

- -
/*
-Mutator Sans is created by LettError (https://github.com/LettError/mutatorSans)
-and is used here under the terms of its license:
-https://github.com/LettError/mutatorSans/blob/master/LICENSE
-*/
-
-@font-face {
-  src: url('https://mdn.mozillademos.org/files/16011/MutatorSans.ttf');
-  font-family:'MutatorSans';
-  font-style: normal;
-}
-
-label {
-  font: 1rem monospace;
-  white-space: nowrap;
-}
-
-.container {
-  max-height: 150px;
-  overflow-y: auto;
-}
-
-.sample {
-  text-transform: uppercase;
-  font: 1.5rem 'MutatorSans', sans-serif;
-}
-
- - - -

JavaScript

- -
let weightLabel = document.querySelector('label[for="weight"]');
-let weightInput = document.querySelector('#weight');
-let sampleText = document.querySelector('.sample');
-
-function update() {
-  weightLabel.textContent = `font-weight: ${weightInput.value};`;
-  sampleText.style.fontWeight = weightInput.value;
-}
-
-weightInput.addEventListener('input', update);
-
-update();
-
-
- -

アクセシビリティの考慮

- -

弱視の人は、 font-weight の値が 100 (Thin/Hairline) または 200 (Extra Light) の場合、特にフォントのコントラスト比が低い場合は、テキストを読むのが難しくなることがあります。

- - - -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

Setting font weights

- -

HTML

- -
<p>
-  Alice was beginning to get very tired of sitting by her sister on the
-  bank, and of having nothing to do: once or twice she had peeped into the
-  book her sister was reading, but it had no pictures or conversations in
-  it, "and what is the use of a book," thought Alice "without pictures or
-  conversations?"
-</p>
-
-<div>I'm heavy<br/>
-  <span>I'm lighter</span>
-</div>
-
- -

CSS

- -
/* 段落のテキストを太字にします */
-p {
-  font-weight: bold;
-}
-
-/* div 要素のテキストの太さを normal より 2 段階太くしますが、
-   標準的な bold より細くします */
-div {
- font-weight: 600;
-}
-
-/* span 要素のテキストの太さを親要素より
-   1 段階細くします */
-span {
-  font-weight: lighter;
-}
- -

結果

- -

{{EmbedLiveSample("Setting_font_weights","400","300")}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS4 Fonts')}}font-weight で 1～1000 の任意の数を受け付けるよう定義。
{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS3 Fonts')}}変更なし
{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#font-weight', 'font-weight')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの互換性

- -

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

diff --git a/files/ja/web/css/font-weight/index.md b/files/ja/web/css/font-weight/index.md new file mode 100644 index 0000000000..66b685f51b --- /dev/null +++ b/files/ja/web/css/font-weight/index.md @@ -0,0 +1,394 @@ +--- +title: font-weight +slug: Web/CSS/font-weight +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/font-weight +--- +
{{CSSRef}}
+ +

font-weight は CSS のプロパティで、フォントの太さ (あるいは重み) を指定します。実際に表示されるフォントの太さは、現在設定されている {{cssxref("font-family")}} に依存する場合があります。

+ +
{{EmbedInteractiveExample("pages/css/font-weight.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+font-weight: normal;
+font-weight: bold;
+
+/* 親要素に対して相対的なキーワード値 */
+font-weight: lighter;
+font-weight: bolder;
+
+/* 数値のキーワード値 */
+font-weight: 100;
+font-weight: 200;
+font-weight: 300;
+font-weight: 400;// normal
+font-weight: 500;
+font-weight: 600;
+font-weight: 700;// bold
+font-weight: 800;
+font-weight: 900;
+
+/* グローバル値 */
+font-weight: inherit;
+font-weight: initial;
+font-weight: unset;
+
+ +

font-weight プロパティは、以下の一覧から選択した単一のキーワードで指定します。

+ +

値

+ +
+
normal
+
通常のフォントの太さです。 400 と同じです。
+
bold
+
太字のフォントの太さです。 700 と同じです。
+
lighter
+
フォントの太さが親要素よりも相対的に1つ細くなります。相対的な太さの計算には、フォントの太さが4つのみ考慮されることに注意してください。下記の{{anch("Meaning of relative weights", "相対的な太さの意味")}}を参照してください。
+
bolder
+
フォントの太さが親要素よりも相対的に1つ太くなります。相対的な太さの計算には、フォントの太さが4つのみ考慮されることに注意してください。下記の{{anch("Meaning of relative weights", "相対的な太さの意味")}}を参照してください。
+
<number>
+
1 以上 1000 以下の {{cssxref("<number>")}} 値です。数値が大きいと、数値が小さい物より太さが太い (又は同じ) ことを表します。よく使用される値は、以下の一般的な太さ名との対応にあるように、共通の太さ名に対応しています。
+
+ +

font-weight 仕様書の古いバージョンでは、このプロパティはキーワード値と数値 100, 200, 300, 400, 500, 600, 700, 800, 900 のみを受け付けていました。可変フォント以外では実際にはこれらのセット値しか利用できません。ただし、可変フォント以外では細かい値 (例えば 451) は{{anch("Fallback weights", "太さのフォールバック")}}の仕組みを用いて、これらの値のいずれかに変換されます。

+ +

CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任意の数値を受け付けるようになり、{{anch("Variable fonts", "可変フォント")}}が導入され、フォントの太さにもっと細かい範囲を使用することができるようになりました。

+ +

太さのフォールバック

+ +

ちょうど一致する太さが利用できない場合、実際に表示される太さを定めるために以下の規則が使用されます。

+ + + +

相対的な太さの意味

+ +

以下の表は、 lighter または bolder を指定する場合に要素の絶対的な太さを算出する方法を示しています。

+ +

なお、相対的な太さを使用した場合、 thin (100), normal (400), bold (700), heavy (900) の4つの太さのみが考慮されます。 font-family でもっと多くの太さが利用できる場合であっても、相対的な太さの計算の用途では無視されます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
継承値bolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700
+ +

一般的な太さ名との対応

+ +

100 から 900 の数値は、おおよそ以下の太さ名に対応します (OpenType 仕様書を参照してください)。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
値太さ名
100Thin (Hairline)
200Extra Light (Ultra Light)
300Light
400Normal (Regular)
500Medium
600Semi Bold (Demi Bold)
700Bold
800Extra Bold (Ultra Bold)
900Black (Heavy)
950Extra Black (Ultra Black)
+ +

可変フォント

+ +

多くのフォントは、一般的な太さ名との対応の中の数値の一つに対応する特定の太さを持っています。しかし、可変フォントと呼ばれる一部のフォントは、もっと高い又は低い粒度の太さの範囲に対応しており、これにより、デザイナーは選択した太さをより詳細に制御することができます。

+ +

TrueType や OpenType の可変フォントでは、 "wght" バリエーションが様々な幅を実装するために使用されます。

+ +

以下の例を動作させるには、 CSS Fonts Level 4 の font-weight が 1～1000 の任意の数を取れる構文に対応したブラウザーが必要です。

+ +
{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}
+ +

HTML

+ +
+
<header>
+    <input type="range" id="weight" name="weight" min="1" max="1000" />
+    <label for="weight">Weight</label>
+</header>
+<div class="container">
+    <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
+</div>
+
+ +

CSS

+ +
/*
+Mutator Sans is created by LettError (https://github.com/LettError/mutatorSans)
+and is used here under the terms of its license:
+https://github.com/LettError/mutatorSans/blob/master/LICENSE
+*/
+
+@font-face {
+  src: url('https://mdn.mozillademos.org/files/16011/MutatorSans.ttf');
+  font-family:'MutatorSans';
+  font-style: normal;
+}
+
+label {
+  font: 1rem monospace;
+  white-space: nowrap;
+}
+
+.container {
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+.sample {
+  text-transform: uppercase;
+  font: 1.5rem 'MutatorSans', sans-serif;
+}
+
+ + + +

JavaScript

+ +
let weightLabel = document.querySelector('label[for="weight"]');
+let weightInput = document.querySelector('#weight');
+let sampleText = document.querySelector('.sample');
+
+function update() {
+  weightLabel.textContent = `font-weight: ${weightInput.value};`;
+  sampleText.style.fontWeight = weightInput.value;
+}
+
+weightInput.addEventListener('input', update);
+
+update();
+
+
+ +

アクセシビリティの考慮

+ +

弱視の人は、 font-weight の値が 100 (Thin/Hairline) または 200 (Extra Light) の場合、特にフォントのコントラスト比が低い場合は、テキストを読むのが難しくなることがあります。

+ + + +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

Setting font weights

+ +

HTML

+ +
<p>
+  Alice was beginning to get very tired of sitting by her sister on the
+  bank, and of having nothing to do: once or twice she had peeped into the
+  book her sister was reading, but it had no pictures or conversations in
+  it, "and what is the use of a book," thought Alice "without pictures or
+  conversations?"
+</p>
+
+<div>I'm heavy<br/>
+  <span>I'm lighter</span>
+</div>
+
+ +

CSS

+ +
/* 段落のテキストを太字にします */
+p {
+  font-weight: bold;
+}
+
+/* div 要素のテキストの太さを normal より 2 段階太くしますが、
+   標準的な bold より細くします */
+div {
+ font-weight: 600;
+}
+
+/* span 要素のテキストの太さを親要素より
+   1 段階細くします */
+span {
+  font-weight: lighter;
+}
+ +

結果

+ +

{{EmbedLiveSample("Setting_font_weights","400","300")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS4 Fonts')}}font-weight で 1～1000 の任意の数を受け付けるよう定義。
{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS3 Fonts')}}変更なし
{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#font-weight', 'font-weight')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ +

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

diff --git a/files/ja/web/css/font/index.html b/files/ja/web/css/font/index.html deleted file mode 100644 index 70d7bfbd7c..0000000000 --- a/files/ja/web/css/font/index.html +++ /dev/null @@ -1,374 +0,0 @@ ---- -title: font -slug: Web/CSS/font -tags: - - CSS - - CSS Fonts - - CSS Property - - Reference - - 'recipe:css-shorthand-property' -translation_of: Web/CSS/font ---- -
{{CSSRef}}
- -

font は CSS の一括指定プロパティで、要素のフォントの様々なプロパティをすべて設定します。また、要素のフォントにシステムフォントを設定することもできます。

- -
{{EmbedInteractiveExample("pages/css/font.html")}}
- - - -

他の一括指定プロパティ同様、個別の値が指定されなかった場合は、それぞれの初期値が設定されます (おそらく一括指定ではないプロパティを使用して設定された以前の値を上書きします)。 font によって直接設定できない個別指定の {{cssxref("font-size-adjust")}}, {{cssxref("font-kerning")}} も初期値に設定されます。

- -

構成要素のプロパティ

- -

このプロパティは以下の CSS プロパティの一括指定です。

- - - -

構文

- -

font プロパティはシステムフォントを選択するための単一のキーワード、又は様々なフォント関連プロパティの一括指定のどちらかで指定することができます。

- -

font をシステムキーワードとして指定する場合は、 caption, icon, menu, message-box, small-caption, status-bar のうちの一つでなければなりません。

- -

font を様々なフォント関連プロパティの一括指定とする場合は、次のようになります。

- - - -

値

- -
-
<'font-style'>
-
{{Cssxref("font-style")}} プロパティを参照。
-
<'font-variant'>
-
{{Cssxref("font-variant")}} プロパティを参照。
-
<'font-weight'>
-
{{Cssxref("font-weight")}} プロパティを参照。
-
<'font-stretch'>
-
{{Cssxref("font-stretch")}} プロパティを参照。
-
<'font-size'>
-
{{Cssxref("font-size")}} プロパティを参照。
-
<'line-height'>
-
{{cssxref("line-height")}} プロパティを参照。
-
<'font-family'>
-
{{Cssxref("font-family")}} プロパティを参照。
-
- -

システムフォント値

- -
-
caption
-
キャプション付きコントロールに使われるシステムフォント (ボタン、ドロップダウンなど)。
-
icon
-
ラベルアイコンに使用されるシステムフォント。
- -
メニューに使われるシステムフォント (ドロップダウンメニュー、メニューリストなど)。
-
message-box
-
ダイアログボックスに使われるシステムフォント。
-
small-caption
-
小さいコントロールのラベルに使われるシステムフォント。
-
status-bar
-
ウィンドウのステータスバーに使われるシステムフォント。
-
接頭辞付きのシステムフォントキーワード
-
ブラウザーは他にも、接頭辞付きのキーワードをいくつか実装していることがあります。 Gecko は、 -moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list, -moz-field を実装しています。
-
- -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{CSSSyntax}} - -

例

- -

フォントのプロパティの設定

- -
/* フォントの大きさを 12px に設定し、行の高さを 14px にする。
-   フォントファミリは sans-serif に設定する */
-p { font: 12px/14px sans-serif }
-
-/* フォントの大きさを親要素の 80% または既定値
-   (親要素がない場合) に設定する。
-   フォントファミリは sans-serif に設定する */
-p { font: 80% sans-serif }
-
-/* フォントの太さを太字に、
-   フォントスタイルを斜体に、
-   フォントの大きさを large に、
-   フォントファミリーは serif に設定する */
-p { font: bold italic large serif }
-
-/* ウィンドウのステータスバーと同じフォントに設定する */
-p { font: status-bar }
-
- -

ライブサンプル

- - - -

{{ EmbedLiveSample('live_sample','100%', '440px')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Fonts', '#font-prop', 'font')}}{{Spec2('CSS3 Fonts')}}font-stretch の値の対応を追加
{{SpecName('CSS2.1', 'fonts.html#font-shorthand', 'font-weight')}}{{Spec2('CSS2.1')}}キーワードへのサポートが追加されました
{{SpecName('CSS1', '#font', 'font')}}{{Spec2('CSS1')}}初回定義。
- -

ブラウザーの互換性

- -

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

diff --git a/files/ja/web/css/font/index.md b/files/ja/web/css/font/index.md new file mode 100644 index 0000000000..70d7bfbd7c --- /dev/null +++ b/files/ja/web/css/font/index.md @@ -0,0 +1,374 @@ +--- +title: font +slug: Web/CSS/font +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/font +--- +
{{CSSRef}}
+ +

font は CSS の一括指定プロパティで、要素のフォントの様々なプロパティをすべて設定します。また、要素のフォントにシステムフォントを設定することもできます。

+ +
{{EmbedInteractiveExample("pages/css/font.html")}}
+ + + +

他の一括指定プロパティ同様、個別の値が指定されなかった場合は、それぞれの初期値が設定されます (おそらく一括指定ではないプロパティを使用して設定された以前の値を上書きします)。 font によって直接設定できない個別指定の {{cssxref("font-size-adjust")}}, {{cssxref("font-kerning")}} も初期値に設定されます。

+ +

構成要素のプロパティ

+ +

このプロパティは以下の CSS プロパティの一括指定です。

+ + + +

構文

+ +

font プロパティはシステムフォントを選択するための単一のキーワード、又は様々なフォント関連プロパティの一括指定のどちらかで指定することができます。

+ +

font をシステムキーワードとして指定する場合は、 caption, icon, menu, message-box, small-caption, status-bar のうちの一つでなければなりません。

+ +

font を様々なフォント関連プロパティの一括指定とする場合は、次のようになります。

+ + + +

値

+ +
+
<'font-style'>
+
{{Cssxref("font-style")}} プロパティを参照。
+
<'font-variant'>
+
{{Cssxref("font-variant")}} プロパティを参照。
+
<'font-weight'>
+
{{Cssxref("font-weight")}} プロパティを参照。
+
<'font-stretch'>
+
{{Cssxref("font-stretch")}} プロパティを参照。
+
<'font-size'>
+
{{Cssxref("font-size")}} プロパティを参照。
+
<'line-height'>
+
{{cssxref("line-height")}} プロパティを参照。
+
<'font-family'>
+
{{Cssxref("font-family")}} プロパティを参照。
+
+ +

システムフォント値

+ +
+
caption
+
キャプション付きコントロールに使われるシステムフォント (ボタン、ドロップダウンなど)。
+
icon
+
ラベルアイコンに使用されるシステムフォント。
+ +
メニューに使われるシステムフォント (ドロップダウンメニュー、メニューリストなど)。
+
message-box
+
ダイアログボックスに使われるシステムフォント。
+
small-caption
+
小さいコントロールのラベルに使われるシステムフォント。
+
status-bar
+
ウィンドウのステータスバーに使われるシステムフォント。
+
接頭辞付きのシステムフォントキーワード
+
ブラウザーは他にも、接頭辞付きのキーワードをいくつか実装していることがあります。 Gecko は、 -moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list, -moz-field を実装しています。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{CSSSyntax}} + +

例

+ +

フォントのプロパティの設定

+ +
/* フォントの大きさを 12px に設定し、行の高さを 14px にする。
+   フォントファミリは sans-serif に設定する */
+p { font: 12px/14px sans-serif }
+
+/* フォントの大きさを親要素の 80% または既定値
+   (親要素がない場合) に設定する。
+   フォントファミリは sans-serif に設定する */
+p { font: 80% sans-serif }
+
+/* フォントの太さを太字に、
+   フォントスタイルを斜体に、
+   フォントの大きさを large に、
+   フォントファミリーは serif に設定する */
+p { font: bold italic large serif }
+
+/* ウィンドウのステータスバーと同じフォントに設定する */
+p { font: status-bar }
+
+ +

ライブサンプル

+ + + +

{{ EmbedLiveSample('live_sample','100%', '440px')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#font-prop', 'font')}}{{Spec2('CSS3 Fonts')}}font-stretch の値の対応を追加
{{SpecName('CSS2.1', 'fonts.html#font-shorthand', 'font-weight')}}{{Spec2('CSS2.1')}}キーワードへのサポートが追加されました
{{SpecName('CSS1', '#font', 'font')}}{{Spec2('CSS1')}}初回定義。
+ +

ブラウザーの互換性

+ +

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

diff --git a/files/ja/web/css/line-height/index.html b/files/ja/web/css/line-height/index.html deleted file mode 100644 index c47467e018..0000000000 --- a/files/ja/web/css/line-height/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: line-height -slug: Web/CSS/line-height -tags: - - CSS - - CSS Fonts - - CSS Property - - CSS フォント - - CSS プロパティ - - Layout - - Reference - - Text - - Vertical - - height - - 'recipe:css-property' - - size -translation_of: Web/CSS/line-height ---- -
{{CSSRef}}
- -

line-height は CSS のプロパティで、行ボックスの高さを設定します。これは主にテキストの行間を設定するために使用します。ブロックレベル要素では、要素に含まれる行ボックスの最小の高さを指定します。非置換インライン要素では、行ボックスの高さの計算に使われる高さを指定します。

- -
{{EmbedInteractiveExample("pages/css/line-height.html")}}
- - - -

構文

- -
/* キーワード値 */
-line-height: normal;
-
-/* 単位のない値: この値を要素のフォントサイズに
-掛けたものを使用する */
-line-height: 3.5;
-
-/* <length> 値 */
-line-height: 3em;
-
-/* <percentage> 値 */
-line-height: 34%;
-
-/* グローバル値 */
-line-height: inherit;
-line-height: initial;
-line-height: unset;
-
- -

line-height プロパティは以下のうちの一つで指定します。

- - - -

値

- -
-
normal
-
ユーザーエージェントに依存します。デスクトップブラウザー (Firefox を含む) は 要素の font-family によって決まる、おおよそ 1.2 という既定値を使います。
-
<number> (単位なし)
-
使用値は、この単位のない {{cssxref("<number>")}} に要素のフォントサイズを掛けたものになります。計算値は、指定された <number> と同じです。ほとんどの場合、継承時の予期しない結果を避けるために、これが line-height を設定する好ましい方法です。
-
<length>
-
行ボックスの高さの計算に、指定した {{cssxref("<length>")}} が使われます。利用可能な単位については、 {{cssxref("<length>")}} をご覧ください。
-
<percentage>
-
要素自身のフォントサイズに対する相対値です。計算値はこの {{cssxref("<percentage>")}} に要素のフォントサイズの計算値を掛けたものです。パーセント値は予期しない結果を生む可能性があります (下記の2つの例を参照してください)。
-
-moz-block-height {{non-standard_inline}}
-
行の高さを現在のブロックのコンテンツの高さにします。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

基本的な例

- -
/* 以下のルールの結果はすべて、同じ line height です */
-
-div { line-height: 1.2;   font-size: 10pt; }   /* 数値/単位なし */
-div { line-height: 1.2em; font-size: 10pt; }   /* 長さ */
-div { line-height: 120%;  font-size: 10pt; }   /* パーセント値 */
-div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif; } /* 一括指定 */
- -

line-height を設定するには、上記の {{cssxref("font")}} 一括指定プロパティがより便利なことが多いのですが、同時に font-family プロパティも指定しなければなりません。

- -

line-height の値は単位なしの数値が好ましい

- -

以下の例は、line-height の値として {{cssxref("<length>")}} より {{cssxref("<number>")}} のほうが好ましい理由を示しています。 2 つの {{HTMLElement("div")}} 要素を使用しています。最初のものは緑色の境界を持っており、単位なしの line-height の値を使用しています。二番目は赤色の境界を持っており、 line-height の値を em で定義して使用しています。

- -

CSS

- -
.green {
-  line-height: 1.1;
-  border: solid limegreen;
-}
-
-.red {
-  line-height: 1.1em;
-  border: solid red;
-}
-
-h1 {
-  font-size: 30px;
-}
-
-.box {
-  width: 18em;
-  display: inline-block;
-  vertical-align: top;
-  font-size: 15px;
-}
-
- -

HTML

- -
<div class="box green">
- <h1>予期しない結果を避けるために、単位なしの line-height を使いましょう。</h1>
-  length と percentage で line-height を指定すると、継承動作がうまくいきません。 ...
-</div>
-
-<div class="box red">
- <h1>予期しない結果を避けるために、単位なしの line-height を使いましょう。</h1>
-  length と percentage で line-height を指定すると、継承動作がうまくいきません。 ...
-</div>
-
-<!-- 1 つ目の <h1> の line-height はそれ自身のフォントサイズから計算されます   (30px × 1.1) = 33px  -->
-<!-- 2 つ目の <h1> の line-height は red div のフォントサイズから計算されます  (15px × 1.1) = 16.5px  おそらく、望む結果ではないでしょう -->
-
- -

結果

- -

{{EmbedLiveSample('Prefer_unitless_numbers_for_line-height_values', 600, 200)}}

- -

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

- -

主要な段落コンテンツでは、 line-height の値の最小値が 1.5 になるようにしてください。これは弱視の人や、認知障碍を負った人に有用です。ページがテキストの寸法が大きくなるように拡大した場合、単位なしの値を使用すれば行の高さも同じ割合で拡大します。

- -

W3C Understanding WCAG 2.1

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS2.1', 'visudet.html#propdef-line-height', 'line-height')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#line-height', 'line-height')}}{{Spec2('CSS1')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -
-

{{Compat("css.properties.line-height")}}

-
- -

関連情報

- - diff --git a/files/ja/web/css/line-height/index.md b/files/ja/web/css/line-height/index.md new file mode 100644 index 0000000000..c47467e018 --- /dev/null +++ b/files/ja/web/css/line-height/index.md @@ -0,0 +1,179 @@ +--- +title: line-height +slug: Web/CSS/line-height +tags: + - CSS + - CSS Fonts + - CSS Property + - CSS フォント + - CSS プロパティ + - Layout + - Reference + - Text + - Vertical + - height + - 'recipe:css-property' + - size +translation_of: Web/CSS/line-height +--- +
{{CSSRef}}
+ +

line-height は CSS のプロパティで、行ボックスの高さを設定します。これは主にテキストの行間を設定するために使用します。ブロックレベル要素では、要素に含まれる行ボックスの最小の高さを指定します。非置換インライン要素では、行ボックスの高さの計算に使われる高さを指定します。

+ +
{{EmbedInteractiveExample("pages/css/line-height.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+line-height: normal;
+
+/* 単位のない値: この値を要素のフォントサイズに
+掛けたものを使用する */
+line-height: 3.5;
+
+/* <length> 値 */
+line-height: 3em;
+
+/* <percentage> 値 */
+line-height: 34%;
+
+/* グローバル値 */
+line-height: inherit;
+line-height: initial;
+line-height: unset;
+
+ +

line-height プロパティは以下のうちの一つで指定します。

+ + + +

値

+ +
+
normal
+
ユーザーエージェントに依存します。デスクトップブラウザー (Firefox を含む) は 要素の font-family によって決まる、おおよそ 1.2 という既定値を使います。
+
<number> (単位なし)
+
使用値は、この単位のない {{cssxref("<number>")}} に要素のフォントサイズを掛けたものになります。計算値は、指定された <number> と同じです。ほとんどの場合、継承時の予期しない結果を避けるために、これが line-height を設定する好ましい方法です。
+
<length>
+
行ボックスの高さの計算に、指定した {{cssxref("<length>")}} が使われます。利用可能な単位については、 {{cssxref("<length>")}} をご覧ください。
+
<percentage>
+
要素自身のフォントサイズに対する相対値です。計算値はこの {{cssxref("<percentage>")}} に要素のフォントサイズの計算値を掛けたものです。パーセント値は予期しない結果を生む可能性があります (下記の2つの例を参照してください)。
+
-moz-block-height {{non-standard_inline}}
+
行の高さを現在のブロックのコンテンツの高さにします。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

基本的な例

+ +
/* 以下のルールの結果はすべて、同じ line height です */
+
+div { line-height: 1.2;   font-size: 10pt; }   /* 数値/単位なし */
+div { line-height: 1.2em; font-size: 10pt; }   /* 長さ */
+div { line-height: 120%;  font-size: 10pt; }   /* パーセント値 */
+div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif; } /* 一括指定 */
+ +

line-height を設定するには、上記の {{cssxref("font")}} 一括指定プロパティがより便利なことが多いのですが、同時に font-family プロパティも指定しなければなりません。

+ +

line-height の値は単位なしの数値が好ましい

+ +

以下の例は、line-height の値として {{cssxref("<length>")}} より {{cssxref("<number>")}} のほうが好ましい理由を示しています。 2 つの {{HTMLElement("div")}} 要素を使用しています。最初のものは緑色の境界を持っており、単位なしの line-height の値を使用しています。二番目は赤色の境界を持っており、 line-height の値を em で定義して使用しています。

+ +

CSS

+ +
.green {
+  line-height: 1.1;
+  border: solid limegreen;
+}
+
+.red {
+  line-height: 1.1em;
+  border: solid red;
+}
+
+h1 {
+  font-size: 30px;
+}
+
+.box {
+  width: 18em;
+  display: inline-block;
+  vertical-align: top;
+  font-size: 15px;
+}
+
+ +

HTML

+ +
<div class="box green">
+ <h1>予期しない結果を避けるために、単位なしの line-height を使いましょう。</h1>
+  length と percentage で line-height を指定すると、継承動作がうまくいきません。 ...
+</div>
+
+<div class="box red">
+ <h1>予期しない結果を避けるために、単位なしの line-height を使いましょう。</h1>
+  length と percentage で line-height を指定すると、継承動作がうまくいきません。 ...
+</div>
+
+<!-- 1 つ目の <h1> の line-height はそれ自身のフォントサイズから計算されます   (30px × 1.1) = 33px  -->
+<!-- 2 つ目の <h1> の line-height は red div のフォントサイズから計算されます  (15px × 1.1) = 16.5px  おそらく、望む結果ではないでしょう -->
+
+ +

結果

+ +

{{EmbedLiveSample('Prefer_unitless_numbers_for_line-height_values', 600, 200)}}

+ +

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

+ +

主要な段落コンテンツでは、 line-height の値の最小値が 1.5 になるようにしてください。これは弱視の人や、認知障碍を負った人に有用です。ページがテキストの寸法が大きくなるように拡大した場合、単位なしの値を使用すれば行の高さも同じ割合で拡大します。

+ +

W3C Understanding WCAG 2.1

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS2.1', 'visudet.html#propdef-line-height', 'line-height')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#line-height', 'line-height')}}{{Spec2('CSS1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ +
+

{{Compat("css.properties.line-height")}}

+
+ +

関連情報

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