CSS シェイプの概要 - CSS: カスケーディングスタイルシート

CSS シェイプの概要
===========

CSS シェイプレベル 1 仕様書は、 CSS における幾何学的な図形 (シェイプ) を記述しています。仕様書のレベル 1 は、浮動状態のアイテムに適用するように設計されています。この記事では、シェイプを使用して何ができるのかの概要を紹介します。

例えば、アイテムを左に浮動した状態にすると、テキストがアイテムの右と下に矩形に回り込みます。そこで円形のシェイプを適用すると、テキストは円形の線に沿って回り込みます。

これらのシェイプを作成する方法はいくつもあり、これらのガイドで CSS シェイプの動作や、利用しやすい方法を考えます。

仕様書は何を定義しているのか
--------------

仕様書では、 3 つの新しいプロパティを定義しています。

* `shape-outside` — 基本的なシェイプを定義することができます
* `shape-image-threshold` — 透過度のしきい値を設定します。画像がシェイプの定義に使用される場合、画像の中で透過度がしきい値以上の部分のみが、シェイプとして定義されます。他の部分は無視されます。
* `shape-margin` — 定義されたシェイプの周囲のマージンを設定します。
基本シェイプの定義
---------

`shape-outside` プロパティでシェイプを定義することができます。これは様々な値を取り、 `<basic-shape>` データ型で定義され、すべてが異なるシェイプを定義します。とても簡単なケースから見てみましょう。

次の例では、左に浮動状態にした画像があります。それから `shape-outside` プロパティを `circle(50%)` の値で適用しています。その結果として、内容物は画像のボックスで形成された矩形ではなく、丸い形状の周りのカーブになります。

仕様書のこのレベルでは、 `<basic-shape>` を適用するためには要素が浮動状態でなければなりません。これは多くの場合、単純な方法で代替されるという副作用があります。シェイプに対応したブラウザーがない場合、ユーザーは以前のように矩形のボックスの縁を内容物が回り込むように見えるでしょう。シェイプの対応がある場合は、見栄えが改善されます。

### 基本的なシェイプ

`circle(50%)` の値は基本的なシェイプの例の一つです。仕様書では次のように、 4 つの `<basic-shape>` 値を定義しています。

* `inset()`
* `circle()`
* `ellipse()`
* `polygon()`

`inset()` の値を使用すると、テキストが矩形のシェイプに回り込みますが、オフセット値を追加すると、周囲の内容物の行ボックスを通常よりもオブジェクトに引き寄せて配置することができます。

すでに `circle()` が円形のシェイプを作成するのを見てきました。 `ellipse()` は基本的なつぶれた円です。これらの単純なシェイプで対応できない場合は、 `polygon()` を作成して好きなだけ複雑なシェイプにすることができます。

この章の基本シェイプのガイドで、利用できるそれぞれの基本シェイプとその作成方法を紹介します。

### ボックス値からのシェイプの作成

シェイプはボックス値の周りに作成することができます。従って、次のボックスの上にシェイプを作成することができます。

* `border-box`
* `padding-box`
* `content-box`
* `margin-box`

次の例では、 `border-box` の値を他の取りうる値に変更して、シェイプがボックスに近づいたり離れたりする様子を確認することができます。

ボックス値についてより詳しく知るには、ボックス値からのシェイプの作成を参照してください。

### 画像からのシェイプの作成

パスを作成するための面白い方法として、アルファチャネルを持つ画像を使用する方法があります。 — 文字列は画像の不透過な部分に回り込みます。これで画像の周りの内容物の回り込みの重ね合わせができたり、画像をページ上に表示させずに、純粋に注意深くポリゴンに変換することなく複雑なシェイプを作成する手段として利用したりすることができます。

なお、この方法で使用される画像は CORS 互換性である必要があり、そうでなければ `shape-outside` は値として `none` が指定されたかのように動作し、シェイプを得ることはできません。

次の例では、完全に透過した領域がある画像を用い、この画像を `shape-outside` の URL 値として使用しています。シェイプは透過しない領域 — つまり、気球の画像の周りに作られます。

#### `shape-image-threshold`

`shape-image-threshold` プロパティは、シェイプに使われる画像の領域を定義する画像の透過性のしきい値を設定するために使用します。 `shape-image-threshold` が `0.0` (初期値) である場合、領域は完全に透過になります。値が `1.0` である場合は完全に不透過になります。この間の値ならば、半透過の領域をシェイプを定義する領域として設定することができます。

シェイプを定義する画像としてグラデーションを使用すると、しきい値が良く見えます。次の例では、しきい値を変更すると、選択した透明度のレベルに基づいてシェイプが変化するパスが変化します。

画像からのシェイプの作成については、このガイドの画像からのシェイプでより深く見てみます。

`shape-margin` プロパティ
--------------------

`shape-margin` プロパティは `shape-outside` にマージンを追加します。これにより、シェイプを囲む内容物の行ボックスがシェイプから引き離されるため、短くなります。

次の例では、基本的なシェイプに `shape-margin` を追加しました。マージンを変更して、初期値で設定されるシェイプの輪郭からテキストを引き離してみてください。

作成された内容物の浮動状態のアイテムとしての使用
------------------------

上記の例では、シェイプを定義するために画像や見える要素、つまりページ上にシェイプを見ることができる形でシェイプを定義してきました。しかし、単に矩形ではない見えない線に沿ってテキストを流したい場合があるでしょう。これをシェイプを使って行うことができますが、この場合も浮動状態のアイテムが必要で、これを非表示にすることができます。これは文書に空の `<div>` または `<span>` のような冗長な要素を挿入することで実現できますが、おすすめは生成された内容物を使うことです。つまり、 CSS のスタイルを使用して実現することができます。

次の例では、高さと幅が 150px の要素を挿入するために生成されたを利用します。それから基本シェイプやボックス値、画像のアルファチャネルを使用して、文字列を折り返すシェイプを作成します。

`clip-path` との関係
----------------

シェイプを作成するために使われる基本シェイプとボックス値は、 `clip-path` の値として使われているものと同じです。従って、画像を使ってシェイプを作成したい場合や、画像の一部を切り抜きたい場合は、同じ値を使用してください。

以下の画像は青い背景の四角い画像です。 `shape-outside: ellipse(40% 50%);` および `clip-path: ellipse(40% 50%);` を使用して、シェイプを定義するのに使われるのと同じ領域で切り取りを行うよう定義しました。

シェイプのための開発者ツール
--------------

ブラウザーが CSS シェイプに対応するのと同時に、 Firefox は開発ツール内でシェイプパスエディターを公開しています。このツールはつまり、ページ内にあるシェイプを検査し、値の変更も行います。ポリゴンが正しくない場合は、シェイプエディターを使用して調整してから、新しい値をコピーして CSS に書き戻すことができます。

シェイプパスエディターは、 Firefox 60 で `clip-path` から生成されるシェイプと共に既定で有効になる予定です。 `shape-outside` で生成されるシェイプを使用することもできますが、 `layout.css.shape-outside.enabled` の設定を有効にした場合のみです。

将来の CSS シェイプ機能
--------------

当初のシェイプ仕様書には、要素内にシェイプを作成するための `shape-inside` プロパティが含まれていました。このプロパティは、浮動状態ではないシェイプを作成することができる機能と共に、仕様書のレベル 2 に移動されました。当初は `shape-inside` が仕様書のレベル 1 に含まれていたため、ウェブ上のチュートリアルには両方のプロパティの詳細が書かれているかもしれません。


基本シェイプ - CSS: カスケーディングスタイルシート

基本シェイプ
======

CSS のシェイプは `<basic-shape>` 型を使用して定義することができ、このガイドでは、この方で受け入れられる様々な値のそれぞれが、どのように動作するかを説明します。単純な円から複雑な多角形までがあります。

シェイプについて見る前に、これらのシェイプを実現するために一緒に使われる二つの情報を理解しておくことに価値があります。

* `<basic-shape>` 型
* 参照ボックス
<basic-shape> 型
---------------

`<basic-shape>` 型は、すべての基本シェイプを値として使用します。この方は関数表記を使用します。シェイプ型の後に括弧が続き、中にシェイプを説明する追加の値があります。

受け付ける引数は、作成しようとしているシェイプによって様々です。これらは以下の例で説明します。

参照ボックス
------

CSS シェイプで使用される参照ボックスを理解することは、これがそれぞれのシェイプの座標システムを定義するので、基本シェイプを使用するときには重要です。参照ボックスは既にボックス値からシェイプを作成するガイドで、直接参照ボックスを使用してシェイプを作成するのを見たことがありますね。

Firefox のシェイプインスペクターでは、図形を検査するときに使用中の参照ボックスが表示されるようになっています。下のスクリーンショットでは、 `shape-outside: circle(50%)` を使って円を作りました。浮動要素には 20 ピクセルのパディング、境界、マージンが適用され、シェイプインスペクターはこれらの参照ボックスをハイライト表示します。基本図形を使用する場合、既定で使用される参照ボックスは margin-box です。このスクリーンショットでは、ボックスモデルのその部分を参照して形状が定義されていることがわかります。

![](/ja/docs/Web/CSS/CSS_shapes/Basic_shapes/shapes-reference-box.png)

基本図形を定義した後に、様々なボックス値を追加することができます。したがって、既定の動作は、定義した通りになります。

```css
.shape {
  shape-outside: circle(50%) margin-box;
}
```

したがって、ボックスモデルのさまざまな部分を使用するように、たとえば、境界を使用するように変更することができます。

```css
.shape {
  shape-outside: circle(50%) border-box;
}
```

注目すべきは、 `margin-box` がシェイプを切り取ることです。したがって、マージンボックスからはみ出した他のシェイプを参照して作成されたシェイプは、マージンボックスで切り取られることになります。このことは、以下の基本的な図形の例で見ることができます。

CSS シェイプに適用される参照ボックスの優れた説明については、 Understanding Reference Boxes for CSS Shapes を参照してください。

inset()
-------

`inset()` 型は矩形を定義します。アイテムを浮動にすると、その周囲に矩形ができるので、あまり有用ではないように見えるかもしれません。しかし、 `inset()` 型はオフセットの定義が可能なので、コンテンツをシェイプの上に引き込むことができます。

したがって、 `inset()` は top, right, bottom, left の 4 つの値に加えて、最後に `border-radius` の値を取ります。以下の CSS は、浮動している要素の参照ボックスから、上下 20 ピクセル、左右 1 0ピクセルの長方形を挿入し、 border-radius の値を 10 ピクセルとします。

```css
.shape {
  float: left;
  shape-outside: inset(20px 10px 20px 10px round 10px);
}
```

マージンの一括指定と同じルールで、一度に複数のオフセットを設定することができます。値が 1 つしかない場合は、すべての辺に適用されます。値が 2 つある場合は、最初の値が上下のオフセットに設定され、 2 番目の値が右と左のオフセットに設定されます。値が 3 つある場合は、 top が 1 番目の値、 left と right が 2 番目の値、 bottom が 3 番目の値に設定されます。値が 4 つある場合は、top、right、bottom、left にそれぞれ適用されます。つまり、上記のルールは次のように表現することもできます。

```css
.shape {
  float: left;
  shape-outside: inset(20px 10px round 10px);
}
```

以下の例では、 `inset()` シェイプを使用して、浮動している要素にコンテンツを引き寄せています。オフセットの値を変更して、シェイプがどのように変化するかを見てみましょう。

また、参照ボックスとして使用したいボックス値を追加することもできます。以下の例では、参照ボックスを `margin-box` から `border-box`、`padding-box` または `content-box` に変更すると、オフセットの計算前に開始点として使用する参照ボックスがどのように変化するかを確認することができます。

circle()
--------

`shape-outside` の `circle()` 値は 2 つの引数を取ることができます。最初は `shape-radius` です。

`shape-outside` の `circle()` と `ellipse()` の両方の値は、この `<shape-radius>` という引数を受け付けるように指定されています。この引数は長さまたはパーセント値ですが、キーワード `closest-side` や `farthest-side` のいずれかにすることもできます。

**`closest-side`** のキーワードは、シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。円の場合、これは任意の次元で最も近い辺となります。楕円の場合、これはその半径の方向で最も近い辺となります。

**`farthest-side`** のキーワードは、シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。円の場合、これは任意の次元で最も遠い辺となります。楕円の場合、これはその半径の方向で最も遠い辺となります。

第 2 引数には `position` を指定します。省略した場合は `center` に設定されます。しかし、ここでは、円の中心の位置を示すために、任意の有効な位置を使用することができます。

この円は半径の値を 1 つ受け取ります。半径は長さ、パーセント値、または closest-side、farthest-side のキーワードで、オプションでキーワード **at** とその後に位置の値を指定することができます。

