From a30bf1f62d082354c4a12c6e87ac5a562bd4898e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 16 Feb 2022 01:02:11 +0900 Subject: Web/CSS/@font-face を移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/@font-face/index.html | 195 --------------------------------- files/ja/web/css/@font-face/index.md | 195 +++++++++++++++++++++++++++++++++ 2 files changed, 195 insertions(+), 195 deletions(-) delete mode 100644 files/ja/web/css/@font-face/index.html create mode 100644 files/ja/web/css/@font-face/index.md diff --git a/files/ja/web/css/@font-face/index.html b/files/ja/web/css/@font-face/index.html deleted file mode 100644 index 593910fd2e..0000000000 --- a/files/ja/web/css/@font-face/index.html +++ /dev/null @@ -1,195 +0,0 @@ ---- -title: '@font-face' -slug: Web/CSS/@font-face -tags: - - '@-規則' - - '@規則' - - CSS - - CSS フォント - - Reference - - フォント - - リファレンス -translation_of: Web/CSS/@font-face ---- -
{{CSSRef}}
- -

CSS の @font-face @-規則は、テキストを表示するための独自フォントを指定します。フォントはリモートサーバーまたはユーザー自身のコンピューターにローカルにインストールされたフォントのどちらかから読み込むことができます。 local() 関数が与えられると、ユーザーのコンピューターで探すフォント名を指定し、{{Glossary("user agent", "ユーザーエージェント")}}がそれを見つけることができれば、そのローカルフォントを使用します。そうでなければ、 url() 関数を使用して指定されたフォントリソースをダウンロードして使用します。

- -

@font-face で独自のフォントを提供できるようになることで、 "web-safe" フォント (つまり、広く利用できると考えられるほど一般的なフォント) と呼ばれる制限なしにコンテンツをデザインすることができます。ローカルにインストールされているフォントを、名前を指定して検索し使用することができる機能により、インターネット接続に頼らなくてもフォントを基本的なものからカスタマイズすることができるようになります。

- -

url() と local() を両方とも使用することは一般的であり、そうすることでユーザーのインストールされたフォントのコピーが利用できればそれを利用し、ユーザーの端末に見つからない場合はフォントのコピーを代替としてダウンロードすることができます。

- -

@font-face @-規則は、 CSS の最上位だけでなく、 CSS の条件付き @-規則グループの中でも使用することができます。

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

構文

- -

記述子

