diff options
| -rw-r--r-- | files/ja/web/css/@font-face/src/index.md | 77 |
1 files changed, 37 insertions, 40 deletions
diff --git a/files/ja/web/css/@font-face/src/index.md b/files/ja/web/css/@font-face/src/index.md index c7c6478916..9f7cf34e16 100644 --- a/files/ja/web/css/@font-face/src/index.md +++ b/files/ja/web/css/@font-face/src/index.md @@ -5,26 +5,28 @@ tags: - '@font-face' - アットルール記述子 - CSS - - CSS Descriptor - - CSS Fonts - - CSS Property + - CSS 記述子 + - CSS フォント + - CSS プロパティ - リファレンス +browser-compat: css.at-rules.font-face.src translation_of: Web/CSS/@font-face/src --- {{CSSRef}} -<strong>`src`</strong> は CSS における {{cssxref("@font-face")}} 規則の 記述子で、フォントデータを含むリソースを指定します。 `@font-face` 規則を有効にするためには必要です。 +**`src`** は CSS における {{cssxref("@font-face")}} ルールの記述子で、フォントデータを含むリソースを指定します。 `@font-face` ルールを有効にするためには必要です。 ## 構文 -<pre class="brush: css notranslate">/* <url> 値 */ +```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> 値 */ +/* <font-face-name> 値 */ src: local(font); /* 引用符なしの名前 */ src: local(some font); /* 空白が入った名前 */ src: local("font"); /* 引用符付きの名前 */ @@ -33,67 +35,63 @@ 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"); -</pre> +``` -<h3 id="Values" name="Values">値</h3> +### 値 -- `<url> [ format( <string># ) ]?` - - : {{cssxref("<url>")}} と、続けて任意で <code id="format()">format()</code> 関数で URL で参照するフォントリソースの形式を記述して外部参照を指定します。形式のヒントには、知られているフォント形式を示す書式文字列をカンマで区切ったリストを指定します。ユーザーエージェントが指定した形式に対応していない場合は、フォントリソースをのダウンロードを飛ばします。形式のヒントが指定されていない場合は、フォントリソースはが常にダウンロードされます。 -- `<font-face-name>` - - : <code id="local()">local()</code> を使用して、ローカルに導入されたフォントフェイスを、より大きなフォントファミリ内で単一のフォントフェイスを一意に識別する名前で指定します。任意で名前を引用符で囲むことができます。 +- `<url> [ format( <string># ) ]?` + - : {{cssxref("<url>()")}} と、続けて任意で `format()` 関数で URL で参照するフォントリソースの形式を記述して外部参照を指定します。形式のヒントには、知られているフォント形式を示す書式文字列をカンマで区切ったリストを指定します。ユーザーエージェントが指定した形式に対応していない場合は、フォントリソースをのダウンロードを飛ばします。形式のヒントが指定されていない場合は、フォントリソースはが常にダウンロードされます。 +- `<font-face-name>` + - : `local()` を使用して、ローカルに導入されたフォントフェイスを、より大きなフォントファミリー内で単一のフォントフェイスを一意に識別する名前で指定します。任意で名前を引用符で囲むことができます。 -<h2 id="Description" name="Description">解説</h2> +## 解説 値は、外部参照またはローカルにインストールされたフォントフェイス名を、カンマで区切った優先度付きリストです。フォントが必要になった時、{{glossary("user agent", "ユーザーエージェント")}}はリスト上の参照を走査し、アクティブ化に成功した最初の物を使用します。無効なデータを持ったフォントや見つからないローカルのフォントは無視され、ユーザーエージェントはリスト上の次のフォントを読み込みます。 CSS のその他の URL と同様に、相対 URL を使用することができ、この場合は `@font-face` 規則を含むスタイルシートの位置からの相対になります。 SVG フォントの場合、 URL は SVG フォント定義を含む文書内の要素を指します。要素への参照が省略された場合は、参照は最初に定義されたフォントを含みます。同様に、複数のフォントを持つフォントコンテナー形式では、 `@font-face` 規則で指定された一つだけを読み込みます。読み込むフォントを示すためにはフラグメント識別子を使用します。コンテナー形式がフラグメントで識別する方法を持たない場合は、1から始まる添字 (例えば "font-collection#1" が最初のフォント、 "font-collection#2" が二番目のフォント、など) が使用されます。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 {{cssinfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} ## 例 -<h3 id="Specifying_font_resources_using_url_and_local" name="Specifying_font_resources_using_url_and_local">url() と local() を使用したフォントリソースの指定</h3> +### url() と local() を使用したフォントリソースの指定 -<pre class="brush: css notranslate">@font-face { +```css +/* 通常のフォントフェイス */ +@font-face { font-family: examplefont; src: local(Example Font), url('examplefont.woff') format("woff"), url('examplefont.otf') format("opentype"); } -</pre> + +/* 同じフォントファミリーで太字のフォントフェイス */ +@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; +} +``` ## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Fonts', '#src-desc', 'src')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -{{Compat("css.at-rules.font-face.src")}} +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} ## 関連情報 -<ul> - {{cssxref("@font-face/font-display", "font-display")}} - {{cssxref("@font-face/font-family", "font-family")}} - {{cssxref("@font-face/font-stretch", "font-stretch")}} @@ -103,4 +101,3 @@ CSS のその他の URL と同様に、相対 URL を使用することができ - {{cssxref("font-feature-settings", "font-feature-settings")}} - {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} - {{cssxref("@font-face/unicode-range", "unicode-range")}} -</ul> |