From dec4fdef53365fde289fe07c7c35adfd0b7379e1 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 16 Feb 2022 09:42:04 +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 | 72 ++++++++-------- files/ja/web/css/@font-face/font-family/index.html | 44 +++++----- .../ja/web/css/@font-face/font-stretch/index.html | 98 +++++++++++----------- files/ja/web/css/@font-face/font-style/index.html | 78 ++++++++--------- .../@font-face/font-variation-settings/index.html | 48 +++++------ files/ja/web/css/@font-face/font-weight/index.html | 78 +++++++++-------- files/ja/web/css/@font-face/src/index.html | 52 ++++++------ .../ja/web/css/@font-face/unicode-range/index.html | 60 +++++++------ 8 files changed, 255 insertions(+), 275 deletions(-) diff --git a/files/ja/web/css/@font-face/font-display/index.html b/files/ja/web/css/@font-face/font-display/index.html index 3b11953bba..0a92c17416 100644 --- a/files/ja/web/css/@font-face/font-display/index.html +++ b/files/ja/web/css/@font-face/font-display/index.html @@ -12,11 +12,11 @@ tags: - リファレンス translation_of: Web/CSS/@font-face/font-display --- -
{{CSSRef}}
+{{CSSRef}} -

font-display 記述子は、フォントがダウンロード済みで利用できるかに基づいて、どのようにフォントの種類を表示するかを定めます。

+`font-display` 記述子は、フォントがダウンロード済みで利用できるかに基づいて、どのようにフォントの種類を表示するかを定めます。 -

構文

+## 構文 
/* キーワード値 */
 font-display: auto;
@@ -27,43 +27,39 @@ font-display: optional;

値

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

説明

フォント表示の過程

-

フォント表示の過程は、ユーザーエージェントが指定されたダウンロードフォントを利用しようとした瞬間に始まります。過程はフォントを利用して任意の要素を表示する振る舞いを説明する、以下の 3 つの時期に分かれます。

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

定義

-

{{cssinfo}}

+{{cssinfo}}

構文

{{csssyntax}} -

例

+## 例

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

@@ -95,20 +91,20 @@ font-display: optional; -

ブラウザーの対応

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

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

