recursal/MDN huggingface dataset:
画像からのシェイプの作成
============

このガイドでは、アルファチャンネルを含む画像ファイル、または CSS グラデーションからシェイプを作成する方法を見ていきます。これはシェイプを作成するためのとても柔軟な方法です。 CSS で複雑なポリゴンを持つパスを描画するのではなく、グラフィックプログラムでシェイプを作成し、しきい値よりも透明度の高いピクセルによって作成されたパスを使用することができます。

画像をもとにした単純なシェイプ
---------------

シェイプの画像を使用するには、完全に不透明ではない領域があるアルファチャンネルが必要です。 `shape-image-threshold` プロパティは、この透明度のしきい値を設定するために使用されます。この値よりも透明度の低いピクセルは、シェイプの範囲を計算するために使用されます。

簡単な例として、赤い塗りつぶしの星形の領域と、完全に透明な領域のある画像があるとします。 `shape-outside` プロパティの値として、画像ファイルへのパスを使用します。コンテンツは星形の図形で折り返されるようになりました。

シェイプからテキストを離すために `shape-margin` を使用することができ、作成されたシェイプの周囲と、テキストとの間のマージンを指定します。

CORS 互換
-------

画像からシェイプを作成する際には、使用する画像が CORS 互換である必要があります。サイトと同じドメインにホスティングされている画像は動作しますが、画像が CDN などの別のドメインでホスティングされている場合は、正しいヘッダーを送信してシェイプで利用できるようにする必要があります。この CORS 互換画像の要件のため、ローカルのウェブサーバーを使用せずにローカルでファイルをプレビューすると、シェイプは機能しません。

### CORS の問題かどうか

開発者ツールは CORS エラーを特定するのに役立ちます。 Chrome では、コンソールから CORS の問題が通知されます。 Firefox では、プロパティを調べると、画像が読み込めないという警告が表示されます。これは、画像が CORS のためにシェイプのソースとして使用できないという事実を警告するはずです。

しきい値の設定
-------

`shape-image-threshold` プロパティを使用すると、完全な透明ではない領域からシェイプを作成することができます。 `shape-image-threshold` の値が `0.0` (初期値) の場合、領域は完全に透明になります。値が `1.0` の場合は完全に不透明です。中間の値は、半透明領域を定義領域として設定できることを意味します。

次の例では、最初の例と同様の画像を使用していますが、この画像では、星の背景が完全に透明ではなく、グラフィックプログラムで 20% の不透明度に作成されています。 `shape-image-threshold` を `0.3` に設定すると図形が表示され、 `0.2` より小さい値に設定すると、図形がなくなります。

生成コンテンツの画像を使用
-------------

上記の例では、画像を `shape-outside` の値として使用し、ページにも追加しました。多くのデモでは、従っているシェイプを見せるためにこれを行っていますが、 `shape-outside` プロパティはページに表示される画像とは関係がないため、画像を使用してシェイプを作成するために、画像を表示する必要はありません。

何かを浮動状態にする必要がありますが、以下の例のように生成コンテンツを使用することもできます。ここでは生成コンテンツを浮動状態にし、大きな星形の画像を使ってコンテンツを整形していますが、ページ上には何も画像を表示していません。

グラデーションを用いたシェイプの作成
------------------

CSS グラデーションは画像として扱われるので、透過や半透過の領域をグラデーションの一部として持つことで、グラデーションを使ってシェイプを作ることができます。

次の例では、直線グラデーションの背景画像によって与えられた生成された浮動状態のコンテンツを使用しています。 `shape-outside` の値と同じ値を使用しています。直線グラデーションは紫色から透明に変化しますので、 `shape-image-threshold` の値を変更すると、どれくらいのピクセルがシェイプを作成するのに必要かを決めることができます。以下の例で値を操作することで、その値に応じてシェイプを横切る対角線がどれだけ移動するかを確認することができます。

背景画像を完全に削除してみることもでき、そうすればグラデーションは純粋にシェイプを作成するために使用され、ページには全く表示されません。

次の例では、楕円形の放射状のグラデーションを使用し、グラデーションの透過部分を再利用してシェイプを作成しています。

これらのライブサンプルで直接実験して、グラデーションを変更するとシェイプのパスがどのように変化するかを確認することができます。
font-family
===========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

* Learn more
* See full compatibility
* Report feedback
**`font-family`** は CSS の記述子で、 `@font-face` ルールで指定されたフォントのフォントファミリーを指定することができます。

構文
--


```css
/\* <string> 値 \*/
font-family: "font family";
font-family: "another font family";

/\* <custom-ident> 値 \*/
font-family: examplefont;
```

### 値

`<family-name>`

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

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@font-face` |
| 初期値 | `n/a (required)` |
| 計算値 | 指定通り |

形式文法
----
```

font-family =   
  <family-name>    
  
<family-name> =   
  <string>         |  
  <custom-ident>+    
  
```

例
-

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


```css
@font-face {
  font-family: examplefont;
  src: url("examplefont.ttf");
}
```

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-family-desc |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `font-display`
* `font-stretch`
* `font-style`
* `font-weight`
* `font-variant`
* `font-feature-settings`
* `font-variation-settings`
* `src`
* `unicode-range`
src
===

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

* Learn more
* See full compatibility
* Report feedback
**`src`** は CSS における `@font-face` ルールの記述子で、フォントデータを含むリソースを指定します。 `@font-face` ルールを有効にするためには必要です。

構文
--


```css
/\* <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># ) ]?`

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

`<font-face-name>`

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

解説
--

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

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

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@font-face` |
| 初期値 | `n/a (required)` |
| 計算値 | 指定通り |

形式文法
----
```

src =   
  <font-src-list>    
  
```

例
-

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


```css
/\* 通常のフォントフェイス \*/
@font-face {
  font-family: examplefont;
  src:
    local(Example Font),
    url("examplefont.woff") format("woff"),
    url("examplefont.otf") format("opentype");
}

/\* 同じフォントファミリーで太字のフォントフェイス \*/
@font-face {
  font-family: examplefont;
  src:
    local(Example Font Bold),
    /\* 完全なフォント名 \*/ local(Example Font-Bold),
    /\* Postscript 名 \*/ url("examplefont.woff") format("woff"),
    url("examplefont.otf") format("opentype");
  font-weight: bold;
}
```

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # src-desc |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `font-display`
* `font-family`
* `font-stretch`
* `font-style`
* `font-weight`
* `font-variant`
* `font-feature-settings`
* `font-variation-settings`
* `unicode-range`
font-style
==========

**`font-style`** は CSS の記述子で、 `@font-face` ルールの中で指定されたフォントのフォントスタイルを指定することができます。

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

構文
--


```css
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` の場合は、第二の値は許可されません。

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@font-face` |
| 初期値 | `normal` |
| 計算値 | 指定通り |

形式文法
----
```

font-style =   
  auto                                      |  
  normal                                    |  
  italic                                    |  
  oblique [ <angle [-90deg,90deg]>{1,2} ]?    
  
```

例
-

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

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


```css
@font-face {
  font-family: garamond;
  src: url("garamond.ttf");
}
```


![スタイルのない Garamond](/ja/docs/Web/CSS/@font-face/font-style/garamondunstyled.jpg)

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

![人工的に傾けた garamond](/ja/docs/Web/CSS/@font-face/font-style/garamondartificialstyle.jpg)

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


```css
@font-face {
  font-family: garamond;
  src: url("garamond-italic.ttf");
  font-style: italic;
}
```


![イタリックの garamond](/ja/docs/Web/CSS/@font-face/font-style/garamonditalic.jpg)

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-prop-desc |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `font-display`
* `font-family`
* `font-stretch`
* `font-weight`
* `font-variant`
* `font-feature-settings`
* `font-variation-settings`
* `src`
* `unicode-range`
font-weight
===========

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

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

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

構文
--


```css
/\* 単一の値 \*/
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 以下の `<number>` 値です。数値が大きいと、数値が小さい物より太さが太い (又は同じ) ことを表します。よく使用される値は、以下の一般的な太さの名前との対応にあるように、共通の太さの名前に対応しています。

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

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

### 一般的な太さの名前との対応

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

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

### 可変フォント

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

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

アクセシビリティの考慮
-----------

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

* MDN "WCAG を理解する ― ガイドライン 1.4 の解説"
* Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0
公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@font-face` |
| 初期値 | `normal` |
| 計算値 | 指定通り |

形式文法
----
```

font-weight =   
  auto                         |  
  <font-weight-absolute>{1,2}    
  
<font-weight-absolute> =   
  normal             |  
  bold               |  
  <number [1,1000]>    
  
```

例
-

### @font-face ルールにおける通常のフォントの太さの設定

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