- -
-
{{cssxref("@font-face/font-display", "font-display")}}
-
フォントのダウンロード及び準備状況に応じて、どのようにフォントフェイスを表示するかを特定します。
-
{{cssxref("@font-face/font-family", "font-family")}}
-
font プロパティの font face 値で使われる名前を指定します。
-
{{cssxref("@font-face/font-stretch", "font-stretch")}}
-
{{cssxref("font-stretch")}} 値です。 Firefox 61 以降 (及びその他の最近のブラウザーの多く) では、font-face で対応している範囲を指定するために、 font-stretch: 50% 200%; のように二つの値を受け付けます。
-
{{cssxref("@font-face/font-style", "font-style")}}
-
{{cssxref("font-style")}} 値です。 Firefox 61 以降 (及びその他の最近のブラウザーの多く) では、font-face で対応している範囲を指定するために、 font-style: oblique 20deg 50deg; のように二つの値を受け付けます。
-
{{cssxref("@font-face/font-weight", "font-weight")}}
-
{{cssxref("font-weight")}} 値です。 Firefox 61 以降 (及びその他の最近のブラウザーの多く) では、font-face で対応している範囲を指定するために、 font-weight: 100 400; のように二つの値を受け付けます。
-
{{cssxref("@font-face/font-variant", "font-variant")}}
-
{{cssxref("font-variant")}} 値です。
-
{{cssxref("font-feature-settings", "font-feature-settings")}}
-
OpenType フォントで高度な印刷機能を制御することができるようにします。
-
{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
-
変化の特徴を表す4文字の軸名を、種類の値と共に指定することにより、 OpenType 又は TrueType フォントの種類を低レベルで制御できます。
-
{{cssxref("@font-face/src", "src")}}
-
-

フォントデータを含むリソースを指定します。これでリモートのフォントファイルの位置又はユーザーのコンピューターのフォント名を指定することができます。

- -

ブラウザーにフォントのリソースがどの形式であるかのヒントを提供するために — それで最適なものを選択できます — format() 関数の中に形式を含めることができます。

- - 
src: url(ideal-sans-serif.woff) format("woff"),
-     url(basic-sans-serif.ttf) format("truetype");
- -

利用可能な形式は、"woff", "woff2", "truetype", "opentype", "embedded-opentype", "svg" です。

-
-
{{cssxref("@font-face/unicode-range", "unicode-range")}}
-
フォントで使用される Unicode コードポイントの範囲です。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

この例は単にダウンロードフォントを指定し、ドキュメントの本文全体に適用します。

- -

動作例を見る

- -
<html>
-<head>
-  <title>Web Font Sample</title>
-  <style type="text/css" media="screen, print">
-    @font-face {
-      font-family: "Bitstream Vera Serif Bold";
-      src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
-    }
-
-    body { font-family: "Bitstream Vera Serif Bold", serif }
-  </style>
-</head>
-<body>
-  This is Bitstream Vera Serif Bold.
-</body>
-</html>
-
- -

この例では、ユーザーのローカルにある "Helvetica Neue Bold" が使用されます。もしユーザーがそのフォントをインストールしていない場合は (二つの異なる名前が試されます)、代わりに "MgOpenModernaBold.ttf" という名前のダウンロードフォントが使用されます。

- -
@font-face {
-  font-family: MyHelvetica;
-  src: local("Helvetica Neue Bold"),
-       local("HelveticaNeue-Bold"),
-       url(MgOpenModernaBold.ttf);
-  font-weight: bold;
-}
-
- -

フォントの MIME タイプ

- - - - - - - - - - - - - - - - - - - - - - - - - - -
形式MIME タイプ
TrueTypefont/ttf
OpenTypefont/otf
Web Open File Formatfont/woff
Web Open File Format 2font/woff2
- -

メモ

- - - -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}{{Spec2('WOFF2.0')}}新しい圧縮アルゴリズムのフォント形式を定義
{{SpecName('WOFF1.0', '', 'WOFF font format')}}{{Spec2('WOFF1.0')}}フォント形式の定義
{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}{{Spec2('CSS3 Fonts')}}初回定義
- -

ブラウザーの対応

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/@font-face/index.md b/files/ja/web/css/@font-face/index.md new file mode 100644 index 0000000000..593910fd2e --- /dev/null +++ b/files/ja/web/css/@font-face/index.md @@ -0,0 +1,195 @@ +--- +title: '@font-face' +slug: Web/CSS/@font-face +tags: + - '@-規則' + - '@規則' + - CSS + - CSS フォント + - Reference + - フォント + - リファレンス +translation_of: Web/CSS/@font-face +--- +
{{CSSRef}}
+ +

CSS の @font-face @-規則は、テキストを表示するための独自フォントを指定します。フォントはリモートサーバーまたはユーザー自身のコンピューターにローカルにインストールされたフォントのどちらかから読み込むことができます。 local() 関数が与えられると、ユーザーのコンピューターで探すフォント名を指定し、{{Glossary("user agent", "ユーザーエージェント")}}がそれを見つけることができれば、そのローカルフォントを使用します。そうでなければ、 url() 関数を使用して指定されたフォントリソースをダウンロードして使用します。

+ +

@font-face で独自のフォントを提供できるようになることで、 "web-safe" フォント (つまり、広く利用できると考えられるほど一般的なフォント) と呼ばれる制限なしにコンテンツをデザインすることができます。ローカルにインストールされているフォントを、名前を指定して検索し使用することができる機能により、インターネット接続に頼らなくてもフォントを基本的なものからカスタマイズすることができるようになります。

+ +

url() と local() を両方とも使用することは一般的であり、そうすることでユーザーのインストールされたフォントのコピーが利用できればそれを利用し、ユーザーの端末に見つからない場合はフォントのコピーを代替としてダウンロードすることができます。

+ +

@font-face @-規則は、 CSS の最上位だけでなく、 CSS の条件付き @-規則グループの中でも使用することができます。

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

構文

+ +

記述子

+ +
+
{{cssxref("@font-face/font-display", "font-display")}}
+
フォントのダウンロード及び準備状況に応じて、どのようにフォントフェイスを表示するかを特定します。
+
{{cssxref("@font-face/font-family", "font-family")}}
+
font プロパティの font face 値で使われる名前を指定します。
+
{{cssxref("@font-face/font-stretch", "font-stretch")}}
+
{{cssxref("font-stretch")}} 値です。 Firefox 61 以降 (及びその他の最近のブラウザーの多く) では、font-face で対応している範囲を指定するために、 font-stretch: 50% 200%; のように二つの値を受け付けます。
+
{{cssxref("@font-face/font-style", "font-style")}}
+
{{cssxref("font-style")}} 値です。 Firefox 61 以降 (及びその他の最近のブラウザーの多く) では、font-face で対応している範囲を指定するために、 font-style: oblique 20deg 50deg; のように二つの値を受け付けます。
+
{{cssxref("@font-face/font-weight", "font-weight")}}
+
{{cssxref("font-weight")}} 値です。 Firefox 61 以降 (及びその他の最近のブラウザーの多く) では、font-face で対応している範囲を指定するために、 font-weight: 100 400; のように二つの値を受け付けます。
+
{{cssxref("@font-face/font-variant", "font-variant")}}
+
{{cssxref("font-variant")}} 値です。
+
{{cssxref("font-feature-settings", "font-feature-settings")}}
+
OpenType フォントで高度な印刷機能を制御することができるようにします。
+
{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
+
変化の特徴を表す4文字の軸名を、種類の値と共に指定することにより、 OpenType 又は TrueType フォントの種類を低レベルで制御できます。
+
{{cssxref("@font-face/src", "src")}}
+
+

フォントデータを含むリソースを指定します。これでリモートのフォントファイルの位置又はユーザーのコンピューターのフォント名を指定することができます。

+ +

ブラウザーにフォントのリソースがどの形式であるかのヒントを提供するために — それで最適なものを選択できます — format() 関数の中に形式を含めることができます。

+ + 
src: url(ideal-sans-serif.woff) format("woff"),
+     url(basic-sans-serif.ttf) format("truetype");
+ +

利用可能な形式は、"woff", "woff2", "truetype", "opentype", "embedded-opentype", "svg" です。

+
+
{{cssxref("@font-face/unicode-range", "unicode-range")}}
+
フォントで使用される Unicode コードポイントの範囲です。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

この例は単にダウンロードフォントを指定し、ドキュメントの本文全体に適用します。

+ +

動作例を見る

+ +
<html>
+<head>
+  <title>Web Font Sample</title>
+  <style type="text/css" media="screen, print">
+    @font-face {
+      font-family: "Bitstream Vera Serif Bold";
+      src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
+    }
+
+    body { font-family: "Bitstream Vera Serif Bold", serif }
+  </style>
+</head>
+<body>
+  This is Bitstream Vera Serif Bold.
+</body>
+</html>
+
+ +

この例では、ユーザーのローカルにある "Helvetica Neue Bold" が使用されます。もしユーザーがそのフォントをインストールしていない場合は (二つの異なる名前が試されます)、代わりに "MgOpenModernaBold.ttf" という名前のダウンロードフォントが使用されます。

+ +
@font-face {
+  font-family: MyHelvetica;
+  src: local("Helvetica Neue Bold"),
+       local("HelveticaNeue-Bold"),
+       url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+
+ +

フォントの MIME タイプ

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
形式MIME タイプ
TrueTypefont/ttf
OpenTypefont/otf
Web Open File Formatfont/woff
Web Open File Format 2font/woff2
+ +

メモ

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}{{Spec2('WOFF2.0')}}新しい圧縮アルゴリズムのフォント形式を定義
{{SpecName('WOFF1.0', '', 'WOFF font format')}}{{Spec2('WOFF1.0')}}フォント形式の定義
{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}{{Spec2('CSS3 Fonts')}}初回定義
+ +

ブラウザーの対応

+ +

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

+ +

関連情報

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