From ec35860e99aebe90a636a33b40209894ccf6fb36 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 16 Feb 2022 09:58:00 +0900 Subject: Web/CSS/@font-face 以下の記述子の記事を移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/css/@font-face/font-display/index.html | 110 ------------- files/ja/web/css/@font-face/font-display/index.md | 110 +++++++++++++ files/ja/web/css/@font-face/font-family/index.html | 85 ---------- files/ja/web/css/@font-face/font-family/index.md | 85 ++++++++++ .../ja/web/css/@font-face/font-stretch/index.html | 182 --------------------- files/ja/web/css/@font-face/font-stretch/index.md | 182 +++++++++++++++++++++ files/ja/web/css/@font-face/font-style/index.html | 117 ------------- files/ja/web/css/@font-face/font-style/index.md | 117 +++++++++++++ .../@font-face/font-variation-settings/index.html | 85 ---------- .../@font-face/font-variation-settings/index.md | 85 ++++++++++ files/ja/web/css/@font-face/font-weight/index.html | 175 -------------------- files/ja/web/css/@font-face/font-weight/index.md | 175 ++++++++++++++++++++ files/ja/web/css/@font-face/src/index.html | 106 ------------ files/ja/web/css/@font-face/src/index.md | 106 ++++++++++++ .../ja/web/css/@font-face/unicode-range/index.html | 114 ------------- files/ja/web/css/@font-face/unicode-range/index.md | 114 +++++++++++++ 16 files changed, 974 insertions(+), 974 deletions(-) delete mode 100644 files/ja/web/css/@font-face/font-display/index.html create mode 100644 files/ja/web/css/@font-face/font-display/index.md delete mode 100644 files/ja/web/css/@font-face/font-family/index.html create mode 100644 files/ja/web/css/@font-face/font-family/index.md delete mode 100644 files/ja/web/css/@font-face/font-stretch/index.html create mode 100644 files/ja/web/css/@font-face/font-stretch/index.md delete mode 100644 files/ja/web/css/@font-face/font-style/index.html create mode 100644 files/ja/web/css/@font-face/font-style/index.md delete mode 100644 files/ja/web/css/@font-face/font-variation-settings/index.html create mode 100644 files/ja/web/css/@font-face/font-variation-settings/index.md delete mode 100644 files/ja/web/css/@font-face/font-weight/index.html create mode 100644 files/ja/web/css/@font-face/font-weight/index.md delete mode 100644 files/ja/web/css/@font-face/src/index.html create mode 100644 files/ja/web/css/@font-face/src/index.md delete mode 100644 files/ja/web/css/@font-face/unicode-range/index.html create mode 100644 files/ja/web/css/@font-face/unicode-range/index.md diff --git a/files/ja/web/css/@font-face/font-display/index.html b/files/ja/web/css/@font-face/font-display/index.html deleted file mode 100644 index 0a92c17416..0000000000 --- a/files/ja/web/css/@font-face/font-display/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: font-display -slug: Web/CSS/@font-face/font-display -tags: - - '@font-face' - - CSS - - CSS フォント - - CSS 記述子 - - font-display - - ウェブフォント - - フォント - - リファレンス -translation_of: Web/CSS/@font-face/font-display ---- -{{CSSRef}} - -`font-display` 記述子は、フォントがダウンロード済みで利用できるかに基づいて、どのようにフォントの種類を表示するかを定めます。 - -## 構文 - -
/* キーワード値 */
-font-display: auto;
-font-display: block;
-font-display: swap;
-font-display: fallback;
-font-display: optional;
- -

値

- -- `auto` - - : フォントの表示戦略はユーザーエージェントが定義します。 -- `block` - - : フォントに対して短いブロック期の後、永続的にスワップ期を置きます。 -- `swap` - - : フォントに対して非常に短いブロック期の後、永続的にスワップ期を置きます。 -- `fallback` - - : フォントに対して非常に短いブロック期の後、短いスワップ期を置きます。 -- `optional` - - : フォントに対して非常に短いブロック期の後、スワップ期を置きません。 - -

説明

- -

フォント表示の過程

- -フォント表示の過程は、ユーザーエージェントが指定されたダウンロードフォントを利用しようとした瞬間に始まります。過程はフォントを利用して任意の要素を表示する振る舞いを説明する、以下の 3 つの時期に分かれます。 - -- フォントブロック期 - - : フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は 不可視の 代替フォントで描画する必要があります。この時期に読み込みに成功したフォントは、通常通りに利用できます。 -- フォントスワップ期 - - : フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は代替フォントで描画する必要があります。この時期に読み込みに成功したフォントは、通常通りに利用できます。 -- フォント失敗期 - - : フォントが読み込まれていない場合、ユーザーエージェントは読み込みに失敗したとして扱い、通常のフォントで代替を行います。 - -

定義

- -{{cssinfo}} - -

構文

- -{{csssyntax}} - -## 例 - -

font-display のフォールバックを指定する

- -
@font-face {
-  font-family: ExampleFont;
-  src: url(/path/to/fonts/examplefont.woff) format('woff'),
-       url(/path/to/fonts/examplefont.eot) format('eot');
-  font-weight: 400;
-  font-style: normal;
-  font-display: fallback;
-}
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}{{Spec2('CSS4 Fonts')}}初回定義
- -## ブラウザーの互換性 - -{{Compat("css.at-rules.font-face.font-display")}} - -## 関連情報 - - diff --git a/files/ja/web/css/@font-face/font-display/index.md b/files/ja/web/css/@font-face/font-display/index.md new file mode 100644 index 0000000000..0a92c17416 --- /dev/null +++ b/files/ja/web/css/@font-face/font-display/index.md @@ -0,0 +1,110 @@ +--- +title: font-display +slug: Web/CSS/@font-face/font-display +tags: + - '@font-face' + - CSS + - CSS フォント + - CSS 記述子 + - font-display + - ウェブフォント + - フォント + - リファレンス +translation_of: Web/CSS/@font-face/font-display +--- +{{CSSRef}} + +`font-display` 記述子は、フォントがダウンロード済みで利用できるかに基づいて、どのようにフォントの種類を表示するかを定めます。 + +## 構文 + +
/* キーワード値 */
+font-display: auto;
+font-display: block;
+font-display: swap;
+font-display: fallback;
+font-display: optional;
+ +

値

+ +- `auto` + - : フォントの表示戦略はユーザーエージェントが定義します。 +- `block` + - : フォントに対して短いブロック期の後、永続的にスワップ期を置きます。 +- `swap` + - : フォントに対して非常に短いブロック期の後、永続的にスワップ期を置きます。 +- `fallback` + - : フォントに対して非常に短いブロック期の後、短いスワップ期を置きます。 +- `optional` + - : フォントに対して非常に短いブロック期の後、スワップ期を置きません。 + +

説明

+ +

フォント表示の過程