```css
@font-face {
  font-family: "Open Sans";
  src:
    local("Open Sans") format("woff2"),
    url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  font-weight: 400;
}
```

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-prop-desc |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `font-display`
* `font-family`
* `font-stretch`
* `font-style`
* `font-variant`
* `font-feature-settings`
* `font-variation-settings`
* `src`
* `unicode-range descriptor`
unicode-range
=============

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

構文
--


```css
/\* <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` の範囲の全文字を含む*ことを意味します。

解説
--

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

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@font-face` |
| 初期値 | `U+0-10FFFF` |
| 計算値 | 指定通り |

形式文法
----
```

unicode-range =   
  <urange>#    
  
```

例
-

### 1 文字だけ異なるフォントを使用

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

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

#### HTML


```html
<div>Me & You = Us</div>
```


#### CSS


```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;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # unicode-range-desc |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `font-display`
* `font-family`
* `font-stretch`
* `font-style`
* `font-weight`
* `font-variant`
* `font-feature-settings`
* `font-variation-settings`
* `src`
font-stretch
============

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

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

構文
--


```css
/\* 単一の値 \*/
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% の `<percentage>` 値で示します。このプロパティに負の値は許可されていません。

`font-stretch` の旧バージョンでは、プロパティは 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" バリエーションを使用して、さまざまな字幅を実装します。

アクセシビリティの考慮
-----------

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

* MDN 「知覚可能」、ガイドライン 1.4 の説明
* Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0 (英語)
公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@font-face` |
| 初期値 | `normal` |
| 計算値 | 指定通り |

形式文法
----
```

font-stretch =   
  auto                   |  
  <'font-stretch'>{1,2}    
  
```

例
-

### font-stretch のパーセント値の範囲を指定

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


```css
@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%;
}
```

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-prop-desc |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `font-display`
* `font-family`
* `font-weight`
* `font-style`
* `font-variant`
* `font-feature-settings`
* `font-variation-settings`
* `src`
* `unicode-range descriptor`
line-gap-override
=================

**`line-gap-override`** は CSS の記述子で、そのフォントの line-gap の寸法を定義します。 line-gap の寸法は、フォントが推奨する line-gap または external leading です。

構文
--


```css
line-gap-override: normal;
line-gap-override: 90%;
```

### 値

`normal`

既定値です。使用すると、寸法をフォントファイルから取得します。

`<percentage>`

`<percentage>` の値です。

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@font-face` |
| 初期値 | `normal` |
| パーセント値 | 指定通り |
| 計算値 | 指定通り |

形式文法
----
```

line-gap-override =   
  [ normal | <percentage [0,∞]> ]{1,2}    
  
```

例
-

### 代替フォントの寸法を上書き

`line-gap-override` プロパティは、代替フォントの寸法を第一のウェブフォントのものにより一致するように寸法を上書きするのに役立ちます。


```css
@font-face {
  font-family: web-font;
  src: url("https://example.com/font.woff");
}

@font-face {
  font-family: local-font;
  src: local(Local Font);
  line-gap-override: 125%;
}
```

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-metrics-override-desc |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `descent-override`
* `font-display`
* `font-family`
* `font-weight`
* `font-style`
* `font-stretch`
* `font-variant`
* `font-feature-settings`
* `font-variation-settings`
* `line-gap-override`
* `src`
* `size-adjust`
* `unicode-range descriptor`
descent-override
================

**`descent-override`** は CSS の記述子で、フォントのディセンダーの寸法を定義します。ディセンダーの寸法は CSS がインライン整形コンテキストで行ボックスをレイアウトするために使用するベースラインの下の高さです。

構文
--


```css
descent-override: normal;
descent-override: 90%;
```

### 値

`normal`

既定値です。使用すると、寸法をフォントファイルから取得します。

`<percentage>`

`<percentage>` の値です。

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@font-face` |
| 初期値 | `normal` |
| パーセント値 | 指定通り |
| 計算値 | 指定通り |

形式文法
----
```

descent-override =   
  [ normal | <percentage [0,∞]> ]{1,2}    
  
```

例
-

代替フォントの寸法を上書き
-------------

`descent-override` プロパティは、代替フォントの寸法を第一のウェブフォントのものにより一致するように寸法を上書きするのに役立ちます。


