From 834cb0407cb7629177d0ea21b857875d5ea42f8c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 22 Nov 2024 02:08:49 +0900 Subject: [PATCH 1/2] =?UTF-8?q?2024/11/13=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/@font-face/src/index.md | 247 ++++++++++++++++-- .../web/css/@font-face/unicode-range/index.md | 19 +- 2 files changed, 235 insertions(+), 31 deletions(-) diff --git a/files/ja/web/css/@font-face/src/index.md b/files/ja/web/css/@font-face/src/index.md index 9c7de7785fc63b..f26985904b2cc0 100644 --- a/files/ja/web/css/@font-face/src/index.md +++ b/files/ja/web/css/@font-face/src/index.md @@ -1,11 +1,13 @@ --- title: src slug: Web/CSS/@font-face/src +l10n: + sourceCommit: 0326d9301650304ef67a56e88b542b160093042e --- {{CSSRef}} -**`src`** は CSS における {{cssxref("@font-face")}} ルールの記述子で、フォントデータを含むリソースを指定します。 `@font-face` ルールを有効にするためには必要です。 +**`src`** は CSS の {{cssxref("@font-face")}} アットルールの記述子で、フォントデータを含むリソースを指定します。 `@font-face` ルールを有効にするためには必要です。 ## 構文 @@ -13,7 +15,6 @@ slug: Web/CSS/@font-face/src /* 値 */ 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); /* フラグメントで識別するフォント */ @@ -21,27 +22,132 @@ src: url(path/to/svgfont.svg#example); /* フラグメントで識別するフ src: local(font); /* 引用符なしの名前 */ src: local(some font); /* 空白が入った名前 */ src: local("font"); /* 引用符付きの名前 */ +src: local("some font"); /* 引用符付きの空白を含む */ -/* 複数の項目 */ +/* )> 値 */ +src: url(path/to/fontCOLRv1.otf) tech(color-COLRv1); +src: url(path/to/fontCOLR-svg.otf) tech(color-SVG); + +/* )> 値 */ +src: url(path/to/font.woff) format("woff"); +src: url(path/to/font.otf) format("opentype"); + +/* 複数のリソース */ src: - local(font), - url(path/to/font.svg) format("svg"), url(path/to/font.woff) format("woff"), url(path/to/font.otf) format("opentype"); + +/* フォントの形式と技術のついた複数のリソース */ +src: + url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1), + url("trickster-outline.otf") format(opentype); ``` ### 値 -- ` [ format( # ) ]?` - - : {{cssxref("<url>()")}} と、続けて任意で `format()` 関数で URL で参照するフォントリソースの形式を記述して外部参照を指定します。形式のヒントには、知られているフォント形式を示す書式文字列をカンマで区切ったリストを指定します。ユーザーエージェントが指定した形式に対応していない場合は、フォントリソースをのダウンロードを飛ばします。形式のヒントが指定されていない場合は、フォントリソースはが常にダウンロードされます。 +- `url()` + + - : {{cssxref("url_value", "<url>")}} で構成される外部参照を指定し、その後にオプションで `format()` と `tech()` 成分値を使用して、URL で参照するリソースの書式とフォント技術を指定します。 `format()` と `tech()` の部分は、既知の[フォント形式](#フォント形式)とフォント技術の文字列をカンマで区切ったリストです。ユーザーエージェントがフォント技術や形式に対応していない場合は、フォントリソースのダウンロードをスキップします。形式や技術のヒントが与えられない場合、フォントリソースは常にダウンロードされます。 + +- `format()` + - : `url()` の値に続くオプション宣言で、ユーザーエージェントにフォント形式のヒントを提供します。 + この値に対応していない、または不正な値が指定された場合、ブラウザーはリソースをダウンロードせず、帯域幅を節約できる可能性があります。 + 省略した場合、ブラウザーはリソースをダウンロードしてから形式を検出します。 + [定義済みキーワード](#形式文法)のリストにない後方互換性のためのフォントソースを含める場合は、形式文字列を引用符で囲んでください。取り得る値は下記[フォント形式](#フォント形式)の節で説明しています。 +- `tech()` + - : オプション宣言で `url()` の値に続き、ユーザーエージェントにフォント技術のヒントを提供します。 + `tech()` の値には、[フォント技術](#フォント技術)で説明するキーワードのいずれかを指定します。 +- `local()` + + - : ユーザーの端末で利用できるフォントの名前を指定します。フォント名を引用符で囲むことはオプションです。 + + > [!NOTE] + > OpenType と TrueType フォントの場合、 `` は、ローカルで利用できるフォントの名前表の中の PostScript 名か完全なフォント名のどちらかと照合するために用いられます。どちらの名前を使用するかはプラットフォームやフォントによって異なりますので、プラットフォーム間で適切に照合するためには、どちらの名前も含める必要があります。指定されたフォント名に対するプラットフォームの置換は使用してはいけません。 + + > [!NOTE] + > ローカルで利用できるフォントは、ユーザーの端末にプリインストールされている場合もあれば、ユーザーが積極的にインストールした場合もあります。 + > + > プリインストールされたフォントの組み合わせは具体的な端末のすべてのユーザーにとって同じである可能性が高いですが、ユーザーがインストールしたフォントの組み合わせはそうではありません。したがって、ユーザーがインストールしたフォントの組み合わせを探ることで、ウェブサイトは端末の{{glossary("fingerprinting", "フィンガープリント")}}を作成することができ、ウェブサイトがウェブ全体でユーザーを追跡することができます。 + > + > これを防ぐために、ユーザーエージェントは `local()` を使用した、ユーザーがインストールしたフォントを無視する可能性があります。 + - `` - - : `local()` を使用して、ローカルに導入されたフォントフェイスを、より大きなフォントファミリー内で単一のフォントフェイスを一意に識別する名前で指定します。任意で名前を引用符で囲むことができます。 + - : ローカルにインストールされているフォントフェイスの完全な名前または PostScript 名を `local()` の部分値を使って指定します。 + 名前はオプションで、引用符で囲むこともできます。フォントフェイス名は[大文字小文字を区別しません](https://drafts.csswg.org/css-fonts-3/#font-family-casing)。 + +> [!NOTE] +> {{domxref("Local Font Access API", "ローカルフォントアクセス API", "", "nocode")}} を使用することで、ユーザーがローカルにインストールしたフォントデータにアクセスすることができます。これは、名前、スタイル設定、ファミリーなどの高水準の詳細と、基盤となるフォントファイルの生のバイトを含みます。 ## 解説 -値は、外部参照またはローカルにインストールされたフォントフェイス名を、カンマで区切った優先度付きリストです。フォントが必要になった時、{{glossary("user agent", "ユーザーエージェント")}}はリスト上の参照を走査し、アクティブ化に成功した最初の物を使用します。無効なデータを持ったフォントや見つからないローカルのフォントは無視され、ユーザーエージェントはリスト上の次のフォントを読み込みます。 +値は、外部参照またはローカルにインストールされたフォントフェイス名を、カンマで区切った優先度付きリストで、それぞれのリソースは `url()` または `local()` で指定します。 +フォントが必要になった時、{{glossary("user agent", "ユーザーエージェント")}}はリスト上の参照を走査し、アクティブ化に成功した最初のものを使用します。無効なデータを持ったフォントや見つからないローカルのフォントは無視され、ユーザーエージェントはリスト上の次のフォントを読み込みます。 + +複数の `src` 記述子が設定されている場合、リソースを読み込むことができる最後の宣言ルールのみが適用されます。 +最後の `src` 記述子がリソースを読み込むことができ、かつ `local()` フォントを含んでいない場合、ブラウザーは外部フォントファイルをダウンロードし、端末に利用できるフォントがあってもローカルバージョンを無視します。 + +> [!NOTE] +> ブラウザーが不正とみなす記述子内の値は無視されます。 +> ブラウザーによっては、不正な項目が 1 つでもあると、記述子全体を無視します。 +> これは代替の設計に影響するかもしれません。 +> 詳しくは[ブラウザーの互換性](#ブラウザーの互換性)を確認してください。 + +CSS のその他の URL と同様に、相対 URL を使用することができ、この場合は `@font-face` 規則を含むスタイルシートの位置からの相対になります。 SVG フォントの場合、 URL は SVG フォント定義を含む文書内の要素を指します。要素への参照が省略された場合は、参照は最初に定義されたフォントを含みます。同様に、複数のフォントを持つフォントコンテナー形式では、 `@font-face` 規則で指定された一つだけを読み込みます。読み込むフォントを示すためにはフラグメント識別子を使用します。コンテナー形式がフラグメントで識別する方法を持たない場合は、 1 から始まるインデックス（例えば "font-collection#1" が最初のフォント、 "font-collection#2" が 2 番目のフォント、など）が使用されます。 + +フォントファイルが複数のフォントのコンテナーである場合には、下記に示すように、使用するサブフォントを示すフラグメント識別子が含まれます。 + +```css +/* WhichFont はフォントファイル内のフォントの PostScript 名 */ +src: url(collection.otc#WhichFont); +/* WhichFont は SVG フォントファイル内のフォントの要素 id */ +src: url(fonts.svg#WhichFont); +``` + +### フォント形式 + +次の表は、有効なフォントキーワードと、それに対応するフォント形式を示しています。CSS内でフォント形式がブラウザーの対応しているかどうかを調べるには、 {{cssxref("@supports", "@supports")}} ルールを使用します。 + +| キーワード | フォント形式 | 一般的な拡張子 | +| ------------------- | ---------------------- | -------------- | +| `collection` | OpenType コレクション | .otc, .ttc | +| `embedded-opentype` | 埋め込み OpenType | .eot | +| `opentype` | OpenType | .otf, .ttf | +| `svg` | SVG フォント（非推奨） | .svg, .svgz | +| `truetype` | TrueType | .ttf | +| `woff` | WOFF 1.0 | .woff | +| `woff2` | WOFF 2.0 | .woff2 | + +> [!NOTE] +> +> - `format(svg)` は [SVG フォント](/ja/docs/Web/SVG/Tutorial/SVG_fonts)を表し、 `tech(color-SVG)` は [SVG 表を持つ OpenType フォント](https://learn.microsoft.com/typography/opentype/spec/svg)（OpenType-SVG 色フォントとも呼ばれる）を表し、これらは完全に異なります。 +> - `opentype` 値 と `truetype` 値は、フォントファイルが 3 次ベジェ曲線（CFF/CFF2 表内）を用いているか、 2 次ベジェ曲線（字体テーブル内）を用いているかにかかわらず等価です。 + +古い正規化されていない `format()` の値には、次のような構文があります。後方互換性のために引用符で囲まれた文字列として指定されます。 -CSS のその他の URL と同様に、相対 URL を使用することができ、この場合は `@font-face` 規則を含むスタイルシートの位置からの相対になります。 SVG フォントの場合、 URL は SVG フォント定義を含む文書内の要素を指します。要素への参照が省略された場合は、参照は最初に定義されたフォントを含みます。同様に、複数のフォントを持つフォントコンテナー形式では、 `@font-face` 規則で指定された一つだけを読み込みます。読み込むフォントを示すためにはフラグメント識別子を使用します。コンテナー形式がフラグメントで識別する方法を持たない場合は、1から始まる添字 (例えば "font-collection#1" が最初のフォント、 "font-collection#2" が二番目のフォント、など) が使用されます。 +| 古い構文 | 等価な構文 | +| ------------------------------- | ----------------------------------- | +| `format("woff2-variations")` | `format(woff2) tech(variations)` | +| `format("woff-variations")` | `format(woff) tech(variations)` | +| `format("opentype-variations")` | `format(opentype) tech(variations)` | +| `format("truetype-variations")` | `format(truetype) tech(variations)` | + +### フォント技術 + +次の表は、 `tech()` 記述子に有効な値と、それに対応するフォント技術を示したものです。 CSS 内でフォント技術にブラウザーの対応しているかどうかを調べるには、 {{cssxref("@supports", "@supports")}} アットルールを使用します。 + +| キーワード | 記述子 | +| :------------------ | :----------------------------------------------------------------------------------------------------------- | +| `color-cbdt` | 色ビットマップデータ表 | +| `color-colrv0` | COLR version 0 表による複数色の字体 | +| `color-colrv1` | COLR version 1 表による複数色の字体 | +| `color-sbix` | 標準ビットマップグラフィック表 | +| `color-svg` | SVG 複数色表 | +| `features-aat` | TrueType の `morx` および `kerx` 表 | +| `features-graphite` | グラファイト機能、いわゆる `Silf`, `Glat`, `Gloc`, `Feat`, and `Sill` 表 | +| `features-opentype` | OpenType `GSUB` および `GPOS` 表 | +| `incremental` | インクリメンタルフォント読み込み | +| `palettes` | フォントパレット `font-palette` ということを意味し、フォントの多くの色パレットから一つを選択することができる | +| `variations` | TrueType および OpenType フォントのフォント変化形で、フォントの軸、太さ、字形などを制御します。 | ## 公式定義 @@ -49,32 +155,128 @@ CSS のその他の URL と同様に、相対 URL を使用することができ ## 形式文法 -{{csssyntax}} +```plain + [ format( ) ]? [ tech( # ) ]? | +local( ) + + = [ | collection | embedded-opentype | opentype | svg | truetype | woff | woff2 ] + + = [ | | variations | palettes | incremental-patch | incremental-range | incremental-auto ] + + = [ features-opentype | features-aat | features-graphite ] + + = [ color-COLRv0 | color-COLRv1 | color-SVG | color-sbix | color-CBDT ] +``` ## 例 ### url() と local() を使用したフォントリソースの指定 +下記の例は、同じフォントファミリーの 2つのフォントフェイスを定義する方法を示しています。 `font-family` は `MainText` という名前にしています。最初のフォントフェイスは通常のフォントで、 2 つ目は同じフォントファミリーの太字バージョンです。 + ```css -/* 通常のフォントフェイス */ +/* 通常のフォントフェイスの定義 */ @font-face { - font-family: examplefont; + font-family: MainText; src: - local(Example Font), - url("examplefont.woff") format("woff"), - url("examplefont.otf") format("opentype"); + local(Futura-Medium), + url("FuturaMedium.woff") format("woff"), + url("FuturaMedium.otf") format("opentype"); } /* 同じフォントファミリーで太字のフォントフェイス */ @font-face { - font-family: examplefont; + font-family: MainText; src: - local(Example Font Bold), - /* 完全なフォント名 */ local(Example Font-Bold), - /* Postscript 名 */ url("examplefont.woff") format("woff"), - url("examplefont.otf") format("opentype"); + local(Gill Sans Bold) /* 完全なフォント名 */, + local(GillSans-Bold) /* postscript 名 */, + url("GillSansBold.woff") format("woff"), + url("GillSansBold.otf") format("opentype"), + url("GillSansBold.svg#MyFontBold"); /* id による SVG フォントフラグメントの参照 */ font-weight: bold; } + +/* 通常フォントフェイスの使用 */ +p { + font-family: MainText; +} + +/* Font-family は継承されるが、太字フォントが使用される */ +p.bold { + font-weight: bold; +} +``` + +### tech() と format() の値を用いたフォントリソースの指定 + +次の例は、 `tech()` と `format()` の値を使用してフォントリソースを指定する方法を示しています。 +`color-colv1` 技術と `opentype` 形式を用いるフォントを `tech()` と `format()` の値で指定しています。 +ユーザーエージェントが対応していれば色フォントが有効になり、代替フォントとして `opentype` の色なしフォントが指定されます。 + +```css +@font-face { + font-family: "Trickster"; + src: + url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1), + url("trickster-outline.otf") format(opentype); +} + +/* フォントフェイスの使用 */ +p { + font-family: "Trickster"; +} +``` + +### 古いブラウザー向けの代替の指定 + +ブラウザーは、フォントの使用可能なソースを列挙した単一の `src` 記述子を持つ `@font-face` を使用します。 +ブラウザーは読み込むことができる最初のリソースを使用しますので、アイテムは使用する環境設定の順に指定します。 + +一般的に、これはローカルファイルがリモートファイルより先に現れ、 `format()` や `tech()` の制約があるリソースは、制約を持っていないリソースより先に現れるべきであるということを意味しています（そうでなければ、制約の少ないバージョンが常に選択されることになります）。 +例を示します。 + +```css +@font-face { + font-family: "MgOpenModernaBold"; + src: + url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental), + url("MgOpenModernaBold.otf") format(opentype); +} +``` + +上記の `tech()` に対応していないブラウザーは、最初の項目を無視し、 2 つ目のリソースを読み込むようにしてください。 + +ブラウザーによっては、[不正なアイテムを無視](#ブラウザーの互換性)せず、値が不正な場合は `src` 記述子全体が失敗するものがあります。 +このブラウザーに作業する場合、代替として複数の `src` 記述子を指定することができます。 +複数の `src` 記述子は逆順に試行されるので、末尾にはすべてのアイテムを含む通常の記述子を持っていることに注意してください。 + +```css +@font-face { + font-family: "MgOpenModernaBold"; + src: url("MgOpenModernaBold.otf") format(opentype); + src: url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental); + src: + url("MgOpenModernaBoldIncr.otf") format("opentype") tech(incremental), + url("MgOpenModernaBold.otf") format(opentype); +} +``` + +### ユーザーエージェントがフォントに対応しているかの調査 + +次の例は、 {{cssxref("@supports")}} ルールを使ってユーザーエージェントがフォント技術に対応しているかどうかを調べる方法を示しています。 +`@supports` 内の CSS ブロックは、ユーザーエージェントが `color-COLRv1` 技術に対応している場合に適用されます。 + +```css +@supports font-tech(color-COLRv1) { + @font-face { + font-family: "Trickster"; + src: url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1); + } + + .colored_text { + font-family: "Trickster"; + } +} ``` ## 仕様書 @@ -87,12 +289,13 @@ CSS のその他の URL と同様に、相対 URL を使用することができ ## 関連情報 +- {{cssxref("@font-face", "@font-face")}} +- {{cssxref("@supports", "@supports")}} - {{cssxref("@font-face/font-display", "font-display")}} - {{cssxref("@font-face/font-family", "font-family")}} - {{cssxref("@font-face/font-stretch", "font-stretch")}} - {{cssxref("@font-face/font-style", "font-style")}} - {{cssxref("@font-face/font-weight", "font-weight")}} -- {{cssxref("@font-face/font-variant", "font-variant")}} - {{cssxref("font-feature-settings", "font-feature-settings")}} - {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} - {{cssxref("@font-face/unicode-range", "unicode-range")}} diff --git a/files/ja/web/css/@font-face/unicode-range/index.md b/files/ja/web/css/@font-face/unicode-range/index.md index 3c2bd6637fadb7..6db6e4b8a92b53 100644 --- a/files/ja/web/css/@font-face/unicode-range/index.md +++ b/files/ja/web/css/@font-face/unicode-range/index.md @@ -1,31 +1,33 @@ --- title: unicode-range slug: Web/CSS/@font-face/unicode-range +l10n: + sourceCommit: 0326d9301650304ef67a56e88b542b160093042e --- {{CSSRef}} -**`unicode-range`** は CSS の記述子で、 {{cssxref("@font-face")}} で定義されたフォントから使用される特定の文字範囲を設定し、現在のページで使用できるようにします。ページがこの範囲内の文字を使用しない場合、フォントはダウンロードされません。少なくとも 1 つの文字を使用すると、フォント全体がダウンロードされます。 +**`unicode-range`** は CSS の記述子で、 {{cssxref("@font-face")}} を用いて定義されたフォントから使用される特定の文字範囲を設定し、現在のページで使用できるようにします。ページがこの範囲内の文字を使用しない場合、フォントはダウンロードされません。少なくとも 1 つの文字を使用すると、フォント全体がダウンロードされます。 ## 構文 ```css /* 値 */ -unicode-range: U+26; /* 単一の符号位置 */ +unicode-range: U+26; /* 単一のコードポイント */ unicode-range: U+0-7F; -unicode-range: U+0025-00FF; /* 符号位置の範囲 */ +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+26` +- **_コードポイントの範囲_** + - : Unicode コードポイントの範囲。例えば、 `U+0025-00FF` は、 *`U+0025` から `U+00FF` の範囲内の全文字を含む*こと意味します。 - **_ワイルドカードの範囲_** - - : ワイルドカード文字を含む Unicode 符号位置の範囲。 `'?'` 文字を使用します。例えば、`U+4??` は *`U+400` から `U+4FF` の範囲の全文字を含む*ことを意味します。 + - : ワイルドカード文字を含む Unicode コードポイントの範囲。 `'?'` 文字を使用します。例えば、`U+4??` は *`U+400` から `U+4FF` の範囲の全文字を含む*ことを意味します。 ## 解説 @@ -87,7 +89,6 @@ div { - {{cssxref("@font-face/font-stretch", "font-stretch")}} - {{cssxref("@font-face/font-style", "font-style")}} - {{cssxref("@font-face/font-weight", "font-weight")}} -- {{cssxref("@font-face/font-variant", "font-variant")}} - {{cssxref("font-feature-settings", "font-feature-settings")}} - {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} - {{cssxref("@font-face/src", "src")}} From 6bf5446eb28a92e74e487cadbd80db88bbdcdf24 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 22 Nov 2024 02:27:10 +0900 Subject: [PATCH 2/2] Update index.md --- files/ja/web/css/@font-face/src/index.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/files/ja/web/css/@font-face/src/index.md b/files/ja/web/css/@font-face/src/index.md index f26985904b2cc0..7fdccabe07a92a 100644 --- a/files/ja/web/css/@font-face/src/index.md +++ b/files/ja/web/css/@font-face/src/index.md @@ -75,8 +75,7 @@ src: - : ローカルにインストールされているフォントフェイスの完全な名前または PostScript 名を `local()` の部分値を使って指定します。 名前はオプションで、引用符で囲むこともできます。フォントフェイス名は[大文字小文字を区別しません](https://drafts.csswg.org/css-fonts-3/#font-family-casing)。 -> [!NOTE] -> {{domxref("Local Font Access API", "ローカルフォントアクセス API", "", "nocode")}} を使用することで、ユーザーがローカルにインストールしたフォントデータにアクセスすることができます。これは、名前、スタイル設定、ファミリーなどの高水準の詳細と、基盤となるフォントファイルの生のバイトを含みます。 +> **メモ:** {{domxref("Local Font Access API", "ローカルフォントアクセス API", "", "nocode")}} を使用することで、ユーザーがローカルにインストールしたフォントデータにアクセスすることができます。これは、名前、スタイル設定、ファミリーなどの高水準の詳細と、基盤となるフォントファイルの生のバイトを含みます。 ## 解説