+{{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 index 3c7f112b44..ae8814bb60 100644 --- a/files/ja/web/css/@font-face/font-family/index.html +++ b/files/ja/web/css/@font-face/font-family/index.html @@ -3,18 +3,18 @@ title: font-family slug: Web/CSS/@font-face/font-family tags: - '@font-face' - - At-rule descriptor + - アットルール記述子 - CSS - CSS Descriptor - CSS Fonts - - Reference + - リファレンス translation_of: Web/CSS/@font-face/font-family --- -
{{CSSRef}}
+{{CSSRef}} -

font-family は CSS の記述子で、 {{cssxref("@font-face")}} 規則で指定されたフォントのフォントファミリーを指定することができます。

+`font-family` は CSS の記述子で、 {{cssxref("@font-face")}} 規則で指定されたフォントのフォントファミリーを指定することができます。 -

構文

+## 構文 
/* <string> 値 */
 font-family: "font family";
@@ -26,20 +26,18 @@ font-family: examplefont;
 
 
値

 
-

- 
<family-name>

- 
フォントファミリーの名前を指定します。

-

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

 
-
{{cssinfo}}

+{{cssinfo}}
 
 
形式文法

 
 {{csssyntax}}
 
-
例

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

 
@@ -49,7 +47,7 @@ font-family: examplefont;
 }
-

仕様書

+## 仕様書 @@ -70,18 +68,18 @@ font-family: examplefont;

ブラウザーの互換性

-

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

+{{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 index 1f0080601a..7f72c04a0b 100644 --- a/files/ja/web/css/@font-face/font-stretch/index.html +++ b/files/ja/web/css/@font-face/font-stretch/index.html @@ -4,21 +4,21 @@ slug: Web/CSS/@font-face/font-stretch tags: - '@font-face' - CSS - - Reference + - リファレンス - descripter - font-stretch - 記述子 translation_of: Web/CSS/@font-face/font-stretch --- -
{{CSSRef}}{{draft}}
+{{CSSRef}}{{draft}} -

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

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

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

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

{{cssinfo}}

+{{cssinfo}} -

構文

+## 構文 
/* 単一の値 */
 font-stretch: ultra-condensed;
@@ -39,28 +39,26 @@ font-stretch: 75% 125%;
 font-stretch: condensed ultra-condensed;;
-

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

+`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>")}} 値で示します。このプロパティに負の値は許可されていません。
-
+- `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" バリエーションを使用してさまざまな幅を実装できます。

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

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

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

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

-

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

+以下の表はキーワード指定の際の字幅と `<percentage>` 指定時の幅の違いを示します:
@@ -71,39 +69,39 @@ font-stretch: condensed ultra-condensed;; - + - + - + - + - + - + - + - + - + @@ -111,19 +109,19 @@ font-stretch: condensed ultra-condensed;;

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

-

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

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

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

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

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

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

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

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

+以下はローカルの Open Sans 書体をインポートし、normal、semi-condensed、ならびに semi-expanded を使用できるようにするものです。 
@font-face {
   font-family: "Open Sans";
@@ -134,14 +132,14 @@ font-stretch: condensed ultra-condensed;;
 
 
アクセシビリティの考慮事項

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

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

+## 仕様書
ultra-condensed`ultra-condensed` 50%
extra-condensed`extra-condensed` 62.5%
condensed`condensed` 75%
semi-condensed`semi-condensed` 87.5%
normal`normal` 100%
semi-expanded`semi-expanded` 112.5%
expanded`expanded` 125%
extra-expanded`extra-expanded` 150%
ultra-expanded`ultra-expanded` 200%
@@ -167,18 +165,18 @@ font-stretch: condensed ultra-condensed;;

ブラウザーの互換性

-

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

+{{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 index fe8b4c578f..d688077108 100644 --- a/files/ja/web/css/@font-face/font-style/index.html +++ b/files/ja/web/css/@font-face/font-style/index.html @@ -3,20 +3,20 @@ title: font-style slug: Web/CSS/@font-face/font-style tags: - '@font-face' - - At-rule descriptor + - アットルール記述子 - CSS - CSS Descriptor - CSS Fonts - - Reference + - リファレンス translation_of: Web/CSS/@font-face/font-style --- -
{{CSSRef}}
+{{CSSRef}} -

font-style は CSS の記述子で、 {{cssxref("@font-face")}} 規則の中で指定されたフォントのフォントスタイルを指定することができます。

+`font-style` は CSS の記述子で、 {{cssxref("@font-face")}} 規則の中で指定されたフォントのフォントスタイルを指定することができます。 -

特定のフォントファミリについて、同じフォントファミリの異なるスタイルに対応する様々なフォントフェイスをダウンロードできるようにすることができ、 font-style 記述子を使用してフォントフェイスのスタイルを正確に指定することができます。 CSS 記述子の値は対応する font プロパティと同じです。

+特定のフォントファミリについて、同じフォントファミリの異なるスタイルに対応する様々なフォントフェイスをダウンロードできるようにすることができ、 `font-style` 記述子を使用してフォントフェイスのスタイルを正確に指定することができます。 CSS 記述子の値は対応する font プロパティと同じです。 -

構文

+## 構文 
font-style: normal;
 font-style: italic;
@@ -27,48 +27,44 @@ font-style: oblique 30deg 50deg;
 
 
値

 
-

- 
normal

- 
フォントファミリの通常の版を選択します。

- 
italic

- 
フォントフェイスが通常のフォントのイタリック版であることを指定します。

- 
oblique

- 
フォントフェイスが通常のフォントを機械的に傾けたものであることを指定します。

-

-
-

- 
oblique と角度

- 
oblique として分類されたフォントを選択し、テキストの角度を追加で指定します。

- 
oblique と角度の範囲

- 
oblique として分類されたフォントを選択し、テキストの角度の範囲を追加で指定します。なお、範囲は font-style が oblique であるときにだけ対応しています。 font-style: normal 又は italic の場合は、第二の値は許可されません。

-

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

 
-
{{cssinfo}}

+{{cssinfo}}
 
 
形式文法

 
 {{csssyntax}}
 
-
例

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

 
-
例として、 garamond フォントファミリを指定すると、基本の形として、以下の結果が得られます。

+例として、 garamond フォントファミリを指定すると、基本の形として、以下の結果が得られます。
 
 
@font-face {
   font-family: garamond;
   src: url('garamond.ttf');
 }

 
-
スタイルなしの garamond

+スタイルなしの garamond
 
-
このテキストのイタリック版は、スタイルなしの版と同じ字形を使用しますが、人工的に数度だけ傾けてあります。

+このテキストのイタリック版は、スタイルなしの版と同じ字形を使用しますが、人工的に数度だけ傾けてあります。
 
-
人工的に傾けた garamond

+人工的に傾けた garamond
 
-
一方で、フォントファミリに真にイタリックである版がある場合、 src 記述子を含めてそのフォントがイタリックだと指定することで、フォントがイタリックになることが明確になります。本当のイタリックは異なる字形を用い、少し右上に傾いており、いくらか固有の特徴を持ち、一般に丸みを帯びており、筆記体に似た品質です。これらのフォントはフォントのデザイナーによって特別に作成されたものであり、人工的に傾けたものではありません。

+一方で、フォントファミリに真にイタリックである版がある場合、 `src` 記述子を含めてそのフォントがイタリックだと指定することで、フォントがイタリックになることが明確になります。本当のイタリックは異なる字形を用い、少し右上に傾いており、いくらか固有の特徴を持ち、一般に丸みを帯びており、筆記体に似た品質です。これらのフォントはフォントのデザイナーによって特別に作成されたものであり、人工的に傾けたものではありません。
 
 
@font-face {
   font-family: garamond;
@@ -76,9 +72,9 @@ font-style: oblique 30deg 50deg;
   font-style: italic;
 }

 
-
イタリックの garamond

+イタリックの garamond
 
-
仕様書

+## 仕様書
@@ -104,18 +100,18 @@ font-style: oblique 30deg 50deg;

ブラウザーの互換性

-

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

+{{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 index 00c09ea62f..f18e3ade87 100644 --- a/files/ja/web/css/@font-face/font-variation-settings/index.html +++ b/files/ja/web/css/@font-face/font-variation-settings/index.html @@ -7,16 +7,16 @@ tags: - CSS Descriptor - CSS Fonts - CSS 記述子 - - Reference + - リファレンス translation_of: Web/CSS/@font-face/font-variation-settings --- -
{{CSSRef}}
+{{CSSRef}} -

font-variation-settings は CSS の記述子で、 {{cssxref("@font-face")}} 規則の中で OpenType または TrueType の低レベルのフォントバリエーションを指定することができます。

+`font-variation-settings` は CSS の記述子で、 {{cssxref("@font-face")}} 規則の中で OpenType または TrueType の低レベルのフォントバリエーションを指定することができます。 -

{{cssinfo}}

+{{cssinfo}} -

構文

+## 構文 
/* 既定の設定を使用 */
@@ -28,18 +28,16 @@ font-variation-settings: "xhgt" 0.7;

値

-
-
normal
-
テキストは既定の設定を使用してレイアウトされます。
-
<string> <number>
-
テキストを描画するとき、 OpenType 軸名のリストがテキストレイアウトエンジンに渡され、フォント機能を有効化または無効化します。それぞれの設定は常に {{cssxref("<string>")}} が4つの ASCII 文字で、その後に字句の値を示す {{cssxref("number")}} が続きます。 <string> の長さが異なっていたり U+20 - U+7E 以外のコードポイントの範囲の文字が含まれていたりした場合は、プロパティ全体が無効になります。 <number> は小数や負の数を取ることができます。
-
+- `normal` + - : テキストは既定の設定を使用してレイアウトされます。 +- `<string> <number>` + - : テキストを描画するとき、 OpenType 軸名のリストがテキストレイアウトエンジンに渡され、フォント機能を有効化または無効化します。それぞれの設定は常に {{cssxref("<string>")}} が4つの ASCII 文字で、その後に字句の値を示す {{cssxref("number")}} が続きます。 `<string>` の長さが異なっていたり U+20 - U+7E 以外のコードポイントの範囲の文字が含まれていたりした場合は、プロパティ全体が無効になります。 `<number>` は小数や負の数を取ることができます。 -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 
@font-face {
   font-family: 'OpenTypeFont';
@@ -49,7 +47,7 @@ font-variation-settings: "xhgt" 0.7;
font-variation-settings: 'wght' 400, 'wdth' 300; } -

仕様書

+## 仕様書
@@ -70,18 +68,18 @@ font-variation-settings: "xhgt" 0.7;

ブラウザーの互換性

-

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

+{{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 index 16eba4cfbd..ef2d5b0919 100644 --- a/files/ja/web/css/@font-face/font-weight/index.html +++ b/files/ja/web/css/@font-face/font-weight/index.html @@ -3,22 +3,22 @@ title: font-weight slug: Web/CSS/@font-face/font-weight tags: - '@font-face' - - At-rule descriptor + - アットルール記述子 - CSS - - Reference - - descriptor + - リファレンス + - 記述子 - font-weight translation_of: Web/CSS/@font-face/font-weight --- -

{{CSSRef}}

+{{CSSRef}} -

font-weight は CSS の記述子で、 {{cssxref("@font-face")}} 規則で指定されたフォントの太さを指定することができます。別に {{cssxref("font-weight")}} プロパティを使用して、テキストを表示する文字の太さや細さを設定することができます。

+`font-weight` は CSS の記述子で、 {{cssxref("@font-face")}} 規則で指定されたフォントの太さを指定することができます。別に {{cssxref("font-weight")}} プロパティを使用して、テキストを表示する文字の太さや細さを設定することができます。 -

特定のフォントファミリについて、同じフォントファミリの異なるスタイルに対応する様々なフォントフェイスをダウンロードできるようにすることができ、 font-weight 記述子を使用してフォントフェイスの太さを正確に指定することができます。 CSS 記述子の値は対応する font プロパティと同じです。

+特定のフォントファミリについて、同じフォントファミリの異なるスタイルに対応する様々なフォントフェイスをダウンロードできるようにすることができ、 `font-weight` 記述子を使用してフォントフェイスの太さを正確に指定することができます。 CSS 記述子の値は対応する font プロパティと同じです。 -

一般に、特定のフォントファミリには限られた太さのみが利用できます。指定された太さが存在しない場合、近い太さが使用されます。太字がないフォントでは、ふつうはユーザーエージェントが合成します。これを抑止するには、 {{cssxref('font-synthesis')}} プロパティを使用してください。

+一般に、特定のフォントファミリには限られた太さのみが利用できます。指定された太さが存在しない場合、近い太さが使用されます。太字がないフォントでは、ふつうはユーザーエージェントが合成します。これを抑止するには、 {{cssxref('font-synthesis')}} プロパティを使用してください。 -

構文

+## 構文 
/* 単一の値 */
 font-weight: normal;
@@ -30,26 +30,24 @@ font-weight: normal bold;
 font-weight: 300 500;
-

font-weight プロパティは、以下に挙げる値のうちの一つを使用して記述します。

+`font-weight` プロパティは、以下に挙げる値のうちの一つを使用して記述します。

値

-
-
normal
-
通常のフォントの太さです。 400 と同じです。
-
bold
-
太字のフォントの太さです。 700 と同じです。
-
<number>
-
1 以上 1000 以下の {{cssxref("<number>")}} 値です。数値が大きいと、数値が小さい物より太さが太い (又は同じ) ことを表します。よく使用される値は、以下の一般的な太さ名との対応にあるように、共通の太さ名に対応しています。
-
+- `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) は、これらの値のいずれかに変換されます。

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

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

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

良くある太さ名の対応

-

100 から 900 の数値は、おおよそ以下の太さ名に対応します。

+`100` から `900` の数値は、おおよそ以下の太さ名に対応します。
@@ -100,32 +98,32 @@ font-weight: 300 500;

可変フォント

-

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

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

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

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

アクセシビリティの考慮

-

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

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

公式定義

-

{{cssinfo}}

+{{cssinfo}}

形式文法

{{csssyntax}} -

例

+## 例

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

-

以下の例は、ローカルの Open Sans フォントを見つけるか、またはそれをインポートして、通常の太さのフォントを使用することができます。

+以下の例は、ローカルの Open Sans フォントを見つけるか、またはそれをインポートして、通常の太さのフォントを使用することができます。 
@font-face {
   font-family: "Open Sans";
@@ -134,7 +132,7 @@ font-weight: 300 500;
   font-weight: 400;
 }
-

仕様書

+## 仕様書
@@ -160,18 +158,18 @@ font-weight: 300 500;

ブラウザーの互換性

-

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

+{{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 index ddb05bcf5a..c7c6478916 100644 --- a/files/ja/web/css/@font-face/src/index.html +++ b/files/ja/web/css/@font-face/src/index.html @@ -3,19 +3,19 @@ title: src slug: Web/CSS/@font-face/src tags: - '@font-face' - - At-rule descriptor + - アットルール記述子 - CSS - CSS Descriptor - CSS Fonts - CSS Property - - Reference + - リファレンス translation_of: Web/CSS/@font-face/src --- -
{{CSSRef}}
+{{CSSRef}} -

src は CSS における {{cssxref("@font-face")}} 規則の 記述子で、フォントデータを含むリソースを指定します。 @font-face 規則を有効にするためには必要です。

+`src` は CSS における {{cssxref("@font-face")}} 規則の 記述子で、フォントデータを含むリソースを指定します。 `@font-face` 規則を有効にするためには必要です。 -

構文

+## 構文 
/* <url> 値 */
 src: url(https://somewebsite.com/path/to/font.woff); /* 絶対 URL */
@@ -37,28 +37,26 @@ src: local(font), url(path/to/font.svg) format("svg"),
 
 
値

 
-

- 
<url> [ format( <string># ) ]?

- 
{{cssxref("<url>")}} と、続けて任意で format() 関数で URL で参照するフォントリソースの形式を記述して外部参照を指定します。形式のヒントには、知られているフォント形式を示す書式文字列をカンマで区切ったリストを指定します。ユーザーエージェントが指定した形式に対応していない場合は、フォントリソースをのダウンロードを飛ばします。形式のヒントが指定されていない場合は、フォントリソースはが常にダウンロードされます。

- 
<font-face-name>

- 
local() を使用して、ローカルに導入されたフォントフェイスを、より大きなフォントファミリ内で単一のフォントフェイスを一意に識別する名前で指定します。任意で名前を引用符で囲むことができます。

-

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

 
-
値は、外部参照またはローカルにインストールされたフォントフェイス名を、カンマで区切った優先度付きリストです。フォントが必要になった時、{{glossary("user agent", "ユーザーエージェント")}}はリスト上の参照を走査し、アクティブ化に成功した最初の物を使用します。無効なデータを持ったフォントや見つからないローカルのフォントは無視され、ユーザーエージェントはリスト上の次のフォントを読み込みます。

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

+CSS のその他の URL と同様に、相対 URL を使用することができ、この場合は `@font-face` 規則を含むスタイルシートの位置からの相対になります。 SVG フォントの場合、 URL は SVG フォント定義を含む文書内の要素を指します。要素への参照が省略された場合は、参照は最初に定義されたフォントを含みます。同様に、複数のフォントを持つフォントコンテナー形式では、 `@font-face` 規則で指定された一つだけを読み込みます。読み込むフォントを示すためにはフラグメント識別子を使用します。コンテナー形式がフラグメントで識別する方法を持たない場合は、1から始まる添字 (例えば "font-collection#1" が最初のフォント、 "font-collection#2" が二番目のフォント、など) が使用されます。
 
 
公式定義

 
-
{{cssinfo}}

+{{cssinfo}}
 
 
形式文法

 
 {{csssyntax}}
 
-
例

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

 
@@ -70,7 +68,7 @@ src: local(font), url(path/to/font.svg) format("svg"),
 }
-

仕様書

+## 仕様書
@@ -91,18 +89,18 @@ src: local(font), url(path/to/font.svg) format("svg"),

ブラウザーの互換性

-

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

+{{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 index e51f494923..c2c394befd 100644 --- a/files/ja/web/css/@font-face/unicode-range/index.html +++ b/files/ja/web/css/@font-face/unicode-range/index.html @@ -2,21 +2,21 @@ title: unicode-range slug: Web/CSS/@font-face/unicode-range tags: - - At-rule descriptor + - アットルール記述子 - CSS - CSS Fonts - CSS Property - Experimental - Layout - - Reference + - リファレンス - Web translation_of: Web/CSS/@font-face/unicode-range --- -
{{cssref}}
+{{cssref}} -

unicode-range は CSS の記述子で、 {{cssxref("@font-face")}} で定義されたフォントから使用される特定の文字範囲を設定し、現在のページで使用できるようにします。ページがこの範囲内の文字を使用しない場合、フォントはダウンロードされません。少なくとも 1 つの文字を使用すると、フォント全体がダウンロードされます。

+`unicode-range` は CSS の記述子で、 {{cssxref("@font-face")}} で定義されたフォントから使用される特定の文字範囲を設定し、現在のページで使用できるようにします。ページがこの範囲内の文字を使用しない場合、フォントはダウンロードされません。少なくとも 1 つの文字を使用すると、フォント全体がダウンロードされます。 -

構文

+## 構文 
/* <unicode-range> 値 */
 unicode-range: U+26;               /* 単一の符号位置 */
@@ -28,34 +28,32 @@ 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 の範囲の全文字を含むことを意味します。

-

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

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

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

 
-
{{cssinfo}}

+{{cssinfo}}
 
 
形式文法

 
 {{csssyntax}}
 
-
例

+## 例
 
 
Using a different font for a single character

 
-
異なるフォントでスタイルを設定したいアンパサンド (アンド記号) を含む 1 つの {{HTMLElement("div")}} 要素を持つだけの HTML を作成します。明確にするために、テキストにはサンセリフフォントの Helvetica を使用し、アンパサンドにはセリフフォントの Times New Roman を使用します。

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

+CSS において、1 つの文字だけを含んだ完全に別個の {{cssxref("@font-face")}} を定義していることが分かります。つまりこの文字だけがこのフォントでスタイルされることになります。これはアンパサンドを {{HTMLElement("span")}} 内に入れて別のフォントを適用することによっても可能ですが、それには余分な要素とルールセットが必要です。
 
 
HTML

 
@@ -76,9 +74,9 @@ div {
 
 
結果

 
-
{{EmbedLiveSample("Using_a_different_font_for_a_single_character", 500,104)}}

+{{EmbedLiveSample("Using_a_different_font_for_a_single_character", 500,104)}}
 
-
仕様書

+## 仕様書
@@ -99,18 +97,18 @@ div {

ブラウザーの互換性

-

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

+{{Compat("css.at-rules.font-face.unicode-range")}} -

関連情報

+## 関連情報 -- cgit v1.2.3-54-g00ecf