+ +フォント表示の過程は、ユーザーエージェントが指定されたダウンロードフォントを利用しようとした瞬間に始まります。過程はフォントを利用して任意の要素を表示する振る舞いを説明する、以下の 3 つの時期に分かれます。 + +- フォントブロック期 + - : フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は 不可視の 代替フォントで描画する必要があります。この時期に読み込みに成功したフォントは、通常通りに利用できます。 +- フォントスワップ期 + - : フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は代替フォントで描画する必要があります。この時期に読み込みに成功したフォントは、通常通りに利用できます。 +- フォント失敗期 + - : フォントが読み込まれていない場合、ユーザーエージェントは読み込みに失敗したとして扱い、通常のフォントで代替を行います。 + +

定義

+ +{{cssinfo}} + +

構文

+ +{{csssyntax}} + +## 例 + +

font-display のフォールバックを指定する

+ +
@font-face {
+  font-family: ExampleFont;
+  src: url(/path/to/fonts/examplefont.woff) format('woff'),
+       url(/path/to/fonts/examplefont.eot) format('eot');
+  font-weight: 400;
+  font-style: normal;
+  font-display: fallback;
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}{{Spec2('CSS4 Fonts')}}初回定義
+ +## ブラウザーの互換性 + +{{Compat("css.at-rules.font-face.font-display")}} + +## 関連情報 + + diff --git a/files/ja/web/css/@font-face/font-family/index.html b/files/ja/web/css/@font-face/font-family/index.html deleted file mode 100644 index ae8814bb60..0000000000 --- a/files/ja/web/css/@font-face/font-family/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: font-family -slug: Web/CSS/@font-face/font-family -tags: - - '@font-face' - - アットルール記述子 - - CSS - - CSS Descriptor - - CSS Fonts - - リファレンス -translation_of: Web/CSS/@font-face/font-family ---- -{{CSSRef}} - -`font-family` は CSS の記述子で、 {{cssxref("@font-face")}} 規則で指定されたフォントのフォントファミリーを指定することができます。 - -## 構文 - -
/* <string> 値 */
-font-family: "font family";
-font-family: 'another font family';
-
-/* <custom-ident> 値 */
-font-family: examplefont;
-
- -

値

- -- `<family-name>` - - : フォントファミリーの名前を指定します。 - -

公式定義

- -{{cssinfo}} - -

形式文法

- -{{csssyntax}} - -## 例 - -

フォントファミリー名の設定

- -
@font-face {
-  font-family: examplefont;
-  src: url('examplefont.ttf');
-}
-
- -## 仕様書 - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Fonts', '#font-family-desc', 'font-family')}}{{Spec2('CSS3 Fonts')}}初回定義
- -

ブラウザーの互換性

- -{{Compat("css.at-rules.font-face.font-family")}} - -## 関連情報 - - diff --git a/files/ja/web/css/@font-face/font-family/index.md b/files/ja/web/css/@font-face/font-family/index.md new file mode 100644 index 0000000000..ae8814bb60 --- /dev/null +++ b/files/ja/web/css/@font-face/font-family/index.md @@ -0,0 +1,85 @@ +--- +title: font-family +slug: Web/CSS/@font-face/font-family +tags: + - '@font-face' + - アットルール記述子 + - CSS + - CSS Descriptor + - CSS Fonts + - リファレンス +translation_of: Web/CSS/@font-face/font-family +--- +{{CSSRef}} + +`font-family` は CSS の記述子で、 {{cssxref("@font-face")}} 規則で指定されたフォントのフォントファミリーを指定することができます。 + +## 構文 + +
/* <string> 値 */
+font-family: "font family";
+font-family: 'another font family';
+
+/* <custom-ident> 値 */
+font-family: examplefont;
+
+ +

値

+ +- `<family-name>` + - : フォントファミリーの名前を指定します。 + +

公式定義

+ +{{cssinfo}} + +

形式文法

+ +{{csssyntax}} + +## 例 + +

フォントファミリー名の設定

+ +
@font-face {
+  font-family: examplefont;
+  src: url('examplefont.ttf');
+}
+
+ +## 仕様書 + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#font-family-desc', 'font-family')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの互換性

+ +{{Compat("css.at-rules.font-face.font-family")}} + +## 関連情報 + + diff --git a/files/ja/web/css/@font-face/font-stretch/index.html b/files/ja/web/css/@font-face/font-stretch/index.html deleted file mode 100644 index 7f72c04a0b..0000000000 --- a/files/ja/web/css/@font-face/font-stretch/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: font-stretch -slug: Web/CSS/@font-face/font-stretch -tags: - - '@font-face' - - CSS - - リファレンス - - descripter - - font-stretch - - 記述子 -translation_of: Web/CSS/@font-face/font-stretch ---- -{{CSSRef}}{{draft}} - -`font-stretch` は CSS の記述子で、ウェブページ作成者が {{cssxref("@font-face")}} 規則で定義されているフォントが通常か、幅狭か、幅広かを指定できるようにします。 - -ある特定のフォントについて、作成者は同じフォントの異なるスタイルに対応するさまざまなフォントフェイスをダウンロードでき、`font-stretch` 記述子を用いることでフォントフェイスのストレッチを明示的に指定します。CSS 記述子の値は、対応するフォントプロパティの値と同じです。 - -{{cssinfo}} - -## 構文 - -
/* 単一の値 */
-font-stretch: ultra-condensed;
-font-stretch: extra-condensed;
-font-stretch: condensed;
-font-stretch: semi-condensed;
-font-stretch: normal;
-font-stretch: semi-expanded;
-font-stretch: expanded;
-font-stretch: extra-expanded;
-font-stretch: ultra-expanded;
-font-stretch: 50%;
-font-stretch: 100%;
-font-stretch: 200%;
-
-/* 複数値 */
-font-stretch: 75% 125%;
-font-stretch: condensed ultra-condensed;;
-
- -`font-weight` プロパティは以下にリストとして示されている値のいずれかを使用して記述されます。 - -

値

- -- `normal` - - : 普通の文字幅。 -- `semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed` - - : 通常より幅狭な字を示します。semi-condenced が regular に比べてわずかに幅が細い程度で、そこから右 (ultra-condenced) に向かうにつれてさらに細くなっていきます。 -- `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded` - - : 通常より幅広な字を示します。semi-rxpanded がわずかに広い程度で、そこから右 (ultra-expanded) に向かうにつれてさらに広くなっていきます。 -- `<percentage>` - - : 50% から 200% の {{cssxref("<percentage>")}} 値で示します。このプロパティに負の値は許可されていません。 - -`font-stretch` の旧バージョンではプロパティは上記の `<percentage>` 以外の 9 つのキーワードのみを許可していましたが、CSS Fonts Level 4 における構文の拡張により`<percentage>` も使用できるようになりました。これにより、バリアブルフォントは連続した文字幅のようなものを提供できます。TrueType または OpenType バリアブルフォント (後述) の場合、"wdth" バリエーションを使用してさまざまな幅を実装できます。 - -フォントが指定された値と完全に一致するフェイスが提供されない場合、100% 未満の値は幅狭に現像され、100% 以上の値は幅広に現像されます。 - -

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