```css
@font-face {
  font-family: web-font;
  src: url("https://example.com/font.woff");
}

@font-face {
  font-family: local-font;
  src: local(Local Font);
  descent-override: 125%;
}
```

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-metrics-override-desc |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `ascent-override`
* `font-display`
* `font-family`
* `font-weight`
* `font-style`
* `font-stretch`
* `font-variant`
* `font-feature-settings`
* `font-variation-settings`
* `line-gap-override`
* `src`
* `size-adjust`
* `unicode-range descriptor`
size-adjust
===========

**`size-adjust`** は CSS の記述子で、記述子は、このフォントに関連する字体のアウトラインとメトリックの乗数を定義します。これにより、同じフォントサイズでレンダリングしたときに、様々なフォントのデザインを調和させることが容易になります。

`size-adjust` 記述子は `font-size-adjust` プロパティと似たような振る舞いをします。これは、 ex の高さを一致させることによって、フォントごとに調整を計算します。

構文
--


```css
size-adjust: 90%;
```

### 値

`<percentage>`

`<percentage>` 値で、初期値は 100% です。

このフォントに関連するすべての寸法は、指定されたパーセント値で拡大縮小されます。これには、字形の前進、ベースライン表、および `@font-face` 記述子によって提供されるオーバーライドが含まれます。

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@font-face` |
| 初期値 | `100%` |
| パーセント値 | 指定通り |
| 計算値 | 指定通り |

形式文法
----
```

size-adjust =   
  <percentage [0,∞]>    
  
```

例
-

代替フォントの寸法を上書き
-------------

`size-adjust` プロパティは、代替フォントの寸法を第一のウェブフォントのものにより一致するように寸法を上書きするのに役立ちます。


```css
@font-face {
  font-family: web-font;
  src: url("https://example.com/font.woff");
}

@font-face {
  font-family: local-font;
  src: local(Local Font);
  size-adjust: 90%;
}
```

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 5 # size-adjust-desc |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `font-display` 記述子
* `font-family` 記述子
* `font-weight` 記述子
* `font-style` 記述子
* `font-stretch` 記述子
* `font-variant` 記述子
* `font-feature-settings`
* `font-variation-settings` 記述子
* `src` 記述子
* `unicode-range` 記述子
* `font-size-adjust` property
font-variation-settings
=======================

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

構文
--


```css
/\* 既定の設定を使用 \*/
font-variation-settings: normal;

/\* OpenType 軸名の値を設定 \*/
font-variation-settings: "xhgt" 0.7;
```

### 値

`normal`

テキストは既定の設定を使用してレイアウトされます。

`<string> <number>`

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

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@font-face` |
| 初期値 | `normal` |
| 計算値 | 指定通り |

形式文法
----
```

font-variation-settings =   
  normal                  |  
  [ <string> <number> ]#    
  
```

例
-

### @font-face ルール内でフォントの太さと幅を設定


```css
@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;
}
```

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-rend-desc |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `font-display`
* `font-family`
* `font-stretch`
* `font-style`
* `font-weight`
* `font-variant`
* `font-feature-settings`
* `src`
* `unicode-range`
ascent-override
===============

**`ascent-override`** は CSS の記述子で、フォントのアセンダーの寸法を定義します。アセンダーの寸法は CSS がインライン整形コンテキストで行ボックスをレイアウトするために使用するベースラインの上の高さです。

構文
--


```css
ascent-override: normal;
ascent-override: 90%;
```

### 値

`normal`

既定値です。使用すると、寸法をフォントファイルから取得します。

`<percentage>`

`<percentage>` の値です。

公式定義
----

|  |  |
| --- | --- |
| 関連するアット規則 | `@font-face` |
| 初期値 | `normal` |
| パーセント値 | 指定通り |
| 計算値 | 指定通り |

形式文法
----
```

ascent-override =   
  [ normal | <percentage [0,∞]> ]{1,2}    
  
```

例
-

代替フォントの寸法を上書き
-------------

`ascent-override` プロパティは、代替フォントの寸法を第一のウェブフォントのものにより一致するように寸法を上書きするのに役立ちます。


```css
@font-face {
  font-family: web-font;
  src: url("https://example.com/font.woff");
}

@font-face {
  font-family: local-font;
  src: local(Local Font);
  ascent-override: 125%;
}
```

仕様書
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-metrics-override-desc |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `descent-override`
* `font-display`
* `font-family`
* `font-weight`
* `font-style`
* `font-stretch`
* `font-variant`
* `font-feature-settings`
* `font-variation-settings`
* `line-gap-override`
* `src`
* `size-adjust`
* `unicode-range descriptor`