以下の例では、幅 100 ピクセル、余白20ピクセルのアイテムに円を作成しました。これにより、参照ボックスの幅は合計で 140 ピクセルになります。シェイプの半径の値を 50% に設定し、半径を 70 ピクセルに設定しました。そして、位置の値を 30% に設定した。

ライブサンプルでは、半径の大きさを変えたり、ポジションの値で円を動かしたり、 `inset()` で行ったように参照ボックスを設定することで、円の大きさを拡大縮小して遊ぶことができます。

追加の例として、 position に `top left` というキーワードを使用すると、ページの左上隅に 1/4 の扇形を作ることができます。以下の例では、生成コンテンツを使って、テキストが流れるような 1/4 の扇形を作成しています。

### 図形はマージンボックスで切り取られる

参照ボックスの説明の際に、 margin-box ではシェイプが切り取られることを説明しました。これは、位置を 60% に設定して、円の中心をコンテンツの方に移動させることで確認できます。円の中心はコンテンツに近くなり、円は margin-box を越えて広がっています。これは、広がった部分が切り取られ、四角くなることを意味します。

```css
img {
  float: left;
  shape-outside: circle(50% at 60%);
}
```

![円形はマージンボックスで切り取られる](/ja/docs/Web/CSS/CSS_shapes/Basic_shapes/shapes-circle-clipped.png)

ellipse()
---------

楕円は基本的に円をつぶしたものなので、 `ellipse()` は `circle()` ととてもよく似た動作をしますが、 x と y の 2 つの半径をこの順番で指定しなければならない点が異なります。

そして、これらの半径の後に `circle()` と同様に位置を指定して、楕円の中心を移動させることができます。以下の例では、 x の半径が 40%、 y の半径が 50%、位置が left の楕円を作成しています。これは、楕円の中心がボックスの左端にあることを意味し、テキストを囲むための半分の楕円の形が得られます。これらの値を変更することで、楕円の形がどのように変化するかを確認できます。

キーワード値である `closest-side` と `farthest-side` は、浮動要素の参照ボックスの大きさに基づいて、素早く楕円を作成するのに便利です。

polygon()
---------

最後の基本図形は最も複雑なもので、 `polygon()` を作成することによって多くの辺を持ったシェイプを作成することができます。この図形は、 3 つ以上の値の組を受け付けます（多角形は少なくとも三角形を描かなければなりません）。これらの値は、参照ボックスを基準にして描かれた座標です。

下の例では、`polygon()` を使って、テキストを追うための形状を作成しました。どの値を変更しても、形状がどのように変化するかを見ることができます。

ここで、多角形の形状を作成するのに、 Firefox のシェイプインスペクターがとても便利であることが分かるかもしれません。下のスクリーンショットは、このツールで強調された形状を示しています。

![シェイプインスペクターで強調表示されたポリゴンの基本シェイプ](/ja/docs/Web/CSS/CSS_shapes/Basic_shapes/shapes-polygon.png)

もう一つの有用なリソースは Clippy です。これは `clip-path` 用のシェイプを作成するツールですが、基本シェイプの値は `clip-path` で使われるものと同じだからです。


画像からのシェイプの作成 - CSS: カスケーディングスタイルシート

画像からのシェイプの作成
============

このガイドでは、アルファチャンネルを含む画像ファイル、または 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 - CSS: カスケーディングスタイルシート

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 - CSS: カスケーディングスタイルシート

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 - CSS: カスケーディングスタイルシート

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 - CSS: カスケーディングスタイルシート

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 - CSS: カスケーディングスタイルシート

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 - CSS: カスケーディングスタイルシート

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 - CSS: カスケーディングスタイルシート

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 - CSS: カスケーディングスタイルシート

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 - CSS: カスケーディングスタイルシート

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 - CSS: カスケーディングスタイルシート

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 - CSS: カスケーディングスタイルシート

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`


font-display - CSS: カスケーディングスタイルシート

font-display
============

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

構文
--

```css
/\* キーワード値 \*/
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;
```

### 値

`auto`

フォントの表示戦略はユーザーエージェントが定義します。

`block`

フォントに対して短いブロック時間の後、永続的にスワップ時間を置きます。

`swap`

フォントに対して非常に短いブロック時間の後、永続的にスワップ時間を置きます。

`fallback`

フォントに対して非常に短いブロック時間の後、短いスワップ時間を置きます。

`optional`

フォントに対して非常に短いブロック時間の後、スワップ時間を置きません。

**メモ:** Firefox では、 `gfx.downloadable_fonts.fallback_delay` および `gfx.downloadable_fonts.fallback_delay_short` の設定項目で、それぞれ "short" および "extremely small" の時間が利用できます。

解説
--

### フォント表示の過程

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

フォントブロック時間

フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は*不可視の*代替フォントで描画されます。この時間に読み込みに成功したフォントは、通常通りに利用できます。

フォントスワップ時間

フォントが読み込まれていない場合、そのフォントを利用しようとしている要素は代替フォントで描画されます。この時間に読み込みに成功したフォントは、通常通りに利用できます。

フォント失敗時間

フォントが読み込まれていなければ、ユーザーエージェントは読み込みに失敗したとして扱い、通常のフォントで代替を行います。

公式定義
----

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

形式文法
----
```

font-display =
  auto      |
  block     |
  swap      |
  fallback  |
  optional

```

例
-

### font-display のフォールバックの指定

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

仕様書
---

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

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

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

関連情報
----

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


prefers-reduced-motion - CSS: カスケーディングスタイルシート

prefers-reduced-motion
======================

**`prefers-reduced-motion`** は CSS のメディア特性で、ユーザーが余計な動きを最少化するよう要求したことを検出するために使用します。

**警告:** このページの下部に埋め込まれた例は、拡大縮小の動きがありますが、一部の読者には問題があるかもしれません。前庭運動障害をお持ちの方は、アニメーションを見る前に、お使いの端末のモーション軽減機能を有効にしてください。

構文
--

`no-preference`

システムが把握している設定をユーザーが行っていないことを示します。

`reduce`

前庭運動障害者の不快感の引き金となるモーションベースのアニメーションの種類を削除したり置き換えたりするインターフェイスを希望することをユーザーがシステムに通知したことを示します。

ユーザー設定
------

Firefox では、 `reduce` の要求は以下の場合に尊重されます。

* GTK/GNOME では、 GNOME Tweaks > General タブ (バージョンによっては Appearance タブ) > Animations がオフになっている場合。
    + 他にも、 `gtk-enable-animations = false` を GTK 3 configuration file の `[Settings]` に追加する方法もあります。
* Windows 10: 設定 > 簡単操作 > ディスプレイ > アニメーションを表示する
* Windows 7: コントロールパネル > コンピューターの簡単操作センター > コンピューターでの作業に集中しやすくします > 必要のないアニメーションは無効にします (可能な場合)
* macOS: システム設定 > アクセシビリティ > 表示 > 動きの抑制
* iOS: 設定 > 一般 > アクセシビリティ > 視覚効果を減らす
* Android 9 以上: 設定 > ユーザー補助 > アニメーションの削除
* Firefox では `about:config`: 数値型の設定項目 `ui.prefersReducedMotion` を追加し、値を `1` とします。この設定の変更は直ちに効果が現れます。
例
-

この例では、既定でで拡大縮小アニメーションが使用されています。アクセシビリティ設定で Reduce Motion を有効にしている場合、このアニメーションは前庭運動に影響のないシンプルなディゾルブにトーンダウンされます。

### HTML

```html
<div class="animation">animated box</div>
```

### CSS

```css
.animation {
  animation: pulse 1s linear infinite both;
}

/\* Tone down the animation to avoid vestibular motion triggers like scaling or panning large objects. \*/
@media (prefers-reduced-motion) {
  .animation {
    animation-name: dissolve;
  }
}
```

```
.animation {
  background-color: #306;
  color: #fff;
  font: 1.2em sans-serif;
  width: 10em;
  padding: 1em;
  border-radius: 1em;
  text-align: center;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes dissolve {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 5 # prefers-reduced-motion |

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

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

関連情報
----

* An Introduction to the Reduced Motion Media Query (CSS Tricks)
* Responsive Design for Motion (WebKit Blog) includes vestibular motion trigger examples.


any-pointer - CSS: カスケーディングスタイルシート

any-pointer
===========

**`any-pointer`** は CSS のメディア特性で、ユーザーが (マウスなどの) *何らかの*ポインティングデバイスを持っているか、もしそうならば、どれだけの正確性を持っているかを調べます。

**メモ:** *第一の*ポインティングデバイスの正確性を調べたい場合は、代わりに `pointer` を使用してください。

構文
--

`any-pointer` 特性は、以下の一覧の中から一つのキーワード値で指定します。

`none`

利用できるポインティングデバイスがありません。

`coarse`

正確性が限定されたポインティングデバイスが、少なくとも一つ含まれています。

`fine`

正確性が高いポインティングデバイスが、少なくとも一つ含まれています。

**メモ:** 異なる性質を持つ複数の機器が利用できる場合は、複数の値に一致することがありますが、 `none` はポインティングデバイスがない場合のみ一致します。

例
-

この例は、精度の高いポインターを持つユーザーには小さなチェックボックスを、精度の低いポインターを持つユーザーには大きなチェックボックスを生成します。大きなチェックボックスは小さなチェックボックスよりも後に宣言されているので優先されます。

### HTML

```html
<input id="test" type="checkbox" /> <label for="test">Look at me!</label>
```

### CSS

```css
input[type="checkbox"]:checked {
  background: gray;
}

@media (any-pointer: fine) {
  input[type="checkbox"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border: 1px solid blue;
  }
}

@media (any-pointer: coarse) {
  input[type="checkbox"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    border: 2px solid red;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # any-input |

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

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

関連情報
----

* `pointer` メディア特性


forced-colors - CSS: カスケーディングスタイルシート

forced-colors
=============

**`forced-colors`** は CSS のメディア特性で、ユーザーエージェントが強制カラーモードを有効にしているかどうかを検出するために使用されます。強制カラーモードの例としては、 Windows のハイコントラストモードがあります。

構文
--

`forced-colors` メディア特性は、ブラウザーが現在強制カラーモードになっているかどうかを示します。

### Values

`none`

強制カラーモードは有効ではありません。ページの色が限られたパレットに強制されていません。

`active`

強制カラーモードが有効であることを示します。ブラウザーは、CSS システム色キーワードを通じてカラーパレットを提供し、必要に応じて `prefers-color-scheme` の適切な値をトリガーして、ページを適応できるようにします。ブラウザーは `prefers-color-scheme` の値を `Canvas` のシステム色の明度に基づいて選択します (詳細は color adjust spec を参照してください)。

使用上の注意
------

### 強制カラーモードの影響を受けるプロパティ

強制カラーモードでは、以下のプロパティの値は、作者レベルの値が指定されていないかのように扱われます。つまり、ブラウザーで指定された値が代わりに使用されます。ブラウザー指定の値は、スタイルのカスケードには影響せず、描画時にブラウザーによって強制的に設定されます。

ブラウザーで指定された値は、システム色のセットから選択されます。これにより、強制カラーを有効にしているユーザーに対して、共通の UI 要素の一貫したコントラストが保証されます。

* `color`
* `background-color`
* `text-decoration-color`
* `text-emphasis-color`
* `border-color`
* `outline-color`
* `column-rule-color`
* `-webkit-tap-highlight-color`
* SVG fill 属性
* SVG stroke 属性

また、以下のプロパティは、強制カラーモードでは特別な動作をします。

* `box-shadow` は 'none' に強制されます
* `text-shadow` は 'none' に強制されます
* `background-image` は URL ベースでない値では 'none' に強制されます
* `color-scheme` は 'light dark' に強制されます
* `scrollbar-color` は 'auto' に強制されます

上記のプロパティで強制されるシステム色は、要素のコンテキストに依存します。例えば、 button 要素の `color` プロパティは `ButtonText` に強制されます。通常のテキストでは `CanvasText` に強制されます。様々な UI コンテキストにおいて、それぞれがどのような場合に適切かについての詳細はシステム色の一覧を参照してください。

**メモ:** ユーザーエージェントは、追加された ARIA ロールではなく、本来の要素の意味に基づいてシステム色を選択します。
 例えば、 `role="button"` を `div` に追加しても、要素の色が `ButtonText` に強制されることは**ありません**。

これらの調整に加えて、ブラウザーはテキストの後ろに「バックプレート」を描くことで、テキストの読みやすさを確保します。これは、テキストが画像の上に配置されている場合にコントラストを保つために特に重要です。

ユーザーエージェントが上記のプロパティの値を強制的に変更しないケースが 2 つあります。`forced-color-adjust` 値が `none` の要素に適用されている場合と、作者がシステム色を指定している場合です。

要素で forced-color-adjust が `none` に設定されている場合は、強制カラーの値は適用されず、作者の指定したスタイルが通常どおり適用されます。また、テキストのバックプレートは無効になります。

システム色が指定された場合は、強制的に設定された値の代わりにシステム色が使用されます。

また、強制カラーモードで利用できる制限されたカラーパレットとページの他の部分が統合されるように、上記以外のプロパティでシステム色を使用することもできます。

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

一般的に、ウェブ制作者は `forced-colors` メディア特性を使用して、この機能が有効になっているユーザー向けに個別のデザインを作成することは**すべきではありません**。この機能は、既定の強制カラーの適用ではページの一部がうまく機能しない場合に、使いやすさや読みやすさを向上させるための細かい調整を行うことを目的としています。

強制カラーモードの縮小されたパレットとテキストバックプレートによる高いコントラストは、一部のユーザーがウェブサイトを読んだり利用したりするのに不可欠な場合が多いため、コンテンツに影響を与える調整は慎重に行い、他の方法では読み取れないコンテンツを対象とする必要があります。

### ユーザー設定

このメディア特性は、ユーザーがオペレーティングシステムで配色設定を有効にしている場合にのみ有効です。このような機能の例として、 Windows のハイコントラストモードがあります。

例
-

**メモ:** 以下の例は、このメディア特性に対応したブラウザーを使用し、 OS のハイコントラストモードなどの環境設定を有効にしている場合にのみ動作します。

この例は、通常 `box-shadow` によってコントラストを得るボタンです。強制カラーモードでは、 box-shadow は強制的に none になります。そのため、この例では強制カラーメディア機能を使用して、適切な色（この場合は ButtonText）の境界線を確保しています。

### HTML

```html
<button class="button">Press me!</button>
```

### CSS

```css
.button {
  border: 0;
  padding: 10px;
  box-shadow:
    -2px -2px 5px gray,
    2px 2px 5px gray;
}

@media (forced-colors: active) {
  .button {
    /\* 強制カラーモードでは box-shadow が 'none' に強制されるため、代わりに border を使用します。 \*/
    border: 2px ButtonText solid;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 5 # forced-colors |

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

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

関連情報
----

* @media
* Styling for Windows high contrast with standards for forced colors.
* `forced-color-adjust`


aspect-ratio - CSS: カスケーディングスタイルシート

aspect-ratio
============

**`aspect-ratio`** は CSS のメディア特性で、ビューポートのアスペクト比を調べるために使用します。

構文
--

`aspect-ratio` 特性は、ビューポートの幅対高さのアスペクト比を表現する `<ratio>` 値で指定します。これは範囲の特性であり、接頭辞の付いた **`min-aspect-ratio`** および **`max-aspect-ratio`** の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。

例
-

以下の例は独自のビューポートを生成する `<iframe>` に含まれています。 `<iframe>` の大きさを変更して `aspect-ratio` の変化を確認してください。

なお、メディアクエリーの条件がどれも true でない場合、背景は白になります。これは、以下のルールが `<iframe>` 内の `<div>` に適用されないためです。どの幅と高さの値がこれを起こすのか、見つけてみてください。

### HTML

```html
<div id="inner">
  ビューポートの幅と高さを変更しながら、この要素を見ていてください。
</div>
```

### CSS

```css
/\* 最小アスペクト比 \*/
@media (min-aspect-ratio: 8/5) {
  div {
    background: #9af; /\* blue \*/
  }
}

/\* 最大アスペクト比 \*/
@media (max-aspect-ratio: 3/2) {
  div {
    background: #9ff; /\* cyan \*/
  }
}

/\* 正確なアスペクト比。上書きを防ぐために最下部に配置 \*/
@media (aspect-ratio: 1/1) {
  div {
    background: #f9a; /\* red \*/
  }
}
```

### 結果
```

<label id="wf" for="w">width:165</label>
<input id="w" name="w" type="range" min="100" max="250" step="5" value="165" />
<label id="hf" for="w">height:165</label>
<input id="h" name="h" type="range" min="100" max="250" step="5" value="165" />

<iframe
 id="outer"
 src="data:text/html,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-ratio: 1/1) { div { background: %23f9a; } }</style><div id='inner'> Watch this element as you resize your viewport's width and height.</div>">
</iframe>
```

```
iframe {
  display: block;
}
```

```
outer.style.width = outer.style.height = "165px";

w.onchange = w.oninput = function () {
  outer.style.width = w.value + "px";
  wf.textContent = "width:" + w.value;
};
h.onchange = h.oninput = function () {
  outer.style.height = h.value + "px";
  hf.textContent = "height:" + h.value;
};
```

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # aspect-ratio |

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

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

関連情報
----

* メディアクエリーの使用
* @media


monochrome - CSS: カスケーディングスタイルシート

monochrome
==========

**`light-level`** は CSS のメディア特性で、出力機器のモノクロフレームバッファのピクセルあたりのビット数を調べるために使用することができます。

構文
--

`monochrome` 特性は `<integer>` 値で指定し、モノクロフレームバッファのピクセルあたりのビット数を表します。機器がモノクロ機器でなければ、ゼロを返します。これは範囲の特性であり、つまり接頭辞の付いた **`min-monochrome`** および **`max-monochrome`** の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。

例
-

### HTML

```html
<p class="mono">この機器はモノクロピクセルに対応しています。</p>
<p class="no-mono">この機器はモノクロピクセルに対応していません。</p>
```

### CSS

```css
p {
  display: none;
}

/\* 任意のモノクロ機器 \*/
@media (monochrome) {
  p.mono {
    display: block;
    color: #333;
  }
}

/\* 任意のモノクロでない機器 \*/
@media (monochrome: 0) {
  p.no-mono {
    display: block;
    color: #ee3636;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # monochrome |

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

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


prefers-reduced-data - CSS: カスケーディングスタイルシート

prefers-reduced-data
====================

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**メモ:** この特性は、どのユーザーエージェントも対応しておらず、その仕様が変更される可能性があります。

**`prefers-reduced-data`** は CSS のメディア特性で、ユーザーがウェブコンテンツのインターネット通信を削減するようリクエストしていることを検出するために使用します。

構文
--

`no-preference`

ユーザーがシステムに対して何の設定もしていないことを示します。このキーワードの値は、論理値のコンテキストでは false として評価されます。

`reduce`

ユーザーが軽量な代替コンテンツを希望していることを示します。

ユーザー設定
------

現在、この特性を実装しているユーザエージェントはありませんが、さまざまなオペレーティングシステムがこのような設定に対応しており、このメディアクエリーが実装された場合、ユーザーエージェントはオペレーティングシステムが提供する設定に依存する可能性が高いでしょう。

例
-

**メモ:** 現在、この特性を実装しているブラウザーはありませんので、以下の例は動作しません。

この例では、 `montserrat-regular.woff2` フォントファイルは先読みもダウンロードもされません。もしユーザーがデータを削減従っているのであれば、この場合「システムフォントスタック」が予備フォントとして機能することになります。

### HTML

```html
<head>
  <link
 rel="preload"
 href="fonts/montserrat-regular.woff2"
 as="font"
 media="(prefers-reduced-data: no-preference)"
 crossorigin />
  <link rel="stylesheet" href="style.css" />
</head>
```

### CSS

```css
@media (prefers-reduced-data: no-preference) {
  @font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    /\* latin \*/
    src:
      local("Montserrat Regular"),
      local("Montserrat-Regular"),
      url("fonts/montserrat-regular.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
      U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
      U+2212, U+2215, U+FEFF, U+FFFD;
  }
}

body {
  font-family:
    Montserrat,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    "Microsoft YaHei",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 5 # prefers-reduced-data |

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

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

関連情報
----

* HTTP の `Save-Data` (en-US) ヘッダー


-webkit-transform-2d - CSS: カスケーディングスタイルシート

-webkit-transform-2d
====================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`-webkit-transform-2d`** は CSS の論理メディア特性 で Chrome 拡張であり、ベンダー接頭辞付きの CSS の二次元 `transform` に対応していれば値が `true` になります。

Apple には Safari CSS リファレンスに説明があります。

構文
--

`-webkit-transform-2d` は CSS の論理メディア特性 で Chrome 拡張であり、 `-webkit` 接頭辞付きの CSS の二次元 `transform` に対応していれば値が `true` になります。

### 値

`true`

ブラウザーは二次元の CSS 座標変換に `-webkit` の接頭辞つきで対応しています。

`false`

二次元の CSS 座標変換で `-webkit` の接頭辞が付いたものはブラウザーが対応していません。

例
-

### 基本的な例

```css
@media (-webkit-transform-2d) {
  div {
    -webkit-transform: translate(100px, 100px);
  }
}
```

このメディア機能は WebKit でのみ対応しています。可能であれば、代わりに `@supports` 機能クエリを使用してください。

```css
@supports (-webkit-transform: translate(100px, 100px)) {
  div {
    -webkit-transform: translate(100px, 100px);
  }
}
```

仕様書
---

どの標準でも定義されていません。

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

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

関連情報
----

* `-webkit-transform-3d`
* `-webkit-transition`
* `-webkit-animation`
* Test page at quirksmode.org


prefers-contrast - CSS: カスケーディングスタイルシート

prefers-contrast
================

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`prefers-contrast`** は CSS のメディア特性で、ユーザーがウェブコンテンツをより高い (またはより低い) コントラストで表示するように要求したかどうかを検出するために使用します。

構文
--

`no-preference`

ユーザーが設定をシステムに通知していないことを示します。このキーワード値は、boolean のコンテキストでは false と評価されます。

`more`

ユーザーが、より高いコントラストをもつインターフェイスを好むことをシステムに通知したことを示します。

`less`

ユーザーが、より低いコントラストを持つインタフェース好むことをシステムに通知したことを示します。

ユーザー設定
------

様々なオペレーティングシステムがこのような設定をサポートしており、ユーザエージェントはオペレーティングシステムによって提供される設定に依存することになるでしょう。

例
-

この例では、既定でいまいましい低いコントラストが与えられています。

### HTML

```html
<div class="contrast">low contrast box</div>
```

### CSS

```css
.contrast {
  width: 100px;
  height: 100px;
  outline: 2px dashed black;
}

@media (prefers-contrast: more) {
  .contrast {
    outline: 2px solid black;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 5 # prefers-contrast |

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

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

関連情報
----

* Microsoft -ms-high-contrast メディア特性
* CSS の forced-colors メディアクエリー


display-mode - CSS: カスケーディングスタイルシート

display-mode
============

CSS の **`display-mode`** メディア特性は、アプリケーションの表示モードに基づいて選択的に CSS を適用するために使います。これは、サイトを URL から起動した場合とデスクトップアイコンから実行した場合の使い勝手に一貫性を持たせるために使用することができます。

この特性は、ウェブアプリマニフェストの `display` メンバーに対応しています。これは、最上位の閲覧コンテキストと子の閲覧コンテキストの両方に適用されます。このクエリーは、ウェブアプリマニフェストの有無にかかわらず適用されます。

構文
--

`display-mode` 特性は、以下の一覧のうち一つのキーワード値で指定します。

| 表示モード | 説明 | 代替表示モード |
| --- | --- | --- |
| `fullscreen` | 利用可能な表示領域がすべて使用され、ユーザーエージェントのクロームは表示されません。 | `standalone` |
| `standalone` | アプリケーションはスタンドアロンアプリケーションのような外観や操作感になります。これは、アプリケーションが個別のウィンドウを持ったり、アプリケーションランチャーに独自のアイコンを持ったりすることを含みます。このモードでは、ユーザーエージェントはナビゲーション制御のための UI 要素を除外しますが、ステータスバーなどその他の UI を含めることができます。 | `minimal-ui` |
| `minimal-ui` | アプリケーションはスタンドアロンアプリケーションのような外観や操作感になりますが、ナビゲーション制御のための最小限の UI 要素を持ちます。要素はブラウザーによって異なります。 | `browser` |
| `browser` | アプリケーションは、ブラウザーとプラットフォームに応じて、従来のブラウザータブまたは新しいウィンドウで開きます。 | (なし) |

例
-

### 端末が全画面モード時に使用される CSS

```css
@media all and (display-mode: fullscreen) {
  body {
    margin: 0;
    border: 5px solid black;
  }
}
```

仕様書
---

| Specification |
| --- |
| Media Queries Level 5 # display-mode |

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

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

関連情報
----

* メディアクエリーの使用
* @media


device-height - CSS: カスケーディングスタイルシート

device-height
=============

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

CSS の **`device-height`** メディア特性は、出力機器の描画面の高さを調べるために使用することができます。

構文
--

`device-height` 特性は、 `<length>` 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた **`min-device-height`** および **`max-device-height`** の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。

例
-

この HTML は、800 ピクセルより低い機器に特別のスタイルシートを適用します。

```html
<link
 rel="stylesheet"
 media="screen and (max-device-height: 799px)"
 href="http://foo.bar.com/short-styles.css" />
```

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # device-height |

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

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

関連情報
----

* メディアクエリーの使用
* @media


pointer - CSS: カスケーディングスタイルシート

pointer
=======

**`pointer`** は CSS のメディア特性で、ユーザーが（マウスなどの）ポインティングデバイスを持っているか、もしそうならば、*主要な*ポインティングデバイスにどれだけの正確性があるかを調べます。

**メモ:** *すべての*ポインティングデバイスの正確性を調べたい場合は、代わりに `[any-pointer](/ja/docs/Web/CSS/@media/any-pointer)` を使用してください。

構文
--

`pointer` 特性は、以下の一覧の中から一つのキーワード値で指定します。

`none`

主要な入力メカニズムに、ポインティングデバイスがありません。

`coarse`

主要な入力メカニズムにポインティングデバイスがありますが、その正確性が限定されています。

`fine`

主要な入力メカニズムにポインティングデバイスがあり、正確性も高いです。

例
-

次の例は、主要なポインティングデバイスの正確性によって、チェックボックスの大きさを変更しています。正確性が高い場合は小さく、低い場合は大きくなります。

### HTML

```html
<input id="test" type="checkbox" /> <label for="test">Look at me!</label>
```

### CSS

```css
input[type="checkbox"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: solid;
  margin: 0;
}

input[type="checkbox"]:checked {
  background: gray;
}

@media (pointer: fine) {
  input[type="checkbox"] {
    width: 15px;
    height: 15px;
    border-width: 1px;
    border-color: blue;
  }
}

@media (pointer: coarse) {
  input[type="checkbox"] {
    width: 30px;
    height: 30px;
    border-width: 2px;
    border-color: red;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # pointer |

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

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

関連情報
----

* `any-pointer` メディア特性


-webkit-transform-3d - CSS: カスケーディングスタイルシート

-webkit-transform-3d
====================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`-webkit-transform-3d`** は CSS の論理メディア特性で Chrome 拡張であり、ベンダー接頭辞付きの CSS 3D `transform` に対応していれば値が `true` になります。

**メモ:** このメディア特性は WebKit および Blink でのみ対応しています。可能であれば、 `@supports` 特性クエリーを代わりに使用してください。

構文
--

`-webkit-transform-3d` は CSS の論理メディア特性で Chrome 拡張であり、ベンダー接頭辞付きの CSS 3D `transform` に対応していれば値が `true` になります。

### Values

`true`

ブラウザーは三次元の CSS 座標変換に `-webkit` の接頭辞つきで対応しています。

`false`

三次元の CSS 座標変換で `-webkit` の接頭辞が付いたものはブラウザーが対応していません。

例
-

### -webkit-transform-3d のメディアクエリーの例

```css
@media (-webkit-transform-3d) {
  .foo {
    transform-style: preserve-3d;
  }
}

@media (-webkit-transform-3d: 1) {
  .foo {
    transform-style: preserve-3d;
  }
}
```

仕様書
---

| Specification |
| --- |
| Compatibility Standard # css-media-queries-webkit-transform-3d |

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

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

関連情報
----

* `-webkit-transform-2d`
* `-webkit-transition`
* `-webkit-animation`
* Test page at quirksmode.org


scripting - CSS: カスケーディングスタイルシート

scripting
=========

**`scripting`** は CSS のメディア特性で、 (JavaScript などの) スクリプトが利用できるかどうかを調べるために使用することができます。

構文
--

`scripting` 特性は、以下の一覧のうち一つのキーワード値で指定します。

`none`

スクリプトは現在の文書で全く利用できません。

`initial-only`

スクリプトはページを読み込んでいる間は利用できますが、その後は利用できません。

`enabled`

現在の文書がスクリプトに対応しており、有効です。

例
-

### HTML

```html
<p class="script-none">スクリプトは利用できません。 :-(</p>
<p class="script-initial-only">
  スクリプトはページを読み込んでいる間だけ有効です。残念。
</p>
<p class="script-enabled">スクリプトは有効です。 :-)</p>
```

### CSS

```css
p {
  color: lightgray;
}

@media (scripting: none) {
  .script-none {
    color: red;
  }
}

@media (scripting: initial-only) {
  .script-initial-only {
    color: red;
  }
}

@media (scripting: enabled) {
  .script-enabled {
    color: red;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 5 # scripting |

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

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

関連情報
----

* メディアクエリーの使用
* @media


-moz-device-pixel-ratio - CSS: カスケーディングスタイルシート

-moz-device-pixel-ratio
=======================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

 **非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`-moz-device-pixel-ratio`** は Gecko 独自の CSS の Gecko のみのメディア特性で、 CSS ピクセルあたりのデバイスピクセル数に基づいてスタイルを適用することができます。

**警告:** この特性を使用しないでください。代わりに `resolution` 特性と `dppx` の単位を使用してください。

**メモ:** このメディア特性は Webkit および IE 11 for Windows Phone 8.1 でも `-webkit-device-pixel-ratio` として実装されています。 min および max 接頭辞は、 Gecko では `min--moz-device-pixel-ratio` および `max--moz-device-pixel-ratio` です。しかし、同じ接頭辞が Webkit では `-webkit-min-device-pixel-ratio` および `-webkit-max-device-pixel-ratio` として実装されています。

構文
--

`<number>`

CSS ピクセルあたりのデバイスピクセル数。

**メディア:** `@media`
**min/max 接頭辞の受付:** はい

例
-

### 基本的な互換コード

`-moz-device-pixel-ratio` は Firefox のバージョン 16 以前や、 `dppx` に未対応の WebKit ベースのブラウザーの `-webkit-device-pixel-ratio` との互換性のために使用されることがあります。

例:

```css
/\* Webkit ベースのブラウザー \*/
@media (-webkit-min-device-pixel-ratio: 2),
  (min--moz-device-pixel-ratio: 2) /\* 古い Firefox ブラウザー (firefox 16 以前) \*/,
  (min-resolution: 2dppx) /\* 標準の方法 \*/,
  (min-resolution: 192dpi); /\* dppx のフォールバック \*/
```

**メモ:** `resolution` および `dppx` に関わる互換性の良い習慣については、 CSSWG の記事を参照してください。

仕様書
---

どの仕様書にも含まれていません。

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

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

関連情報
----

* メディアクエリーの使用
* @media


width - CSS: カスケーディングスタイルシート

width
=====

**`width`** は CSS のメディア特性で、ビューポートの幅 (またはページ付きメディアのページボックスの幅) をテストするために使用することができます。

構文
--

`width` 特性は、ビューポートの幅を表す `<length>` 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた **`min-width`** および **`max-width`** の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。

例
-

### HTML

```html
<div>ビューポートの幅を変更しながらこの要素を見ていてください。</div>
```

### CSS

```css
/\* 正確な幅 \*/
@media (width: 360px) {
  div {
    color: red;
  }
}

/\* 最小幅 \*/
@media (min-width: 35rem) {
  div {
    background: yellow;
  }
}

/\* 最大幅 \*/
@media (max-width: 50rem) {
  div {
    border: 2px solid blue;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # width |

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

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

関連情報
----

* メディアクエリーの使用
* @media


color - CSS: カスケーディングスタイルシート

color
=====

**`color`** は CSS のメディア特性で、出力機器の色成分 (赤, 緑, 青) 当たりのビット数を調べるために使用します。

構文
--

`color` 特性は `<integer>` 値で指定し、出力機器の色成分 (赤, 緑, 青) 当たりのビット数を表します。機器がカラー機器でなければ、ゼロを返します。これは範囲の特性であり、つまり接頭辞の付いた **`min-color`** および **`max-color`** の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。

**メモ:** それぞれの色成分が異なるビット数で表現される場合は、最も小さい値が使用されます。例えば、ディスプレイが青と赤に 5 ビット、緑に 6 ビット使用する場合は、機器は色成分当たり 5 ビットを使用していると見なされます。機器がインデックス色を使用している場合は、色テーブル内の色成分当たりのビット数の最小値が使用されます。

CSS を使用して HTML に色を適用することについて、詳しくは CSS を使用した HTML 要素への色の適用をご覧ください。

例
-

### HTML

```html
<p>
  このテキストは白黒機器では黒で、色数が少ない機器では赤で、色数が多い機器では緑っぽく表示されます。
</p>
```

### CSS

```css
p {
  color: black;
}

/\* すべてのカラー機器 \*/
@media (color) {
  p {
    color: red;
  }
}

/\* 色成分当たり 8 ビット以上の色を持つ機器 \*/
@media (min-color: 8) {
  p {
    color: #24ba13;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # color |

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

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

関連情報
----

* CSS を使った HTML の要素への色の適用
* CSS `color` プロパティ
* CSS `<color>` データ型


update - CSS: カスケーディングスタイルシート

update
======

**`update`** は CSS のメディア特性で、出力端末がどれだけの頻度でコンテンツの表示を更新することができるかを調べるために使用することができます。

構文
--

`update` 特性は、以下の一覧のうち一つのキーワード値で指定します。

`none`

いったん表示されると、レイアウトは更新されることはありません。例: 紙に印刷する文書。

`slow`

通常の CSS の規則によってレイアウトを動的に変更することができますが、出力端末はアニメーションが円滑に見えるほど変更をすばやく表示することができません。例: 電子ブックリーダーや一部の動力の低い端末。

`fast`

レイアウトは通常の CSS の規則によってレイアウトを動的に変更することができ、出力端末はふつう表示速度が制約されることがなく、 CSS アニメーションのような恒常的な更新を使用することができます。例: コンピューターの画面。

例
-

### HTML

```html
<p>このテキストが動いていれば、高速に更新できる端末を使用しています。</p>
```

### CSS

```css
@keyframes jiggle {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(25px);
  }
}

@media (update: fast) {
  p {
    animation: 1s jiggle linear alternate infinite;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # update |

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

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

関連情報
----

* メディアクエリーの使用
* @media


hover - CSS: カスケーディングスタイルシート

hover
=====

CSS の **`hover`** メディア特性は、*第一の*入力機構が要素の上でホバー (停止) することができるかどうかを検査するために使用することができます。

構文
--

`hover` 特性は、以下の一覧のうち一つのキーワード値で指定します。

`none`

第一の入力機構が全くホバーができないか、差支えなくホバーをすることができない (例えば、多くのモバイル機器は便利ではないものの、ロングタップのユーザー操作で擬似的に停止を実現する)、または第一の入力機構がない。

`hover`

第一の入力機構が、要素の上で差支えなくホバーすることができる。

例
-

### HTML

```html
<a href="#">Try hovering over me!</a>
```

### CSS

```css
@media (hover: hover) {
  a:hover {
    background: yellow;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # hover |

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

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

関連情報
----

* メディアクエリーの使用
* @media


-webkit-animation - CSS: カスケーディングスタイルシート

-webkit-animation
=================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`-webkit-transition`** は CSS の論理メディア特性で、 Chrome 拡張であり、ベンダー接頭辞つきの CSS `animation` に対応していれば値が `true` になります。

Apple には Safari CSS リファレンスに説明があります。eference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple\_ref/doc/uid/TP40007601-SW3).

**メモ:** このメディア特性は WebKit のみが対応しています。可能であれば、代わりに `@supports` 機能クエリーを使用してください。

構文
--

`-webkit-animation` メディア特性は論理型で、ベンダー接頭辞つきの CSS アニメーションプロパティに対応していれば `true` になります。

### 値

`true`

ブラウザーが `-webkit` の接頭辞の付いた CSS `animation` に対応しています。

`false`

ブラウザーは接頭辞つきの CSS アニメーションに対応していません。

例
-

### -webkit-animation の例

```css
@media (-webkit-animation) {
  /\* CSS to use if animations are supported \*/
}
```

仕様書
---

どの標準でも定義されていません。

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

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

関連情報
----

* `-webkit-transform-3d`
* `-webkit-transform-2d`
* `-webkit-transition`
* Test page at quirksmode.org


prefers-color-scheme - CSS: カスケーディングスタイルシート

prefers-color-scheme
====================

**`prefers-color-scheme`** は CSS のメディア特性で、ユーザーがシステムに要求したカラーテーマが明色か暗色かを検出するために使用します。

ユーザーはオペレーティングシステムの設定 (ライトまたはダークモードなど) やユーザーエージェントの設定で、この設定を示す場合があります。

構文
--

`light`

ユーザーがシステムに、明色のテーマを持つインターフェイスにしたいと通知したか、アクティブな設定を示さなかったことを示します。

`dark`

ユーザーがシステムに、暗色のテーマを持つインターフェイスにしたいと通知したことを示します。

例
-

以下の要素は初期の色のテーマを持っています。これらの要素は、ユーザーの配色の好みに応じて、さらにテーマを設定することができます。

### HTML

```html
<div class="day">Day (initial)</div>
<div class="day light-scheme">Day (changes in light scheme)</div>
<div class="day dark-scheme">Day (changes in dark scheme)</div>
<br />

<div class="night">Night (initial)</div>
<div class="night light-scheme">Night (changes in light scheme)</div>
<div class="night dark-scheme">Night (changes in dark scheme)</div>
```

### CSS

```css
.day {
  background: #eee;
  color: black;
}
.night {
  background: #333;
  color: white;
}

@media (prefers-color-scheme: dark) {
  .day.dark-scheme {
    background: #333;
    color: white;
  }
  .night.dark-scheme {
    background: black;
    color: #ddd;
  }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme {
    background: white;
    color: #555;
  }
  .night.light-scheme {
    background: #eee;
    color: black;
  }
}

.day,
.night {
  display: inline-block;
  padding: 1em;
  width: 7em;
  height: 2em;
  vertical-align: middle;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 5 # prefers-color-scheme |

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

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

関連情報
----

* Firefox での prefers-color-scheme のシミュレーション (Firefox Page Inspector > Examine and edit CSS)
* Video tutorial: Coding a Dark Mode for your Website
* Redesigning your product and website for dark mode
* 色スキームの変更: Windows、macOS、Android、その他のプラットフォーム


inverted-colors - CSS: カスケーディングスタイルシート

inverted-colors
===============

**`inverted-colors`** は CSS のメディア特性で、ユーザーエージェントまたはその下の OS が色を反転しているかどうかを調べるために使用することができます。

構文
--

`inverted-colors` 特性は以下の一覧のうち一つのキーワード値で指定します。

`none`

色が通常通り表示されます。

`inverted`

表示領域内のすべてのピクセルが反転されています。

例
-

### HTML

```html
<p>
  If you're using inverted colors, this text should be blue on white (the
  inverse of yellow on black). If you're not, it should be red on light gray.
</p>
<p>
  If the text is gray, your browser doesn't support the `inverted-colors` media
  feature.
</p>
```

### CSS

```css
p {
  color: gray;
}

@media (inverted-colors: inverted) {
  p {
    background: black;
    color: yellow;
  }
}

@media (inverted-colors: none) {
  p {
    background: #eee;
    color: red;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 5 # inverted |

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

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

関連情報
----

* メディアクエリーの使用
* @media


aural - CSS: カスケーディングスタイルシート

aural
=====

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

`aural` は CSS のメディア種別で、音声出力の能力を持った機器に使用されます。

**メモ:** このメディア種別は `speech` に置き換えられ、非推奨になりました。

構文
--

CSS の `aural` メディア種別は — `speech` メディア種別に置き換えられて非推奨になりましたが — 音声合成装置を使ってコンテンツを表示する場合にのみ適用される CSS のブロックを指定するために使用されていました。

```css
@media aural {
  /\* ここで音声に関するスタイルを定義 \*/
}
```

既存の CSS を `speech` メディアタイプを使用するように更新するのは、`aural` を `speech` に置き換えるだけの簡単な作業です。

例
-

### 基本的な例

```css
@media aural {
  body {
    voice-family: Paul;
  }
}
```

仕様書
---

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification  |

関連情報
----

* メディアクエリー
* メディアクエリーの使用
* `@media`
* `speech`


grid - CSS: カスケーディングスタイルシート

grid
====

**`grid`** は CSS のメディア特性で、出力機器がグリッドベースの画面を使用しているかどうかを調べるために使用します。

現在のパソコンやスマートフォンの大部分は、ビットマップベースの画面を持っています。グリッドベースの画面とは、例えばテキストのみの端末や、固定フォントのみで表示する基本的な電話などです。

構文
--

`grid` 特性は `<mq-boolean>` (en-US) 値 (`0` または `1`) として指定し、出力機器がグリッドベースであるかどうかを表します。

例
-

### HTML

```html
<p class="unknown">I don't know if you're using a grid device. :-(</p>
<p class="bitmap">You are using a bitmap device.</p>
<p class="grid">You are using a grid device! Neato!</p>
```

### CSS

```css
:not(.unknown) {
  color: lightgray;
}

@media (grid: 0) {
  .unknown {
    color: lightgray;
  }

  .bitmap {
    color: red;
    text-transform: uppercase;
  }
}

@media (grid: 1) {
  .unknown {
    color: lightgray;
  }

  .grid {
    color: black;
    text-transform: uppercase;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # grid |

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

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

関連情報
----

* メディアクエリーの使用
* @media


overflow-block - CSS: カスケーディングスタイルシート

overflow-block
==============

**`overflow-block`** は CSS のメディア特性は、初期包含ブロックをブロック軸方向にあふれたコンテンツを機器がどのように扱うかを調べるために使用します。

構文
--

`overflow-block` 特性は以下の一覧のうち一つのキーワード値で指定します。

`none`

ブロック軸方向にあふれたコンテンツは表示されません。

`scroll`

ブロック軸方向にあふれたコンテンツは、スクロールすることで見ることができます。

`optional-paged`

ブロック軸方向にあふれたコンテンツは、スクロールすることで見ることができますが、ページ区切りを手動で (`break-inside` などによって) 入れることができ、その後のコンテンツを次のページに表示させることができます。

`paged`

コンテンツは不連続のページに分割されます。１ページをブロック方向にあふれるコンテンツは、次のページに表示されます。

例
-

### HTML

```html
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis
  eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in
  faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat,
  tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet
  rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis
  dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend.
  Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt
  sed eget ex.
</p>
```

### CSS

```css
@media (overflow-block: scroll) {
  p {
    color: red;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # mf-overflow-block |

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

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

関連情報
----

* メディアクエリーの使用
* @media


device-width - CSS: カスケーディングスタイルシート

device-width
============

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

CSS の **`device-width`** メディア特性は、出力機器の描画面の幅を調べるために使用することができます。

構文
--

`device-width` 特性は、 `<length>` 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた **`min-device-width`** および **`max-device-width`** の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。

例
-

この HTML は、800 ピクセルより狭い機器に特別のスタイルシートを適用します。

```html
<link
 rel="stylesheet"
 media="screen and (max-device-width: 799px)"
 href="http://foo.bar.com/narrow-styles.css" />
```

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # device-width |

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

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

関連情報
----

* メディアクエリーの使用
* @media


overflow-inline - CSS: カスケーディングスタイルシート

overflow-inline
===============

**`overflow-inline`** は CSS のメディア特性で、初期包含ブロックをインライン軸方向にあふれたコンテンツを端末がどのように扱うかを調べるために使用します。

構文
--

`overflow-inline` 特性は以下の一覧のうち一つのキーワード値で指定します。

`none`

インライン軸方向にあふれたコンテンツは表示されません。

`scroll`

インライン軸方向にあふれたコンテンツは、スクロールすることで見ることができます。

例
-

### HTML

```html
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis
  eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in
  faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat,
  tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet
  rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis
  dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend.
  Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt
  sed eget ex.
</p>
```

### CSS

```css
p {
  white-space: nowrap;
}

@media (overflow-inline: scroll) {
  p {
    color: red;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # mf-overflow-inline |

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

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


orientation - CSS: カスケーディングスタイルシート

orientation
===========

**`orientation`** は CSS のメディア特性で、ビューポート (またはページ付きメディアではページボックス) の向きを調べるために使用することができます。

**メモ:** この特性は*端末*の向きには関係がありません。多くの端末では縦長の向きでソフトキーボードを開くと、ビューポートの幅が高さよりも大きくなり、ブラウザーは portrait ではなく landscape のスタイルを使用することになります。

構文
--

`orientation` 特性は以下の一覧のうち一つのキーワード値で指定します。

### キーワード値

`portrait`

ビューポートは縦長です。つまり、高さが幅よりも大きいか等しい状態です。

`landscape`

ビューポートは横長です。つまり、幅が高さよりも大きい状態です。

例
-

### HTML

```html
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
```

### CSS

```css
body {
  display: flex;
}

div {
  background: yellow;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # orientation |

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

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


-webkit-transition - CSS: カスケーディングスタイルシート

-webkit-transition
==================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

 **非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`-webkit-transition`** は CSS の論理メディア特性で、 Chrome 拡張であり、閲覧コンテキストが CSS トランジションに対応していれば値が `true` になります。 WebKit または Blink 以外を使用したブラウザーでは対応していません。

Apple には Safari CSS リファレンスに説明があります。ここでは `transition` と呼ばれるようになりました。

**メモ:** このメディア特性は使用しないでください。これは仕様化されておらず、広く実装されておらず、すべてのブラウザーから削除されています。代わりに `@supports` 特性クエリーを使用してください。

構文
--

```css
@media (-webkit-transition) {
  /\* トランジションに対応している場合に使用される CSS \*/
}
```

例
-

代わりに @supports を使用してください
------------------------

`-webkit-transition` メディア特性を使用しないでください。代わりに、次のように CSS の `@supports` アットルールを用いてトランジションの対応を検査してください。

```css
@supports (transition: initial) {
  /\* トランジションに対応している場合に使われる CSS \*/
}
```

### 廃止された例

廃止される以前、次のように `-webkit-transition` を使用することができました。

```css
@media (-webkit-transition) {
  /\* トランジションに対応している場合に使われる CSS \*/
}
```

仕様書
---

どの標準でも定義されていません。

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

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

関連情報
----

* メディアクエリーの使用
* CSS トランジションの使用
* `@supports`
* `transition`


shape - CSS: カスケーディングスタイルシート

shape
=====

`shape` は CSS のメディア特性で、端末の形状が矩形であるか丸いディスプレイであるかを区別するために使用することができます。

構文
--

`shape` は識別機能であり、四角い画面を表す `rect` または丸や楕円の画面を表す `round` の二つの文字列のうちの一つで指定します。

`rect`

形状は長方形か正方形、または角丸矩形などの軸であり、伝統的なデザインが適しています。

`round`

形状は丸や、卵型、楕円などの円に似た形状であり、独特の丸いデザインが適しています。

例
-

### 基本的な例

#### HTML

#### HTML

```html
<h1>Hello World!</h1>
```

#### CSS

```css
h1 {
  text-align: left;
}

@media (shape: rect) {
  h1 {
    text-align: left;
  }
}

@media (shape: round) {
  h1 {
    text-align: center;
  }
}
```

### カスタムスタイルシート

この HTML は、丸い画面を持つ端末に特殊なスタイルシートを適用します。

```html
<head>
  <link rel="stylesheet" href="default.css" />
  <link
 media="screen and (shape: rect)"
 rel="stylesheet"
 href="rectangle.css" />
  <link media="screen and (shape: round)" rel="stylesheet" href="round.css" />
</head>
```

仕様書
---

| Specification |
| --- |
| CSS Round Display Level 1 # shape-media-feature |

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

{{Compat}}関連情報
----

* メディアクエリーの使用
* @media


-webkit-device-pixel-ratio - CSS: カスケーディングスタイルシート

-webkit-device-pixel-ratio
==========================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`-webkit-device-pixel-ratio`** は CSS の標準外の論理メディア特性で、標準の`resolution`メディア特性の代替です。

**メモ:** このメディア特性は WebKit の機能です。可能であれば、代わりに `resolution` メディア特性クエリーを使用してください。

構文
--

`-webkit-device-pixel-ratio` 特性は `<number>` 値で指定されます。これは範囲特性であり、つまり接頭辞が付いた **`-webkit-min-device-pixel-ratio`** および **`-webkit-max-device-pixel-ratio`** の変化形を使用して、それぞれ最低値と最高値をクエリーすることもできます。

### 値

`<number>`

CSS の `px` を表すために使われるデバイスピクセルの数です。この値は `<number>` であり、構文的に単位を許可しておらず、暗黙の単位は `dppx` です。

実装
--

```css
/\* "dppx" の単位が含まれています。 \*/
@media (-webkit-min-device-pixel-ratio: 2) { ... }
/\* ... は以下のものと同じです。 \*/
@media (min-resolution: 2dppx) { ... }

/\* 同様に \*/
@media (-webkit-max-device-pixel-ratio: 2) { ... }
/\* ... は以下のものと同じです。 \*/
@media (max-resolution: 2dppx) { ... }
```

例
-

### HTML

```html
<p>This is a test of your device's pixel density.</p>
```

### CSS

```css
/\* 正確な解像度 \*/
@media (-webkit-device-pixel-ratio: 1) {
  p {
    color: red;
  }
}

/\* 最低解像度 \*/
@media (-webkit-min-device-pixel-ratio: 1.1) {
  p {
    font-size: 1.5em;
  }
}

/\* 最高解像度 \*/
@media (-webkit-max-device-pixel-ratio: 3) {
  p {
    background: yellow;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Compatibility Standard # css-media-queries-webkit-device-pixel-ratio |

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

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

関連情報
----

* メディアクエリーの使用
* `<resolution>`
* `-webkit-transform-2d`
* `-webkit-transform-3d`
* `-webkit-transition`
* `-webkit-animation`
* W3C Suggested Method to UnPrefix


device-aspect-ratio - CSS: カスケーディングスタイルシート

device-aspect-ratio
===================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

CSS の **`device-aspect-ratio`** メディア特性は、出力機器の幅対高さのアスペクト比を調べるために使用します。

構文
--

`device-aspect-ratio` 特性は、 `<ratio>` で指定します。これは範囲の特性であり、つまり接頭辞の付いた **`min-device-aspect-ratio`** および **`max-device-aspect-ratio`** の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。

例
-

### min-device-aspect-ratio の使用

```css
article {
  padding: 1rem;
}

@media screen and (min-device-aspect-ratio: 16/9) {
  article {
    padding: 1rem 5vw;
  }
}
```

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # device-aspect-ratio |

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

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


any-hover - CSS: カスケーディングスタイルシート

any-hover
=========

**`any-hover`** は CSS のメディア特性で、要素の上で停止することができる入力メカニズムが*何らか*利用できるかどうかを検査するために使用することができます。

構文
--

`any-hover` 特性は、以下の一覧のうち一つのキーワード値で指定します。

`none`

差支えなく停止することができる入力メカニズムがないか、またはポインティング入力メカニズムがない。

`hover`

一つ以上の入力メカニズムが、要素の上で差支えなく停止することができる。

例
-

### 入力手段が停止をすることができるかどうかを検査

#### HTML

```html
<a href="#">Try hovering over me!</a>
```

#### CSS

```css
@media (any-hover: hover) {
  a:hover {
    background: yellow;
  }
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # any-input |

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

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

関連情報
----

* `hover` メディア特性


height - CSS: カスケーディングスタイルシート

height
======

**`height`** は CSS のメディア特性で、ビューポートの高さ (またはページ付きメディアのページボックスの高さ) に基づいてスタイルを適用するために使用することができます。

構文
--

`height` 特性は、ビューポートの高さを表す `<length>` 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた **`min-height`** および **`max-height`** の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。

例
-

### HTML

```html
<div>ビューポートの高さを変更しながら、この要素を見ていてください。</div>
```

### CSS

```css
/\* 正確な高さ \*/
@media (height: 360px) {
  div {
    color: red;
  }
}

/\* 最小高 \*/
@media (min-height: 25rem) {
  div {
    background: yellow;
  }
}

/\* 最大高 \*/
@media (max-height: 40rem) {
  div {
    border: 2px solid blue;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # height |

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

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

関連情報
----

* メディアクエリーの使用
* @media


resolution - CSS: カスケーディングスタイルシート

resolution
==========

**`resolution`** は CSS のメディア特性で、出力端末のピクセル解像度をテストするために使用することができます。

構文
--

`resolution` 特性は、出力端末のピクセル解像度を表す `<resolution>` 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた **`min-resolution`** および **`max-resolution`** の変化形を使用して、それぞれ最小値と最大値をクエリーすることができます。

例
-

### HTML

```html
<p>This is a test of your device's pixel density.</p>
```

### CSS

```css
/\* 正確な解像度 \*/
@media (resolution: 150dpi) {
  p {
    color: red;
  }
}

/\* 最小解像度 \*/
@media (min-resolution: 72dpi) {
  p {
    text-decoration: underline;
  }
}

/\* 最大解像度 \*/
@media (max-resolution: 300dpi) {
  p {
    background: yellow;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # resolution |

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

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

関連情報
----

* `window.devicePixelRatio`
* `image-resolution` プロパティ


color-gamut - CSS: カスケーディングスタイルシート

color-gamut
===========

**`color-gamut`** は CSS のメディア特性で、ユーザーエージェントおよび出力機器が対応している色のおよその範囲を調べるために使用することができます。

構文
--

`color-gamut` 特性は以下の一覧のうち一つのキーワード値で指定します。

`srgb`

出力機器が sRGB 色域にほぼ対応、またはそれより広い範囲に対応している場合です。大多数のカラーディスプレイはこれに含まれます。

`p3`

出力機器が DCI P3 色空間にほぼ対応、またはそれより広い色域に対応している場合です。 P3 色域は sRGB 色域よりも広く、またsRGB色域を含んでいます。

`rec2020`

出力機器がおよそ ITU-R 勧告 BT.2020 色空間にほぼ対応、またはそれより広い色域に対応している場合です。 REC2020 色域は P3 色域よりも広く、またP3色域を含んでいます。

例
-

### HTML

```html
<p>This is a test.</p>
```

### CSS

```css
@media (color-gamut: srgb) {
  p {
    background: #f4ae8a;
  }
}
```

### 結果

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # color-gamut |

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

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

関連情報
----

* メディアクエリーの使用
* @media


color-index - CSS: カスケーディングスタイルシート

color-index
===========

**`color-index`** は CSS のメディア特性で、出力端末の色参照テーブルの項目数を調べるために使用します。

構文
--

`color-index` 特性は `<integer>` 値で指定し、出力端末の色参照テーブルの項目数を表します。 (端末がそのようなテーブルを使用していなければ、値はゼロになります)。これは範囲を持つ特性であり、つまり接頭辞の付いた **`min-color-index`** および **`max-color-index`** という変化形を使用して、それぞれ最小値と最大値を問い合わせることができます。

例
-

### 基本的な例

#### HTML

```html
<p>これはテストです。</p>
```

#### CSS

```css
p {
  color: black;
}

@media (color-index) {
  p {
    color: red;
  }
}

@media (min-color-index: 15000) {
  p {
    color: #1475ef;
  }
}
```

#### 結果

### 独自スタイルシート

この HTML は、256色以上を持つ端末に専用のスタイルシートを適用します。

```html
<link rel="stylesheet" href="http://foo.bar.com/base.css" />
<link
 rel="stylesheet"
 media="all and (min-color-index: 256)"
 href="http://foo.bar.com/color-stylesheet.css" />
```

仕様書
---

| Specification |
| --- |
| Media Queries Level 4 # color-index |

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

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

関連情報
----

* メディアクエリーの使用
* @media


OpenType フォント特性の手引き - CSS: カスケーディングスタイルシート

OpenType フォント特性の手引き
===================

フォント特性 (font features) または異体字 (variants) とは、OpenType フォントに含まれるさまざまな字形や文字スタイルのことです。これらには、合字 ('fi' や 'ffl' などの文字を組み合わせた特別な字形)、カーニング (特定の文字の組み合わせの間隔の調整)、分数、数字のスタイルなどがあります。これらはすべて OpenType 機能と呼ばれ、特定のプロパティや低レベルの制御プロパティ - `font-feature-settings` を通じてウェブ上で使用できるようになっています。この記事では、CSS で OpenType フォント特性を使用するために必要なすべての知識を提供します。

フォントによっては、これらの特性のうち 1 つ以上が既定で有効になっているものもあれば (カーニングや既定の合字が一般的な例です)、特定の場面で有効にするかどうかをデザイナーや開発者に委ねているものもあります。

合字や lining 字形 (小文字のように見える 'oldstyle' とは対照的に、均等に並ぶ数字) のような広範な特性セットに加えて、スタイリスティックセット (一緒に使用することを意図した字形のいくつかの特定の異体字を含む場合がある)、代替字形 (文字 'a' の 1 つまたは複数の異体字の場合がある)、あるいは東アジアの言語のための言語固有の変更など、非常に特殊なものもあります。後者の場合、これらの変更は、その言語を適切に表現するために実際に必要なものであり、他のほとんどの OpenType 機能のようなスタイル上の好みよりも重要です。

**警告:** フォントの特性を利用するために多くの CSS 属性が定義されていますが、残念ながらその多くは完全には実装されていません。これらはすべて定義されており、ここで紹介されていますが、多くは下位レベルの `font-feature-settings` プロパティでのみ動作します。両方の方法で動作するように CSS を記述することは可能ですが、これは面倒なことになります。すべてに `font-feature-settings` を使う場合の問題点は、個々の特性を変更するたびに、文字列全体を再定義しなければならないことです (可変フォントを `font-variation-settings` で操作するのと似ています)。

フォントの特性の有無の確認
-------------

これは、フォントに付属しているドキュメントがない場合、最も厄介な問題です (多くのフォントデザイナーや工房がサンプルページや CSS を提供しているのはこのためです)。しかし、簡単に解決できるサイトもあります。 wakamaifondue.com にアクセスして、指示された円の上にフォントファイルをドロップすると、すぐにフォントのすべての特性と特徴に関する完全なレポートが得られます。 Axis-praxis.org も同様の機能を提供しており、特性をクリックすると、指定したテキストブロックでそれらをオンまたはオフにすることができます。

使用する理由
------

これらの特性の知識を得て使用するには少し手間がかかることを考えると、「なぜわざわざ使うのか」という疑問が湧くのも無理はありません。その答えは、サイトをより便利に、より読みやすく、より洗練されたものにするための具体的な機能にあります。

* 'ff' や 'fi' のような**合字**を使うと、文字の間隔がより均一になり、よりスムーズに読めるようになります。
* **分数**を使うことで、日曜大工やレシピのサイトがより見やすく、分かりやすくなります。
* テキストの段落内の**数字**を 'oldstyle' に設定すると、小文字の間でより見やすくに配置され、同様に数字を 'tabular numbers' に設定すると、金額のリストを表に設定したときに見やすく並びます。一方、 'lining' の数字は、単独でも、大文字の単語の前でも、より統一感があります。

どの特性も、それがないからといってサイトが使えなくなるわけではありませんが、それぞれの特性があることで、より使いやすく、より印象に残るサイトになります。

>
> OpenType の特性は、フォントの秘密のコンパートメントのようなものです。それらを利用できるようにすることで、フォントの外観や動作を微妙に、あるいは劇的に変化させる方法を見つけることができます。すべての OpenType 特性が常に使用するのに適しているわけではありませんが、いくつかの特性は優れた組版に不可欠です。 *-- Tim Brown, Head of Typography at Adobe*.
>
>
>

### 時にはスタイルだけでなく本質になることも

また、場合によっては — `font-variant-east-asian` のように — OpenType の特性が、特定の異体字を使用することに直結しており、それが意味や読みやすさに影響を与えることがあります。このようなケースでは、単なる飾りではなく、コンテンツ自体に不可欠な要素となります。

フォントの特性
-------

考慮すべき特性がいくつかあります。ここでは、W3C の仕様書に記載されている主な属性やオプションに沿ってグループ化し、説明しています。

**メモ:** 以下の例では、プロパティといくつかの組み合わせ例を、同等の低水準構文とともに示しています。ブラウザーの実装に不整合があるため、完全には一致しないかもしれませんが、多くの場合、一つ目の例は二つ目の例と一致します。表示されている書体は、Playfair Display、Source Serif Pro、IBM Plex Serif、Dancing Script、Kokoro です (すべて入手可能で無料で使用でき、ほとんどは Google Fonts やその他のサービスで提供されています)。

### カーニング (`font-kerning`)

これは、特定の文字の組み合わせの間隔を意味します。これは通常、既定でオンになっています (OpenType 仕様で推奨されています)。なお、`letter-spacing` もテキストに設定されている場合は、カーニングの後に適用されますので注意が必要です。

### 代替字形 (`font-variant-alternates`)

フォントは、小文字の 'a' の異なるスタイルや、筆記体における多かれ少なかれ精巧なスワッシュのように、様々な字形に対して多くの異なる代替案を提供することができます。このプロパティは、与えられた値に応じて、代替案のセット全体を有効にすることも、特定のものだけを有効にすることもできます。以下の例は、代替文字を扱う際のいくつかの異なる側面を示しています。代替字形を持つフォントでは、代替字形を全体的に使用できるようにすることも、個別のスタイルセットや個々の文字で個別に使用できるようにすることもできます。この例では、2 つの異なる書体と、`@font-feature-values` アットルールの導入を見ることができます。これは、フォントファミリーごとに定義できるショートカットや名前付きオプションを定義するためのものです。このようにして、単一のフォントにのみ適用される名前付きオプションや、共有されてより一般的に適用される名前付きオプションを作成することができます。

この場合、`@stylistic(alternates)` は、どちらのフォントの代替文字もすべて表示します。これを 'My' という単語だけに適用すると、'M' のレンダリング方法が変わり、`@styleset(alt-a)` を適用すると、小文字の 'a' だけが変わります。

次の行を

```css
font-variant-alternates: styleset(alt-a);
```

このように変更してみてください。

```css
font-variant-alternates: styleset(alt-g);
```

小文字の 'a' が標準形に戻り、小文字の 'g' が代わりに変化するのが分かるでしょう。

#### 代替字形の詳細

* https://www.w3.org/TR/css-fonts-4/#propdef-font-variant-alternates
* https://developer.mozilla.org/ja/docs/Web/CSS/font-variant-alternates
### 合字 (`font-variant-ligatures`)

合字とは、2 つ以上の別々の文字を、(間隔や美観の観点から) よりスムーズに表現するために置き換える字形のことです。最も一般的なものとしては、'fi', 'fl', 'ffl' などの文字がありますが、他にも様々な可能性があります。最も頻繁に使用される合字 (一般的な合字と呼ばれています) の他に、「任意合字」、「歴史的合字」、「文脈上の代替合字」などのより専門的なカテゴリーがあります。これらは厳密には合字ではありませんが、特定の文字の組み合わせを置き換えるという点では共通しています。

スクリプト書体ではよく見られますが、下の例では矢印を作るために使われています。

### 位置 (`font-variant-position`)

位置の変化形は、植字の上付き文字や下付き文字のグリフを有効にするために使用されます。これらは、ベースラインやラインスペーシングを変更することなく、周囲のテキストと連動するように設計されています。これは `<sub>` や `<sup>` 要素を使用した場合と比較して、重要な利点の一つです。

### 大文字 (`font-variant-caps`)

OpenType 特性の一般的な使用例の 1 つに、適切なスモールキャップがあります。これは、小文字の中に収まるようにサイズを調整した大文字で、一般的には頭文字や略語に使用されます。

### 数字 (`font-variant-numeric`)

フォントに含まれる数字には、いくつかの種類があります。

* 'Lining' の数字はすべて同じ高さで、同じベースライン上にあります。
* 'Oldstyle' の数字は高さが混在しており、他の小文字と同様にアセンダーとディセンダーの外観を持つようにデザインされています。これらの数字は、スモールキャップと同様に、数字が周囲の字形と視覚的に調和するように、コピーと一緒にインラインで使用されるように設計されています。

また、スペーシングという考え方もあります。プロポーショナルスペーシングは通常の設定で、タビュラースペーシングは文字幅に関係なく数字を均等に並べることができ、財務諸表の数字の表を並べるのに適しています。

このプロパティでは、2 種類の分数がサポートされています。

* 斜めに分けられた分数
* 垂直に積み上げられた分数

序数にも対応しています ('1st' や '3rd' など)。また、フォント内にスラッシュ付きのゼロがある場合は、それにも対応しています。

#### Lining と Oldstyle の字形

#### 分数、序数、スラッシュ付きのゼロ

### 東アジアの文字 (`font-variant-east-asian`)

これにより、フォント内のさまざまな代替字形にアクセスすることができます。下の例では、OpenType セット 'jis78' のみを有効にした字形の文字列を示しています。下のボックスのチェックを外すと、より多くの文字が表示されます。

**メモ:** これらのグリフはフォントサンプルからコピーされたもので、散文を意図したものではありません。

### フォントの異体字の一括指定 (`font-variant`)

これは、上記のすべてを定義するための一括指定構文です。`normal` という値を設定すると、すべてのプロパティが初期値にリセットされます。値を `none` に設定すると、`font-variant-ligatures` を none に設定し、他のすべてのプロパティを初期値に戻します。(つまり、カーニングが既定でオンになっている場合は、ここで `none` の値を与えても、カーニングはオンのままです)。

フォント特性の設定
---------

`font-feature-settings` は、名前の付いた利用可能なすべての OpenType 特性へ明示的にアクセスできる「低水準構文」です。これにより、多くの制御が可能になりますが、継承への影響や、前述したように、1 つの設定を変更したい場合には、文字列全体を再宣言しなければなりません (CSS カスタムプロパティを使用して値を設定している場合を除く)。そのため、可能な限り上記の標準プロパティを使用することをお勧めします。

膨大な数の特性が考えられます。上にいくつかの例を示しましたが、さらに多くの特性を見つけるためのリソースもいくつかあります。

一般的な構文は次のようになります。

```css
.small-caps {
  font-feature-settings: "smcp", "c2sc";
}
```

仕様書によると、4 文字の特性コードだけを指定するか、コードの後に 1 を指定することで特性を有効にすることができ、また、 0 を指定することで特性を無効にすることができます。これは、合字のような既定で有効になっている特性を、次のようにして無効にしておきたい場合に便利です。

```css
.no-ligatures {
  font-feature-settings:
    "liga" 0,
    "dlig" 0;
}
```

#### font-feature-settings のコードについてより詳しく

* 'The Complete CSS Demo for OpenType Features' (can't vouch for the truth of the name, but it's pretty big)
* A list of OpenType features on Wikipedia
CSS の機能検出を利用した実装
----------------

すべてのプロパティが均等に実装されているわけではないので、CSS を設定するのに機能検出を使用して正しいプロパティを使用できるようにし、`font-feature-settings` を代替として使用するのがよいでしょう。

例えば、スモールキャップはいくつかの方法で設定することができますが、基本的な大文字に関わらず、最終的にすべてをスモールキャップにしたい場合は、 `font-variant-caps` を使った 1 つのプロパティ値ではなく、`font-feature-settings` を使った 2 つの設定が必要になります。

```css
.small-caps {
  font-feature-settings: "smcp", "c2sc";
}

@supports (font-variant-caps: all-small-caps) {
  .small-caps {
    font-feature-settings: normal;
    font-variant-caps: all-small-caps;
  }
}
```

関連情報
----

### CSS の OpenType 機能の CSS による実演

* The Complete CSS Demo for OpenType Features
### ウェブフォント解析ツール

* Wakamai Fondue
* Axis Praxis
### W3C 標準

* Font Feature Properties in CSS Fonts Module Level 3
    + 〔日本語訳〕CSS フォントモジュール第 3 水準におけるフォント特性プロパティ
* font-variant-alternatives in CSS Fonts Module Level 4
    + 〔日本語訳〕CSS フォントモジュール第 4 水準における font-variant-alternatives
その他の文献
------

* OpenType機能の使用 - アドビ
* CSSでのOpenType機能の構文 - アドビ


可変フォントガイド - CSS: カスケーディングスタイルシート

可変フォントガイド
=========

**可変フォント** (Variable fonts) は幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを 1 つのファイルに組み込むことができる OpenType フォント仕様の進化版です。CSS および単一の `@font-face` 参照を介して、特定のフォントファイルに含まれるすべてのバリエーションにアクセスできます。この記事では、可変フォントの使用を開始するために知っておく必要があるすべての内容を説明します。

**メモ:** OS で可変フォントを使用するには、最新のフォントであることを確認してください。たとえば、Linux 系の OS には最新の Linux Freetype バージョンが必要であり、10.13 より前の macOS は可変フォントに対応していません。OS が最新でない場合、ウェブページや Firefox 開発ツールで可変フォントを使用できません。

可変フォント: 何であるか、何が違うのか
--------------------

可変フォントの違いをよりよく理解するためには、可変でないフォントが何であり、どのように比較するかを確認するのがいいでしょう。

### 標準 (または静的) フォント

以前は、一つの書体がいくつもの個別のフォントとして作成され、それぞれのフォントが特定の幅/太さ/スタイルの組み合わせを表していました。したがって 'Roboto Regular'、'Roboto Bold'、'Roboto Bold Italic' のように個別のファイルがありました。— すなわち、完全な書体を表すのに 20 ～ 30 に及ぶ異なるフォントファイルで表していました (幅の異なる大きな書体の数倍になる場合もありました)。

このようなシナリオでは、サイトで一般的に使用される書体を本文に使用するためには、少なくとも通常、イタリック、太字、太字イタリックの 4 つのファイルが必要になります。キャプションには細字を、強調には太字を、といったように、より多くの太さをを追加したい場合は、さらにいくつかのファイルが必要になります。その結果、HTTP リクエストが多くなり、ダウンロードされるデータも多くなります (通常は 1 ファイルあたり約 20k 以上)。

### 可変フォント

可変フォントでは、それらのすべての組み合わせを 1 つのファイルに収めることができます。そのファイルは単一のフォントよりも大きくなりますが、たいていの場合は、本文の表示用に読み込んだ 4 つのファイルよりも小さいか、同じくらいのサイズになります。可変フォントを選択する利点は、以前は別々に読み込んでいたものをいくつかだけに制限されるのではなく、利用可能な太さや幅、スタイルの全範囲にアクセスできることです。

これにより、各サイズでの読みやすさを高めるために異なるサイズの見出しを異なる太さで設定したり、データの多い表示には幅をやや狭くしたりするなど、一般的な書体技術が可能になります。比較のために、雑誌の書体システムでは、出版物全体で 10 ～ 15 種類以上の異なる太さと幅の組み合わせを使用するのが一般的で、現在のウェブ上の一般的なスタイルよりもはるかに幅広いスタイルを提供しています (実際にはパフォーマンスの理由だけで実用的です)。

#### フォントファミリー、太さ、異体字についての注意

それぞれの太さやスタイル (太字、イタリック、太字イタリックなど) をブラウザーの合成に頼るのではなく、個別に特定のフォントファイルを持つという話をしてきたことに気づくかもしれません。その理由は、ほとんどの書体は太字と斜体についてとても特殊なデザインを持っており、その中にはまったく異なる文字が含まれていることが多いからです (例えば、小文字の 'a' と 'g' は斜体ではかなり異なることが多いです)。書体デザインを最も正確に反映させ、ブラウザーによる違いや、異なるスタイルを合成するかどうかの違いを避けるためには、可変ではないフォントを使用する場合には、必要な場所に具体的なフォントファイルを読み込む方が正確です。

また、可変フォントによっては 2 つのファイルに分割されていることに気づくかもしれません。 1 つは直立とそのすべての変化形、もう 1 つはイタリックの変化形を含むファイルです。これは、イタリック体を必要としない場合や使用しない場合に、全体のファイルサイズを小さくするために行われることがあります。いずれの場合も、共通の `font-family` 名でそれらをリンクさせることができるので、同じ `font-family` と適切な `font-style` を使ってそれらを呼び出すことができます。

「バリエーション軸」の紹介
-------------

新しい可変フォント指定形式の中心となるのは、書体デザインの特定の側面の許容範囲を記述する**バリエーション軸**という概念です。すなわち、「太さ軸」は書体の太さや細さを表し、「幅軸」は書体の幅が広いか狭いかを表し、「イタリック軸」はイタリック体の書体であるかどうかを表し、それに応じてオン/オフを切り替えることができます。軸は範囲またはバイナリーの選択が可能であることに注意してください。重みは 1-999 の範囲ですが、イタリックは単純に 0 か 1 (オフかオンか) です。

仕様書で定義されているように、軸には**登録済み**と**カスタム**の 2 種類があります。

* 登録済みの軸は、もっとも頻繁に遭遇するもので、仕様書の著者が標準化する価値があると感じるほど一般的なものです。現在登録されている軸は、太さ、幅、斜体、イタリック、オプティカルサイズの 5 つです。W3C では、これらの軸を既存の CSS 属性に対応付けることを試みましたが、あるケースでは下記の通り、新しい軸を導入しました。
* カスタム軸には制限がありません。書体デザイナーは、好きな軸を定義して範囲を指定することができ、フォントファイルの形式内でそれを識別するために 4 文字の**タグ**を与えればよいのです。この 4 文字のタグを CSS で使用することで、以下のコード例のように、バリエーションの軸に沿って位置を指定することができます。
### 登録済みの軸と既存の CSS 属性

この節では、例で定義された 5 つの登録軸と、それに対応する CSS を紹介します。可能な限り、標準の構文と低水準の構文の両方を掲載しています。低水準の構文 (`font-variation-settings`) は、可変フォントに対応する初期の実装をテストするために実装された最初のメカニズムであり、登録された 5 つの軸以外の新しい軸やカスタム軸を利用するために必要です。しかし、W3C は他の属性が利用できる場合には、この構文を使用しないよう意図していました。したがって、可能な限り、適切なプロパティを使用するべきであり、`font-variation-settings` の低水準の構文は、他では利用できない値や軸を設定するためにのみ使用してください。

#### メモ

1. `font-variation-settings` を使用する際には、軸名の大文字と小文字が区別されることに注意する必要があります。登録済みの軸名は小文字で、カスタム軸は大文字でなければなりません。例えば、以下のようになります。

```css
font-variation-settings:
  "wght" 375,
  "GRAD" 88;
```

`wght` (太さ) は登録済みの軸で、`GRAD` (等級) はカスタム軸です。
2. `font-variation-settings` を使って値を設定していて、そのうちの 1 つの値を変更したい場合は、すべての値を再宣言しなければなりません (`font-feature-settings` を使って OpenType フォントの特性を設定したときと同じ方法です)。この制限を回避するには、個々の値に CSS カスタムプロパティ (CSS 変数)を使用し、個々のカスタムプロパティの値を変更してください。ガイドの最後にサンプルコードを掲載しています。
### 太さ (Weight)

太さ (`wght` タグで表される) は、文字の角をどれだけ細く、あるいは太く (植字用語でいうところのライト、ヘビー) できるかというデザイン上の軸を定義するものです。CSS では長い間、`font-weight` プロパティを使ってこれを指定する機能がありました。このプロパティは 100 から 900 までの 100 刻みの数値を取り、`normal` や `bold` といったキーワードは、対応する数値 (この場合は 400 と 700) の別名です。これらは、非可変フォントや可変フォントを扱うときにも適用されますが、可変フォントの場合は、1 から 1000 までの任意の数値が有効になります。

現時点では、`@font-face` 宣言の中で、可変フォントの変動する軸上の特定の点をキーワード `bold` (またはその他のキーワード) に「対応付け」する方法がないことに注意してください。これは一般的に非常に簡単に解決することができますが、CSS を書く際に余分なステップが必要になります。

```css
font-weight: 375;

font-variation-settings: "wght" 375;
```

次のライブ例の CSS を編集することで、font-weight の値を操作することができます。

### 幅 (Width)

幅 (`wdth` タグで表される) は、文字の幅をどれだけ狭くするか、あるいは広くするか (植字用語でいう condensed または extended) というデザイン上の軸を定義します。これは通常、CSS で `font-stretch` プロパティを使用して設定され、値は「通常」(100%) の上または下のパーセント値で表されます。与えられた数値がフォントにエンコードされた範囲外である場合、ブラウザーは許容される最も近い値でフォントをレンダリングしなければなりません。

**メモ:** % 記号は `font-variation-settings` を使用する上では不要です。

```css
font-stretch: 115%;

font-variation-settings: "wdth" 115;
```

次のライブ例の CSS を編集することで、フォントの幅の値を変更することができます。

### イタリック (Italic)

イタリック (`ital`) 軸は、オンかオフのどちらかであるという点で動作が異なり、その中間はありません。イタリックのデザインには、正立のデザインとは大きく異なる字形が含まれていることが多く、正立からイタリックへの移行の際には、通常、いくつかのグリフ (または文字) の置換が行われます。イタリックと斜体は同じように使われることが多いのですが、実際には全く異なるものです。斜体はこの文脈では `slant` という用語で定義されており (下の節を参照)、書体は通常どちらか一方を持ちますが、両方を持つことはありません。

CSS では、`font-style` プロパティを使用して、イタリックと斜体の両方をテキストに適用します。 また、`font-synthesis: none;` が導入され、ブラウザーが誤って変動軸と合成されたイタリックを適用するのを防ぐことができます。これは、擬似太字を防ぐためにも使用できます。

```css
font-style: italic;

font-variation-settings: "ital" 1;

font-synthesis: none;
```

次のライブ例の CSS を編集することで、フォントのイタリックを遊べるようになります。

### 斜体 (Slant)

斜体 (`slnt`タグで表される) は、または 'oblique' とも良く呼ばれますが、文字の角度を変えるという点で真のイタリックとは異なりますが、何らかの文字の置換を行うわけではありません。また、数値の範囲で表現されるという点で、可変性があります。これにより、フォントをその軸に沿ってどこでも変化させることができます。許容される範囲は通常 0 (直立) から 20 度で、その範囲内の任意の数値を与えることができるので、フォントをほんの少しだけ斜めにすることができます。ただし、-90 〜 90 度の範囲であれば、どのような値でも有効です。

**メモ:** `deg` キーワードは `font-variation-settings` を使用する上では不要です。

```css
font-style: oblique 14deg;

font-variation-settings: "slnt" 14;
```

次のライブ例の CSS を編集することで、フォントの斜体の値を変更することができます。

### オプティカルサイズ

これは、デジタルフォントや CSS にとっては目新しいことですが、金属製の活字をデザイン・制作する上では何世紀も前からある技術です。オプティカルサイズとは、物理的なサイズに基づいて、文字の全体的なストロークの太さを変化させる手法のことです。サイズがとても小さい場合 (例えば 10 または 12px に相当)、文字は全体的に太いストロークを持ち、物理的に小さいサイズでも再現して読めるように、おそらくその他の小さな修正が加えられます。逆に、48 や 60px のような大きなサイズの場合は、ストロークの太さや細さに大きなバリエーションがあり、本来の意図に沿った書体デザインになっているかもしれません。

これは元々、インクと紙の印刷プロセスを補正するために行われたものですが (小さな文字ではとても細い線がかすれてしまうことが多く、字形が壊れているように見える)、スクリーンの品質や物理的な大きさのレンダリングを補正する際には、デジタルディスプレイにもうまく適用されます。

オプティカルサイズの値は、一般的には `font-size` に対応して自動的に適用されるべきですが、低レベルの `font-variation-settings` 構文を使用して操作することもできます。

CSS で可変フォントに対応するために、`font-optical-sizing` という新しい属性が作成されました。`font-optical-sizing` を使用する場合、許可される値は `auto` または `none` だけです。つまり、この属性はオプティカルサイズのオン/オフのみを可能にします。しかし、`font-variation-settings: 'opsz' <num>` を使用する場合には、数値を指定することができます。ほとんどの場合、`font-size` (文字がレンダリングされる物理的な大きさ) と一致する `opsz` の値を使用することになるでしょう (これは、`auto` を使用しているときに適用されるオプティカルサイズです)。読みやすさや美しさなどの理由で既定値を上書きする必要がある場合は、特定の値を適用できるようになっています。

```css
font-optical-sizing: auto;

font-variation-settings: "opsz" 36;
```

次のライブ例の CSS を編集することで、オプティカルサイズをを変更することができます。

### カスタム軸

カスタム軸とは、書体デザイナーが思い描くデザインバリエーションの軸のことです。もしかしたら、既に一般的になっていたり、登録されたりするものもあるかもしれませんが、それは時間の問題です。

### 等級 (Grade)

等級は書体デザインの歴史の中で知られており、より一般的なカスタム軸の一つになるかもしれません。ある書体の異なる等級をデザインすることは、使用目的や印刷技術に応じて行われることが多かったのです。'grade' という言葉は、書体デザインの相対的な太さや濃さを意味しますが、従来の「太さ」とは異なり、テキストが占める物理的な空間は変化しないため、テキストの等級を変えても、テキストやその周りの要素の全体的なレイアウトが変わることはありません。これにより、等級は、テキスト自体の再フローを引き起こすことなく、変化やアニメーションを行うことができるバリエーションの軸として有効です。

```css
font-variation-settings: "GRAD" 88;
```

次のライブ例の CSS を編集することで、等級の値をを変更することができます。

### 可変フォントの使用: @font-face の変更

可変フォントを読み込むための構文は、他のウェブフォントと非常によく似ていますが、いくつかの注目すべき違いがあり、それらはモダンブラウザーで利用可能な従来の `@font-face` 構文を拡張する形で提供されています。

基本的な構文は同じですが、フォントの技術を指定することができ、読み込まれるフォントファイルに応じた名前ではなく、`font-weight` や `font-stretch` などの記述子の許容範囲を指定することができます。

#### 標準の直立の (ローマン) フォントの例

```css
@font-face {
  font-family: "MyVariableFontName";
  src: url("path/to/font/file/myvariablefont.woff2") format("woff2-variations");
  font-weight: 125 950;
  font-stretch: 75% 125%;
  font-style: normal;
}
```

#### 直立とイタリックの両方を含むフォントの例

```css
@font-face {
  font-family: "MyVariableFontName";
  src: url("path/to/font/file/myvariablefont.woff2") format("woff2-variations");
  font-weight: 125 950;
  font-stretch: 75% 125%;
  font-style: oblique 0deg 20deg;
}
```

**メモ:** この例では、上限の度数に特定の値が設定されていませんが、軸があることを示すことで、ブラウザーが直立かイタリックかを判断できるようになっています (イタリックはオンかオフしかないことを思い出してください)。

#### イタリック体のみを含み、直立文字を含まないフォントの例

```css
@font-face {
  font-family: "MyVariableFontName";
  src: url("path/to/font/file/myvariablefont.woff2") format("woff2-variations");
  font-weight: 125 950;
  font-stretch: 75% 125%;
  font-style: italic;
}
```

#### 斜体軸を含むフォントの例

```css
@font-face {
  font-family: "MyVariableFontName";
  src: url("path/to/font/file/myvariablefont.woff2") format("woff2-variations");
  font-weight: 125 950;
  font-stretch: 75% 125%;
  font-style: oblique 0deg 12deg;
}
```

**メモ:** すべてのブラウザーがフォント指定形式の完全な構文を実装しているわけではないので、慎重にテストしてください。可変フォントに対応しているブラウザーはすべて、形式を format-variations ではなく、ファイル形式だけに設定してもレンダリングされますが (例：`woff2-variations` ではなく `woff2`)、可能であれば適切な構文を使用することをお勧めします。

**メモ:** `font-weight`, `font-stretch`, `font-style` に値の範囲を指定した場合は、適切な属性 (すなわち `font-weight` や `font-stretch`) を使用していると、ブラウザーがその範囲外の軸をレンダリングしようとしないようにしますが、`font-variation-settings` で無効な値を指定した場合には、それを阻止することはできませんので注意して使用してください。

古いブラウザーでの作業
-----------

可変フォントの対応状況は、CSS 機能クエリーで確認できます (`@supports` を参照)。そのため、本番で可変フォントを使用し、可変フォントを呼び出す CSS を機能クエリーブロック内に限定することができます。

```css
h1 {
  font-family: some-non-variable-font-family;
}

@supports (font-variation-settings: "wdth" 115) {
  h1 {
    font-family: some-variable-font-family;
  }
}
```

サンプルページ
-------

以下のサンプルページでは、CSS を構成する 2 つの異なる方法を示しています。最初の例では、可能な限り標準の属性を使用しています。2 つ目の例では、CSS カスタムプロパティを使用して、`font-variation-settings` の文字列に値を設定し、文字列全体を書き換えるのではなく、単一の変数をオーバーライドすることで、単一の変数の値をより簡単に更新する方法を示しています。`h2` のホバー効果に注目してください。これは等級軸のカスタムプロパティ値を変更しているだけです。

参考文献
----

* W3C CSS Fonts Module 4 Specification (編集者草稿)
* W3C Github issue queue
* Microsoft Open Type Variations introduction
* Microsoft OpenType Design-Variation Axis Tag Registry
* Wakamai Fondue (ドラッグ＆ドロップで簡単にフォントの特性を調べることができるサイト)
* Axis Praxis (オリジナル可変フォントの遊び場サイト)
* V-Fonts.com (可変フォントのカタログとその入手先)
* Font Playground (ユーザーインターフェイスに非常に独特なアプローチを持つ、可変フォントのもう一つの遊び場。)


WOFF (Web Open Font Format) - CSS: カスケーディングスタイルシート

WOFF (Web Open Font Format)
===========================

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
**WOFF (Web Open Font Format)** は、Mozilla が Type Supply や LettError、他の組織と提携して開発した新しい Web フォント形式です。これは、TrueType および OpenType, Open Font Format に使用されているテーブルベースの `sfnt` 構造と同じ圧縮されたバージョンを使用しています。WOFF には、これにメタデータと個人利用のためのデータ構造が追加されており、作成者とベンダーがライセンス情報を書き込むことができる予約フィールドも含まれています。

WOFF の使用には 3 つの利点があります:

1. フォントデータが圧縮されているため、サイトで WOFF を使用すると、無圧縮の TrueType や OpenType ファイルの使用と比べて帯域を抑えることができ、読み込み時間も短縮されます。
2. 自社の TrueType や OpenType 形式のフォントが Web 上で使用されることを許可したくない多くのフォントベンダーは、WOFF 形式のフォントなら使用を許可できるでしょう。これは、サイトのデザイナーに対してフォントの可用性を高めることになります。
3. プロプライエタリなブラウザベンダーもフリーソフトウェアのブラウザベンダーも、WOFF 形式を好んでいます。つまり、他の既存のフォント形式と異なり、WOFF 形式のフォントが、Web のための真にユニバーサルで相互運用が可能なフォント形式になる可能性があります。

WOFF と WOFF2 という、2 つのバージョンの WOFF があります。これらの主な違いは、使用する圧縮アルゴリズムです。`@font-face` では `format` 記述子で、それぞれ `'woff'` と `'woff2'` で識別されます。

WOFF の使用
--------

Web コンテンツのテキストに WOFF フォントを使用するには、`@font-face` CSS プロパティを使用します。これは、OpenType や TrueType 形式のフォントの使用方法と同じです。WOFF 形式のフォントは圧縮されているため、より効率的にコンテンツがダウンロードされるでしょう。

WOFF フォントを扱うためのツール
------------------

* WOFF フォントを扱うためのツールを利用できます。`sfnt2woff` および `woff2sfnt` は、WOFF と OpenType の間の変換を行います。
仕様
--

| Specification |
| --- |
| WOFF File Format 1.0 # OverallStructure |
| WOFF File Format 2.0 # FileStructure |

ブラウザ実装状況
--------

### css.at-rules.font-face.WOFF

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

### css.at-rules.font-face.WOFF\_2

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

関連情報
----

* `@font-face`