- -以下の表はキーワード指定の際の字幅と `<percentage>` 指定時の幅の違いを示します: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
キーワードパーセント値
`ultra-condensed`50%
`extra-condensed`62.5%
`condensed`75%
`semi-condensed`87.5%
`normal`100%
`semi-expanded`112.5%
`expanded`125%
`extra-expanded`150%
`ultra-expanded`200%
- -

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

- -ほとんどのフォントはキーワードの 1 つに対応する特定の幅を持ちます。しかしながら、バリアブル (可変) フォントと呼ばれる一部のフォントはきめ細かい精度で一連の伸縮が可能になっています。これにより、デザイナーは選択したウェイトをより厳密に制御できます。 これにはパーセント範囲が役立ちます。 - -TrueType または OpenType 可変フォントの場合、"wdth" バリエーションを使用して、さまざまなグリフ幅を実装します。 - -以下の例が動作するには、CSS Fonts Level 4 構文をサポートするブラウザーが必要です。この構文では font-weight は 1 から 1000 の任意の数値にできます。 - -## 形式文法 - -{{csssyntax}} - -## 例 - -以下はローカルの Open Sans 書体をインポートし、normal、semi-condensed、ならびに semi-expanded を使用できるようにするものです。 - -
@font-face {
-  font-family: "Open Sans";
-  src: local("Open Sans") format("woff2"),
-       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
-  font-stretch: 87.5% 112.5%;
-}
- -

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

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

ブラウザーの互換性

- -{{Compat("css.at-rules.font-face.font-stretch")}} - -## 関連情報 - - diff --git a/files/ja/web/css/@font-face/font-stretch/index.md b/files/ja/web/css/@font-face/font-stretch/index.md new file mode 100644 index 0000000000..7f72c04a0b --- /dev/null +++ b/files/ja/web/css/@font-face/font-stretch/index.md @@ -0,0 +1,182 @@ +--- +title: font-stretch +slug: Web/CSS/@font-face/font-stretch +tags: + - '@font-face' + - CSS + - リファレンス + - descripter + - font-stretch + - 記述子 +translation_of: Web/CSS/@font-face/font-stretch +--- +{{CSSRef}}{{draft}} + +`font-stretch` は CSS の記述子で、ウェブページ作成者が {{cssxref("@font-face")}} 規則で定義されているフォントが通常か、幅狭か、幅広かを指定できるようにします。 + +ある特定のフォントについて、作成者は同じフォントの異なるスタイルに対応するさまざまなフォントフェイスをダウンロードでき、`font-stretch` 記述子を用いることでフォントフェイスのストレッチを明示的に指定します。CSS 記述子の値は、対応するフォントプロパティの値と同じです。 + +{{cssinfo}} + +## 構文 + +
/* 単一の値 */
+font-stretch: ultra-condensed;
+font-stretch: extra-condensed;
+font-stretch: condensed;
+font-stretch: semi-condensed;
+font-stretch: normal;
+font-stretch: semi-expanded;
+font-stretch: expanded;
+font-stretch: extra-expanded;
+font-stretch: ultra-expanded;
+font-stretch: 50%;
+font-stretch: 100%;
+font-stretch: 200%;
+
+/* 複数値 */
+font-stretch: 75% 125%;
+font-stretch: condensed ultra-condensed;;
+
+ +`font-weight` プロパティは以下にリストとして示されている値のいずれかを使用して記述されます。 + +

値

+ +- `normal` + - : 普通の文字幅。 +- `semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed` + - : 通常より幅狭な字を示します。semi-condenced が regular に比べてわずかに幅が細い程度で、そこから右 (ultra-condenced) に向かうにつれてさらに細くなっていきます。 +- `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded` + - : 通常より幅広な字を示します。semi-rxpanded がわずかに広い程度で、そこから右 (ultra-expanded) に向かうにつれてさらに広くなっていきます。 +- `<percentage>` + - : 50% から 200% の {{cssxref("<percentage>")}} 値で示します。このプロパティに負の値は許可されていません。 + +`font-stretch` の旧バージョンではプロパティは上記の `<percentage>` 以外の 9 つのキーワードのみを許可していましたが、CSS Fonts Level 4 における構文の拡張により`<percentage>` も使用できるようになりました。これにより、バリアブルフォントは連続した文字幅のようなものを提供できます。TrueType または OpenType バリアブルフォント (後述) の場合、"wdth" バリエーションを使用してさまざまな幅を実装できます。 + +フォントが指定された値と完全に一致するフェイスが提供されない場合、100% 未満の値は幅狭に現像され、100% 以上の値は幅広に現像されます。 + +

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

+ +以下の表はキーワード指定の際の字幅と `<percentage>` 指定時の幅の違いを示します: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
キーワードパーセント値
`ultra-condensed`50%
`extra-condensed`62.5%
`condensed`75%
`semi-condensed`87.5%
`normal`100%
`semi-expanded`112.5%
`expanded`125%
`extra-expanded`150%
`ultra-expanded`200%
+ +

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

+ +ほとんどのフォントはキーワードの 1 つに対応する特定の幅を持ちます。しかしながら、バリアブル (可変) フォントと呼ばれる一部のフォントはきめ細かい精度で一連の伸縮が可能になっています。これにより、デザイナーは選択したウェイトをより厳密に制御できます。 これにはパーセント範囲が役立ちます。 + +TrueType または OpenType 可変フォントの場合、"wdth" バリエーションを使用して、さまざまなグリフ幅を実装します。 + +以下の例が動作するには、CSS Fonts Level 4 構文をサポートするブラウザーが必要です。この構文では font-weight は 1 から 1000 の任意の数値にできます。 + +## 形式文法 + +{{csssyntax}} + +## 例 + +以下はローカルの Open Sans 書体をインポートし、normal、semi-condensed、ならびに semi-expanded を使用できるようにするものです。 + +
@font-face {
+  font-family: "Open Sans";
+  src: local("Open Sans") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+  font-stretch: 87.5% 112.5%;
+}
+ +

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

+ +特にフォントの[コントラストカラー比が低い](/ja/docs/Web/CSS/color#Accessibility_concerns)場合、識字障害をはじめとする認知症状のある人は凝縮しすぎたフォントを読むのが困難になる場合があります。詳細は以下をご覧ください。 + + + +## 仕様書 + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-stretch')}}{{Spec2('CSS4 Fonts')}}
{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-stretch')}}{{Spec2('CSS3 Fonts')}}
+ +

ブラウザーの互換性

+ +{{Compat("css.at-rules.font-face.font-stretch")}} + +## 関連情報 + + diff --git a/files/ja/web/css/@font-face/font-style/index.html b/files/ja/web/css/@font-face/font-style/index.html deleted file mode 100644 index d688077108..0000000000 --- a/files/ja/web/css/@font-face/font-style/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: font-style -slug: Web/CSS/@font-face/font-style -tags: - - '@font-face' - - アットルール記述子 - - CSS - - CSS Descriptor - - CSS Fonts - - リファレンス -translation_of: Web/CSS/@font-face/font-style ---- -{{CSSRef}} - -`font-style` は CSS の記述子で、 {{cssxref("@font-face")}} 規則の中で指定されたフォントのフォントスタイルを指定することができます。 - -特定のフォントファミリについて、同じフォントファミリの異なるスタイルに対応する様々なフォントフェイスをダウンロードできるようにすることができ、 `font-style` 記述子を使用してフォントフェイスのスタイルを正確に指定することができます。 CSS 記述子の値は対応する font プロパティと同じです。 - -## 構文 - -
font-style: normal;
-font-style: italic;
-font-style: oblique;
-font-style: oblique 30deg;
-font-style: oblique 30deg 50deg;
-
- -

値

- -- `normal` - - : フォントファミリの通常の版を選択します。 -- `italic` - - : フォントフェイスが通常のフォントのイタリック版であることを指定します。 -- `oblique` - - : フォントフェイスが通常のフォントを機械的に傾けたものであることを指定します。 - -- `oblique` と角度 - - : `oblique` として分類されたフォントを選択し、テキストの角度を追加で指定します。 -- `oblique` と角度の範囲 - - : `oblique` として分類されたフォントを選択し、テキストの角度の範囲を追加で指定します。なお、範囲は `font-style` が `oblique` であるときにだけ対応しています。 `font-style: normal` 又は `italic` の場合は、第二の値は許可されません。 - -

公式定義

- -{{cssinfo}} - -

形式文法

- -{{csssyntax}} - -## 例 - -

イタリックフォントスタイルの指定

- -例として、 garamond フォントファミリを指定すると、基本の形として、以下の結果が得られます。 - -
@font-face {
-  font-family: garamond;
-  src: url('garamond.ttf');
-}
- -スタイルなしの garamond - -このテキストのイタリック版は、スタイルなしの版と同じ字形を使用しますが、人工的に数度だけ傾けてあります。 - -人工的に傾けた garamond - -一方で、フォントファミリに真にイタリックである版がある場合、 `src` 記述子を含めてそのフォントがイタリックだと指定することで、フォントがイタリックになることが明確になります。本当のイタリックは異なる字形を用い、少し右上に傾いており、いくらか固有の特徴を持ち、一般に丸みを帯びており、筆記体に似た品質です。これらのフォントはフォントのデザイナーによって特別に作成されたものであり、人工的に傾けたものではありません。 - -
@font-face {
-  font-family: garamond;
-  src: url('garamond-italic.ttf');
-  font-style: italic;
-}
- -イタリックの garamond - -## 仕様書 - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-style')}}{{Spec2('CSS4 Fonts')}}角度の値を付けた oblique キーワードを追加
{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-style')}}{{Spec2('CSS3 Fonts')}}初回定義
- -

ブラウザーの互換性

- -{{Compat("css.at-rules.font-face.font-style")}} - -## 関連情報 - - diff --git a/files/ja/web/css/@font-face/font-style/index.md b/files/ja/web/css/@font-face/font-style/index.md new file mode 100644 index 0000000000..d688077108 --- /dev/null +++ b/files/ja/web/css/@font-face/font-style/index.md @@ -0,0 +1,117 @@ +--- +title: font-style +slug: Web/CSS/@font-face/font-style +tags: + - '@font-face' + - アットルール記述子 + - CSS + - CSS Descriptor + - CSS Fonts + - リファレンス +translation_of: Web/CSS/@font-face/font-style +--- +{{CSSRef}} + +`font-style` は CSS の記述子で、 {{cssxref("@font-face")}} 規則の中で指定されたフォントのフォントスタイルを指定することができます。 + +特定のフォントファミリについて、同じフォントファミリの異なるスタイルに対応する様々なフォントフェイスをダウンロードできるようにすることができ、 `font-style` 記述子を使用してフォントフェイスのスタイルを正確に指定することができます。 CSS 記述子の値は対応する font プロパティと同じです。 + +## 構文 + +
font-style: normal;
+font-style: italic;
+font-style: oblique;
+font-style: oblique 30deg;
+font-style: oblique 30deg 50deg;
+
+ +

値

+ +- `normal` + - : フォントファミリの通常の版を選択します。 +- `italic` + - : フォントフェイスが通常のフォントのイタリック版であることを指定します。 +- `oblique` + - : フォントフェイスが通常のフォントを機械的に傾けたものであることを指定します。 + +- `oblique` と角度 + - : `oblique` として分類されたフォントを選択し、テキストの角度を追加で指定します。 +- `oblique` と角度の範囲 + - : `oblique` として分類されたフォントを選択し、テキストの角度の範囲を追加で指定します。なお、範囲は `font-style` が `oblique` であるときにだけ対応しています。 `font-style: normal` 又は `italic` の場合は、第二の値は許可されません。 + +

公式定義

+ +{{cssinfo}} + +

形式文法

+ +{{csssyntax}} + +## 例 + +

イタリックフォントスタイルの指定

+ +例として、 garamond フォントファミリを指定すると、基本の形として、以下の結果が得られます。 + +
@font-face {
+  font-family: garamond;
+  src: url('garamond.ttf');
+}
+ +スタイルなしの garamond + +このテキストのイタリック版は、スタイルなしの版と同じ字形を使用しますが、人工的に数度だけ傾けてあります。 + +人工的に傾けた garamond + +一方で、フォントファミリに真にイタリックである版がある場合、 `src` 記述子を含めてそのフォントがイタリックだと指定することで、フォントがイタリックになることが明確になります。本当のイタリックは異なる字形を用い、少し右上に傾いており、いくらか固有の特徴を持ち、一般に丸みを帯びており、筆記体に似た品質です。これらのフォントはフォントのデザイナーによって特別に作成されたものであり、人工的に傾けたものではありません。 + +
@font-face {
+  font-family: garamond;
+  src: url('garamond-italic.ttf');
+  font-style: italic;
+}
+ +イタリックの garamond + +## 仕様書 + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-style')}}{{Spec2('CSS4 Fonts')}}角度の値を付けた oblique キーワードを追加
{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-style')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの互換性

+ +{{Compat("css.at-rules.font-face.font-style")}} + +## 関連情報 + + diff --git a/files/ja/web/css/@font-face/font-variation-settings/index.html b/files/ja/web/css/@font-face/font-variation-settings/index.html deleted file mode 100644 index f18e3ade87..0000000000 --- a/files/ja/web/css/@font-face/font-variation-settings/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: font-variation-settings -slug: Web/CSS/@font-face/font-variation-settings -tags: - - '@font-face' - - CSS - - CSS Descriptor - - CSS Fonts - - CSS 記述子 - - リファレンス -translation_of: Web/CSS/@font-face/font-variation-settings ---- -{{CSSRef}} - -`font-variation-settings` は CSS の記述子で、 {{cssxref("@font-face")}} 規則の中で OpenType または TrueType の低レベルのフォントバリエーションを指定することができます。 - -{{cssinfo}} - -## 構文 - -
-
/* 既定の設定を使用 */
-font-variation-settings: normal;
-
-/* OpenType 軸名の値を設定 */
-font-variation-settings: "xhgt" 0.7;
-
- -

値

- -- `normal` - - : テキストは既定の設定を使用してレイアウトされます。 -- `<string> <number>` - - : テキストを描画するとき、 OpenType 軸名のリストがテキストレイアウトエンジンに渡され、フォント機能を有効化または無効化します。それぞれの設定は常に {{cssxref("<string>")}} が4つの ASCII 文字で、その後に字句の値を示す {{cssxref("number")}} が続きます。 `<string>` の長さが異なっていたり U+20 - U+7E 以外のコードポイントの範囲の文字が含まれていたりした場合は、プロパティ全体が無効になります。 `<number>` は小数や負の数を取ることができます。 - -## 形式文法 - -{{csssyntax}} - -## 例 - -
@font-face {
-  font-family: 'OpenTypeFont';
-  src: url('open_type_font.woff2') format('woff2');
-  font-weight: normal;
-  font-style: normal;
-  font-variation-settings: 'wght' 400, 'wdth' 300;
-}
- -## 仕様書 - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-rend-desc', 'font-variation-settings')}}{{Spec2('CSS4 Fonts')}}初回定義
- -

ブラウザーの互換性

- -{{Compat("css.at-rules.font-face.font-variation-settings")}} - -## 関連情報 - - diff --git a/files/ja/web/css/@font-face/font-variation-settings/index.md b/files/ja/web/css/@font-face/font-variation-settings/index.md new file mode 100644 index 0000000000..f18e3ade87 --- /dev/null +++ b/files/ja/web/css/@font-face/font-variation-settings/index.md @@ -0,0 +1,85 @@ +--- +title: font-variation-settings +slug: Web/CSS/@font-face/font-variation-settings +tags: + - '@font-face' + - CSS + - CSS Descriptor + - CSS Fonts + - CSS 記述子 + - リファレンス +translation_of: Web/CSS/@font-face/font-variation-settings +--- +{{CSSRef}} + +`font-variation-settings` は CSS の記述子で、 {{cssxref("@font-face")}} 規則の中で OpenType または TrueType の低レベルのフォントバリエーションを指定することができます。 + +{{cssinfo}} + +## 構文 + +
+
/* 既定の設定を使用 */
+font-variation-settings: normal;
+
+/* OpenType 軸名の値を設定 */
+font-variation-settings: "xhgt" 0.7;
+
+ +

値

+ +- `normal` + - : テキストは既定の設定を使用してレイアウトされます。 +- `<string> <number>` + - : テキストを描画するとき、 OpenType 軸名のリストがテキストレイアウトエンジンに渡され、フォント機能を有効化または無効化します。それぞれの設定は常に {{cssxref("<string>")}} が4つの ASCII 文字で、その後に字句の値を示す {{cssxref("number")}} が続きます。 `<string>` の長さが異なっていたり U+20 - U+7E 以外のコードポイントの範囲の文字が含まれていたりした場合は、プロパティ全体が無効になります。 `<number>` は小数や負の数を取ることができます。 + +## 形式文法 + +{{csssyntax}} + +## 例 + +
@font-face {
+  font-family: 'OpenTypeFont';
+  src: url('open_type_font.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-variation-settings: 'wght' 400, 'wdth' 300;
+}
+ +## 仕様書 + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-rend-desc', 'font-variation-settings')}}{{Spec2('CSS4 Fonts')}}初回定義
+ +

ブラウザーの互換性

+ +{{Compat("css.at-rules.font-face.font-variation-settings")}} + +## 関連情報 + + diff --git a/files/ja/web/css/@font-face/font-weight/index.html b/files/ja/web/css/@font-face/font-weight/index.html deleted file mode 100644 index ef2d5b0919..0000000000 --- a/files/ja/web/css/@font-face/font-weight/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: font-weight -slug: Web/CSS/@font-face/font-weight -tags: - - '@font-face' - - アットルール記述子 - - CSS - - リファレンス - - 記述子 - - font-weight -translation_of: Web/CSS/@font-face/font-weight ---- -{{CSSRef}} - -`font-weight` は CSS の記述子で、 {{cssxref("@font-face")}} 規則で指定されたフォントの太さを指定することができます。別に {{cssxref("font-weight")}} プロパティを使用して、テキストを表示する文字の太さや細さを設定することができます。 - -特定のフォントファミリについて、同じフォントファミリの異なるスタイルに対応する様々なフォントフェイスをダウンロードできるようにすることができ、 `font-weight` 記述子を使用してフォントフェイスの太さを正確に指定することができます。 CSS 記述子の値は対応する font プロパティと同じです。 - -一般に、特定のフォントファミリには限られた太さのみが利用できます。指定された太さが存在しない場合、近い太さが使用されます。太字がないフォントでは、ふつうはユーザーエージェントが合成します。これを抑止するには、 {{cssxref('font-synthesis')}} プロパティを使用してください。 - -## 構文 - -
/* 単一の値 */
-font-weight: normal;
-font-weight: bold;
-font-weight: 400;
-
-/* 複数の値 */
-font-weight: normal bold;
-font-weight: 300 500;
-
- -`font-weight` プロパティは、以下に挙げる値のうちの一つを使用して記述します。 - -

値

- -- `normal` - - : 通常のフォントの太さです。 `400` と同じです。 -- `bold` - - : 太字のフォントの太さです。 `700` と同じです。 -- `<number>` - - : 1 以上 1000 以下の {{cssxref("<number>")}} 値です。数値が大きいと、数値が小さい物より太さが太い (又は同じ) ことを表します。よく使用される値は、以下の[一般的な太さ名との対応](#Common_weight_name_mapping)にあるように、共通の太さ名に対応しています。 - -`font-weight` 仕様書の古いバージョンでは、このプロパティはキーワード値と数値 100, 200, 300, 400, 500, 600, 700, 800, 900 のみを受け付けていました。可変フォント以外では実際にはこれらのセット値しか利用できません。ただし、可変フォント以外では細かい値 (例えば 451) は、これらの値のいずれかに変換されます。 - -CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任意の数値を受け付けるようになり、{{anch("Variable fonts", "可変フォント")}}が導入され、フォントの太さにもっと細かい範囲を使用することができるようになりました。 - -

良くある太さ名の対応

- -`100` から `900` の数値は、おおよそ以下の太さ名に対応します。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
値太さ名
100Thin (Hairline)
200Extra Light (Ultra Light)
300Light
400Normal
500Medium
600Semi Bold (Demi Bold)
700Bold
800Extra Bold (Ultra Bold)
900Black (Heavy)
- -

可変フォント

- -多くのフォントは、[一般的な太さ名との対応](#Common_weight_name_mapping)の中の数値の一つに対応する特定の太さを持っています。しかし、可変フォントと呼ばれる一部のフォントは、もっと高い又は低い粒度の太さの範囲に対応しており、これにより、デザイナーは選択した太さをより詳細に制御することができます。 - -TrueType や OpenType の可変フォントでは、 "wght" バリエーションが様々な幅を実装するために使用されます。 - -

アクセシビリティの考慮

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

公式定義

- -{{cssinfo}} - -

形式文法

- -{{csssyntax}} - -## 例 - -

@font-face 規則における通常のフォントの太さの設定

- -以下の例は、ローカルの Open Sans フォントを見つけるか、またはそれをインポートして、通常の太さのフォントを使用することができます。 - -
@font-face {
-  font-family: "Open Sans";
-  src: local("Open Sans") format("woff2"),
-       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
-  font-weight: 400;
-}
- -## 仕様書 - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-weight')}}{{Spec2('CSS4 Fonts')}}
{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-weight')}}{{Spec2('CSS3 Fonts')}}
- -

ブラウザーの互換性

- -{{Compat("css.at-rules.font-face.font-weight")}} - -## 関連情報 - - diff --git a/files/ja/web/css/@font-face/font-weight/index.md b/files/ja/web/css/@font-face/font-weight/index.md new file mode 100644 index 0000000000..ef2d5b0919 --- /dev/null +++ b/files/ja/web/css/@font-face/font-weight/index.md @@ -0,0 +1,175 @@ +--- +title: font-weight +slug: Web/CSS/@font-face/font-weight +tags: + - '@font-face' + - アットルール記述子 + - CSS + - リファレンス + - 記述子 + - font-weight +translation_of: Web/CSS/@font-face/font-weight +--- +{{CSSRef}} + +`font-weight` は CSS の記述子で、 {{cssxref("@font-face")}} 規則で指定されたフォントの太さを指定することができます。別に {{cssxref("font-weight")}} プロパティを使用して、テキストを表示する文字の太さや細さを設定することができます。 + +特定のフォントファミリについて、同じフォントファミリの異なるスタイルに対応する様々なフォントフェイスをダウンロードできるようにすることができ、 `font-weight` 記述子を使用してフォントフェイスの太さを正確に指定することができます。 CSS 記述子の値は対応する font プロパティと同じです。 + +一般に、特定のフォントファミリには限られた太さのみが利用できます。指定された太さが存在しない場合、近い太さが使用されます。太字がないフォントでは、ふつうはユーザーエージェントが合成します。これを抑止するには、 {{cssxref('font-synthesis')}} プロパティを使用してください。 + +## 構文 + +
/* 単一の値 */
+font-weight: normal;
+font-weight: bold;
+font-weight: 400;
+
+/* 複数の値 */
+font-weight: normal bold;
+font-weight: 300 500;
+
+ +`font-weight` プロパティは、以下に挙げる値のうちの一つを使用して記述します。 + +

値

+ +- `normal` + - : 通常のフォントの太さです。 `400` と同じです。 +- `bold` + - : 太字のフォントの太さです。 `700` と同じです。 +- `<number>` + - : 1 以上 1000 以下の {{cssxref("<number>")}} 値です。数値が大きいと、数値が小さい物より太さが太い (又は同じ) ことを表します。よく使用される値は、以下の[一般的な太さ名との対応](#Common_weight_name_mapping)にあるように、共通の太さ名に対応しています。 + +`font-weight` 仕様書の古いバージョンでは、このプロパティはキーワード値と数値 100, 200, 300, 400, 500, 600, 700, 800, 900 のみを受け付けていました。可変フォント以外では実際にはこれらのセット値しか利用できません。ただし、可変フォント以外では細かい値 (例えば 451) は、これらの値のいずれかに変換されます。 + +CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任意の数値を受け付けるようになり、{{anch("Variable fonts", "可変フォント")}}が導入され、フォントの太さにもっと細かい範囲を使用することができるようになりました。 + +

良くある太さ名の対応

+ +`100` から `900` の数値は、おおよそ以下の太さ名に対応します。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
値太さ名
100Thin (Hairline)
200Extra Light (Ultra Light)
300Light
400Normal
500Medium
600Semi Bold (Demi Bold)
700Bold
800Extra Bold (Ultra Bold)
900Black (Heavy)
+ +

可変フォント

+ +多くのフォントは、[一般的な太さ名との対応](#Common_weight_name_mapping)の中の数値の一つに対応する特定の太さを持っています。しかし、可変フォントと呼ばれる一部のフォントは、もっと高い又は低い粒度の太さの範囲に対応しており、これにより、デザイナーは選択した太さをより詳細に制御することができます。 + +TrueType や OpenType の可変フォントでは、 "wght" バリエーションが様々な幅を実装するために使用されます。 + +

アクセシビリティの考慮

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

公式定義

+ +{{cssinfo}} + +

形式文法

+ +{{csssyntax}} + +## 例 + +

@font-face 規則における通常のフォントの太さの設定

+ +以下の例は、ローカルの Open Sans フォントを見つけるか、またはそれをインポートして、通常の太さのフォントを使用することができます。 + +
@font-face {
+  font-family: "Open Sans";
+  src: local("Open Sans") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+  font-weight: 400;
+}
+ +## 仕様書 + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-weight')}}{{Spec2('CSS4 Fonts')}}
{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-weight')}}{{Spec2('CSS3 Fonts')}}
+ +

ブラウザーの互換性

+ +{{Compat("css.at-rules.font-face.font-weight")}} + +## 関連情報 + + diff --git a/files/ja/web/css/@font-face/src/index.html b/files/ja/web/css/@font-face/src/index.html deleted file mode 100644 index c7c6478916..0000000000 --- a/files/ja/web/css/@font-face/src/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: src -slug: Web/CSS/@font-face/src -tags: - - '@font-face' - - アットルール記述子 - - CSS - - CSS Descriptor - - CSS Fonts - - CSS Property - - リファレンス -translation_of: Web/CSS/@font-face/src ---- -{{CSSRef}} - -`src` は CSS における {{cssxref("@font-face")}} 規則の 記述子で、フォントデータを含むリソースを指定します。 `@font-face` 規則を有効にするためには必要です。 - -## 構文 - -
/* <url> 値 */
-src: url(https://somewebsite.com/path/to/font.woff); /* 絶対 URL */
-src: url(path/to/font.woff);                         /* 相対 URL */
-src: url(path/to/font.woff) format("woff");          /* 明示的な書式 */
-src: url('path/to/font.woff');                       /* 引用符付きの URL */
-src: url(path/to/svgfont.svg#example);               /* フラグメントで識別するフォント */
-
-/* <font-face-name> 値 */
-src: local(font);      /* 引用符なしの名前 */
-src: local(some font); /* 空白が入った名前 */
-src: local("font");    /* 引用符付きの名前 */
-
-/* 複数の項目 */
-src: local(font), url(path/to/font.svg) format("svg"),
-     url(path/to/font.woff) format("woff"),
-     url(path/to/font.otf) format("opentype");
-
- -

値

- -- `<url> [ format( <string># ) ]?` - - : {{cssxref("<url>")}} と、続けて任意で format() 関数で URL で参照するフォントリソースの形式を記述して外部参照を指定します。形式のヒントには、知られているフォント形式を示す書式文字列をカンマで区切ったリストを指定します。ユーザーエージェントが指定した形式に対応していない場合は、フォントリソースをのダウンロードを飛ばします。形式のヒントが指定されていない場合は、フォントリソースはが常にダウンロードされます。 -- `<font-face-name>` - - : local() を使用して、ローカルに導入されたフォントフェイスを、より大きなフォントファミリ内で単一のフォントフェイスを一意に識別する名前で指定します。任意で名前を引用符で囲むことができます。 - -

解説

- -値は、外部参照またはローカルにインストールされたフォントフェイス名を、カンマで区切った優先度付きリストです。フォントが必要になった時、{{glossary("user agent", "ユーザーエージェント")}}はリスト上の参照を走査し、アクティブ化に成功した最初の物を使用します。無効なデータを持ったフォントや見つからないローカルのフォントは無視され、ユーザーエージェントはリスト上の次のフォントを読み込みます。 - -CSS のその他の URL と同様に、相対 URL を使用することができ、この場合は `@font-face` 規則を含むスタイルシートの位置からの相対になります。 SVG フォントの場合、 URL は SVG フォント定義を含む文書内の要素を指します。要素への参照が省略された場合は、参照は最初に定義されたフォントを含みます。同様に、複数のフォントを持つフォントコンテナー形式では、 `@font-face` 規則で指定された一つだけを読み込みます。読み込むフォントを示すためにはフラグメント識別子を使用します。コンテナー形式がフラグメントで識別する方法を持たない場合は、1から始まる添字 (例えば "font-collection#1" が最初のフォント、 "font-collection#2" が二番目のフォント、など) が使用されます。 - -

公式定義

- -{{cssinfo}} - -

形式文法

- -{{csssyntax}} - -## 例 - -

url() と local() を使用したフォントリソースの指定

- -
@font-face {
-  font-family: examplefont;
-  src: local(Example Font),
-       url('examplefont.woff') format("woff"),
-       url('examplefont.otf') format("opentype");
-}
-
- -## 仕様書 - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Fonts', '#src-desc', 'src')}}{{Spec2('CSS3 Fonts')}}初回定義
- -

ブラウザーの互換性

- -{{Compat("css.at-rules.font-face.src")}} - -## 関連情報 - - diff --git a/files/ja/web/css/@font-face/src/index.md b/files/ja/web/css/@font-face/src/index.md new file mode 100644 index 0000000000..c7c6478916 --- /dev/null +++ b/files/ja/web/css/@font-face/src/index.md @@ -0,0 +1,106 @@ +--- +title: src +slug: Web/CSS/@font-face/src +tags: + - '@font-face' + - アットルール記述子 + - CSS + - CSS Descriptor + - CSS Fonts + - CSS Property + - リファレンス +translation_of: Web/CSS/@font-face/src +--- +{{CSSRef}} + +`src` は CSS における {{cssxref("@font-face")}} 規則の 記述子で、フォントデータを含むリソースを指定します。 `@font-face` 規則を有効にするためには必要です。 + +## 構文 + +
/* <url> 値 */
+src: url(https://somewebsite.com/path/to/font.woff); /* 絶対 URL */
+src: url(path/to/font.woff);                         /* 相対 URL */
+src: url(path/to/font.woff) format("woff");          /* 明示的な書式 */
+src: url('path/to/font.woff');                       /* 引用符付きの URL */
+src: url(path/to/svgfont.svg#example);               /* フラグメントで識別するフォント */
+
+/* <font-face-name> 値 */
+src: local(font);      /* 引用符なしの名前 */
+src: local(some font); /* 空白が入った名前 */
+src: local("font");    /* 引用符付きの名前 */
+
+/* 複数の項目 */
+src: local(font), url(path/to/font.svg) format("svg"),
+     url(path/to/font.woff) format("woff"),
+     url(path/to/font.otf) format("opentype");
+
+ +

値

+ +- `<url> [ format( <string># ) ]?` + - : {{cssxref("<url>")}} と、続けて任意で format() 関数で URL で参照するフォントリソースの形式を記述して外部参照を指定します。形式のヒントには、知られているフォント形式を示す書式文字列をカンマで区切ったリストを指定します。ユーザーエージェントが指定した形式に対応していない場合は、フォントリソースをのダウンロードを飛ばします。形式のヒントが指定されていない場合は、フォントリソースはが常にダウンロードされます。 +- `<font-face-name>` + - : local() を使用して、ローカルに導入されたフォントフェイスを、より大きなフォントファミリ内で単一のフォントフェイスを一意に識別する名前で指定します。任意で名前を引用符で囲むことができます。 + +

解説

+ +値は、外部参照またはローカルにインストールされたフォントフェイス名を、カンマで区切った優先度付きリストです。フォントが必要になった時、{{glossary("user agent", "ユーザーエージェント")}}はリスト上の参照を走査し、アクティブ化に成功した最初の物を使用します。無効なデータを持ったフォントや見つからないローカルのフォントは無視され、ユーザーエージェントはリスト上の次のフォントを読み込みます。 + +CSS のその他の URL と同様に、相対 URL を使用することができ、この場合は `@font-face` 規則を含むスタイルシートの位置からの相対になります。 SVG フォントの場合、 URL は SVG フォント定義を含む文書内の要素を指します。要素への参照が省略された場合は、参照は最初に定義されたフォントを含みます。同様に、複数のフォントを持つフォントコンテナー形式では、 `@font-face` 規則で指定された一つだけを読み込みます。読み込むフォントを示すためにはフラグメント識別子を使用します。コンテナー形式がフラグメントで識別する方法を持たない場合は、1から始まる添字 (例えば "font-collection#1" が最初のフォント、 "font-collection#2" が二番目のフォント、など) が使用されます。 + +

公式定義

+ +{{cssinfo}} + +

形式文法

+ +{{csssyntax}} + +## 例 + +

url() と local() を使用したフォントリソースの指定

+ +
@font-face {
+  font-family: examplefont;
+  src: local(Example Font),
+       url('examplefont.woff') format("woff"),
+       url('examplefont.otf') format("opentype");
+}
+
+ +## 仕様書 + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#src-desc', 'src')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの互換性

+ +{{Compat("css.at-rules.font-face.src")}} + +## 関連情報 + + diff --git a/files/ja/web/css/@font-face/unicode-range/index.html b/files/ja/web/css/@font-face/unicode-range/index.html deleted file mode 100644 index c2c394befd..0000000000 --- a/files/ja/web/css/@font-face/unicode-range/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: unicode-range -slug: Web/CSS/@font-face/unicode-range -tags: - - アットルール記述子 - - CSS - - CSS Fonts - - CSS Property - - Experimental - - Layout - - リファレンス - - Web -translation_of: Web/CSS/@font-face/unicode-range ---- -{{cssref}} - -`unicode-range` は CSS の記述子で、 {{cssxref("@font-face")}} で定義されたフォントから使用される特定の文字範囲を設定し、現在のページで使用できるようにします。ページがこの範囲内の文字を使用しない場合、フォントはダウンロードされません。少なくとも 1 つの文字を使用すると、フォント全体がダウンロードされます。 - -## 構文 - -
/* <unicode-range> 値 */
-unicode-range: U+26;               /* 単一の符号位置 */
-unicode-range: U+0-7F;
-unicode-range: U+0025-00FF;        /* 符号位置の範囲 */
-unicode-range: U+4??;              /* ワイルドカードの範囲 */
-unicode-range: U+0025-00FF, U+4??; /* 複数の値 */
-
- -

値

- -- 単一の符号位置 - - : 単一の Unicode 符号位置。例: `U+26`. -- 符号位置の範囲 - - : Unicode 符号位置の範囲。例えば、 `U+0025-00FF` は、 `U+0025` から `U+00FF` の範囲内の全文字を含むこと意味します。 -- ワイルドカードの範囲 - - : ワイルドカード文字を含む Unicode 符号位置の範囲。 `'?'` 文字を使用します。例えば、`U+4??` は `U+400` から `U+4FF` の範囲の全文字を含むことを意味します。 - -

解説

- -この記述子の目的は、ブラウザーが特定のページのテキストコンテンツに必要なフォントリソースをダウンロードするだけで済むように、フォントリソースをセグメント化できるようにすることです。たとえば、ローカライズが多いサイトでは、英語、ギリシャ語、日本語のフォントリソースを個別に提供できます。英語版のページを閲覧しているユーザーには、ギリシャ語と日本語のフォントのフォントリソースをダウンロードする必要はなく、帯域幅を節約できます。 - -

公式定義

- -{{cssinfo}} - -

形式文法

- -{{csssyntax}} - -## 例 - -

Using a different font for a single character

- -異なるフォントでスタイルを設定したいアンパサンド (アンド記号) を含む 1 つの {{HTMLElement("div")}} 要素を持つだけの HTML を作成します。明確にするために、テキストにはサンセリフフォントの Helvetica を使用し、アンパサンドにはセリフフォントの Times New Roman を使用します。 - -CSS において、1 つの文字だけを含んだ完全に別個の {{cssxref("@font-face")}} を定義していることが分かります。つまりこの文字だけがこのフォントでスタイルされることになります。これはアンパサンドを {{HTMLElement("span")}} 内に入れて別のフォントを適用することによっても可能ですが、それには余分な要素とルールセットが必要です。 - -

HTML

- -
<div>Me & You = Us</div>
- -

CSS

- -
@font-face {
-  font-family: 'Ampersand';
-  src: local('Times New Roman');
-  unicode-range: U+26;
-}
-
-div {
-  font-size: 4em;
-  font-family: Ampersand, Helvetica, sans-serif;
-}
- -

結果

- -{{EmbedLiveSample("Using_a_different_font_for_a_single_character", 500,104)}} - -## 仕様書 - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Fonts', '#unicode-range-desc', 'unicode-range')}}{{Spec2('CSS3 Fonts')}}初回定義
- -

ブラウザーの互換性

- -{{Compat("css.at-rules.font-face.unicode-range")}} - -## 関連情報 - - diff --git a/files/ja/web/css/@font-face/unicode-range/index.md b/files/ja/web/css/@font-face/unicode-range/index.md new file mode 100644 index 0000000000..c2c394befd --- /dev/null +++ b/files/ja/web/css/@font-face/unicode-range/index.md @@ -0,0 +1,114 @@ +--- +title: unicode-range +slug: Web/CSS/@font-face/unicode-range +tags: + - アットルール記述子 + - CSS + - CSS Fonts + - CSS Property + - Experimental + - Layout + - リファレンス + - Web +translation_of: Web/CSS/@font-face/unicode-range +--- +{{cssref}} + +`unicode-range` は CSS の記述子で、 {{cssxref("@font-face")}} で定義されたフォントから使用される特定の文字範囲を設定し、現在のページで使用できるようにします。ページがこの範囲内の文字を使用しない場合、フォントはダウンロードされません。少なくとも 1 つの文字を使用すると、フォント全体がダウンロードされます。 + +## 構文 + +
/* <unicode-range> 値 */
+unicode-range: U+26;               /* 単一の符号位置 */
+unicode-range: U+0-7F;
+unicode-range: U+0025-00FF;        /* 符号位置の範囲 */
+unicode-range: U+4??;              /* ワイルドカードの範囲 */
+unicode-range: U+0025-00FF, U+4??; /* 複数の値 */
+
+ +

値

+ +- 単一の符号位置 + - : 単一の Unicode 符号位置。例: `U+26`. +- 符号位置の範囲 + - : Unicode 符号位置の範囲。例えば、 `U+0025-00FF` は、 `U+0025` から `U+00FF` の範囲内の全文字を含むこと意味します。 +- ワイルドカードの範囲 + - : ワイルドカード文字を含む Unicode 符号位置の範囲。 `'?'` 文字を使用します。例えば、`U+4??` は `U+400` から `U+4FF` の範囲の全文字を含むことを意味します。 + +

解説

+ +この記述子の目的は、ブラウザーが特定のページのテキストコンテンツに必要なフォントリソースをダウンロードするだけで済むように、フォントリソースをセグメント化できるようにすることです。たとえば、ローカライズが多いサイトでは、英語、ギリシャ語、日本語のフォントリソースを個別に提供できます。英語版のページを閲覧しているユーザーには、ギリシャ語と日本語のフォントのフォントリソースをダウンロードする必要はなく、帯域幅を節約できます。 + +

公式定義

+ +{{cssinfo}} + +

形式文法

+ +{{csssyntax}} + +## 例 + +

Using a different font for a single character

+ +異なるフォントでスタイルを設定したいアンパサンド (アンド記号) を含む 1 つの {{HTMLElement("div")}} 要素を持つだけの HTML を作成します。明確にするために、テキストにはサンセリフフォントの Helvetica を使用し、アンパサンドにはセリフフォントの Times New Roman を使用します。 + +CSS において、1 つの文字だけを含んだ完全に別個の {{cssxref("@font-face")}} を定義していることが分かります。つまりこの文字だけがこのフォントでスタイルされることになります。これはアンパサンドを {{HTMLElement("span")}} 内に入れて別のフォントを適用することによっても可能ですが、それには余分な要素とルールセットが必要です。 + +

HTML

+ +
<div>Me & You = Us</div>
+ +

CSS

+ +
@font-face {
+  font-family: 'Ampersand';
+  src: local('Times New Roman');
+  unicode-range: U+26;
+}
+
+div {
+  font-size: 4em;
+  font-family: Ampersand, Helvetica, sans-serif;
+}
+ +

結果

+ +{{EmbedLiveSample("Using_a_different_font_for_a_single_character", 500,104)}} + +## 仕様書 + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#unicode-range-desc', 'unicode-range')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの互換性

+ +{{Compat("css.at-rules.font-face.unicode-range")}} + +## 関連情報 + + -- cgit v1.2.3-54-g00ecf