From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/@font-face/src/index.html | 110 +++++++++++++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 files/ja/web/css/@font-face/src/index.html (limited to 'files/ja/web/css/@font-face/src/index.html') diff --git a/files/ja/web/css/@font-face/src/index.html b/files/ja/web/css/@font-face/src/index.html new file mode 100644 index 0000000000..3e1b90b644 --- /dev/null +++ b/files/ja/web/css/@font-face/src/index.html @@ -0,0 +1,110 @@ +--- +title: src +slug: Web/CSS/@font-face/src +tags: + - '@font-face' + - At-rule descriptor + - CSS + - CSS Descriptor + - CSS Fonts + - CSS Property + - Reference +translation_of: Web/CSS/@font-face/src +--- +
{{CSSRef}}
+ +

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

+ +

構文

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

解説

+ +

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

+ +

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

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

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

+ +
@font-face {
+  font-family: examplefont;
+  src: local(Example Font),
+       url('examplefont.woff') format("woff"),
+       url('examplefont.otf') format("opentype");
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#src-desc', 'src')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf