From 7f720267d2bb8e16420786a6edc18838a61f181a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 24 Sep 2021 23:50:49 +0900 Subject: Web/CSS/font-family の変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/font-family/index.html | 241 -------------------------------- files/ja/web/css/font-family/index.md | 241 ++++++++++++++++++++++++++++++++ 2 files changed, 241 insertions(+), 241 deletions(-) delete mode 100644 files/ja/web/css/font-family/index.html create mode 100644 files/ja/web/css/font-family/index.md diff --git a/files/ja/web/css/font-family/index.html b/files/ja/web/css/font-family/index.html deleted file mode 100644 index c8092db361..0000000000 --- a/files/ja/web/css/font-family/index.html +++ /dev/null @@ -1,241 +0,0 @@ ---- -title: font-family -slug: Web/CSS/font-family -tags: - - CSS - - CSS フォント - - CSS プロパティ - - Reference - - font - - font-family -translation_of: Web/CSS/font-family ---- -
{{CSSRef}}
- -

CSS の font-family プロパティは、選択した要素に対して、フォントファミリ名や総称ファミリ名の優先順位リストを指定することができます。

- -
{{EmbedInteractiveExample("pages/css/font-family.html")}}
- - - -

複数の値をカンマで区切って、代替フォントを示します。ブラウザーはリストの中で最初のインストール済み、または {{CSSxRef("@font-face")}} @-規則を使用してダウンロード可能なフォントを選択します。

- -

一括指定プロパティの {{CSSxRef("font")}} を使用すると、 font-size やその他のフォント関連プロパティを一度に設定できるのでふつうは便利です。

- -

指定されたフォントが利用可能であるという保証はないので、 font-family リストの中に、総称ファミリを少なくとも 1 つ、常に追加しておくべきです。総称ファミリを使うことで、必要ならば、ブラウザーで受け付け可能な代替フォントを選択させることができます。

- -

font-family プロパティでは、優先順位の高い方から低い方へ、フォントのリストを指定します。フォント選択は、ユーザーのシステム上に存在する、リスト中の一番最初に指定されたフォントを選んで終わるとは限りません。むしろ、フォント選択は 1 文字ずつ行われます。なぜなら、利用可能なフォントが、その文字を表示するのに必要なグリフを欠いている場合には、そのフォントよりも順位の低い利用可能なフォントが試行されるからです (ただし、これは Internet Explorer 6 およびそれ以前では動作しません)。フォントが一部のスタイル、種類、大きさでのみ利用可能な場合、これらのプロパティがどのフォントファミリを選択するかに影響する可能性があります。

- -

構文

- -
/* フォントファミリ名および総称ファミリ名 */
-font-family: Gill Sans Extrabold, sans-serif;
-font-family: "Goudy Bookletter 1911", sans-serif;
-
-/* 総称ファミリ名のみ */
-font-family: serif;
-font-family: sans-serif;
-font-family: monospace;
-font-family: cursive;
-font-family: fantasy;
-font-family: system-ui;
-font-family: ui-serif;
-font-family: ui-sans-serif;
-font-family: ui-monospace;
-font-family: ui-rounded;
-font-family: emoji;
-font-family: math;
-font-family: fangsong;
-
-/* グローバル値 */
-font-family: inherit;
-font-family: initial;
-font-family: unset;
-
- -

font-family プロパティは1つ以上のフォントファミリを、カンマで区切って指定します。それぞれのフォントファミリは <family-name> または <generic-name> の値です。

- -

以下の例は二つのフォントファミリを並べており、最初は <family-name> で二番目は <generic-name> です。

- -
font-family: Gill Sans Extrabold, sans-serif;
- -

値

- -
-
<family-name>
-
フォントファミリの名称。例えば、 "Times" や "Helvetica" はフォントファミリです。空白を含むフォントファミリ名は、引用符で囲む必要があります。
-
<generic-name>
-
-

総称フォントファミリは代替メカニズムです。このメカニズムによって、指定されたフォントがどれも利用できなかった場合、スタイルシート製作者の意図を多少なりとも保つことができます。総称ファミリ名はキーワードであり、引用符で囲んではいけません。総称フォントファミリは、フォントファミリ名リストの最終選択肢である必要があります。以下のキーワードが定義されています。

- -
-
serif
-
終わりが止めや払い、または実際の活字のセリフの形をした角を持つ字形です。
- 例: Lucida Bright, Lucida Fax, Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif
-
sans-serif
-
平たい角の端を持つ字形です。
- 例: "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif
-
monospace
-
すべての字が同じ幅を持つ字形です。
- 例: "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace
-
cursive
-
筆記体フォントの字形には、一般に、続け書き、もしくは、イタリック体の特性以上に、その他の筆記体の特性があります。字形は、部分的に、あるいは完全につながっていて、仕上がりは、印刷された活字というよりは、手書きのペンまたは毛筆で書かれたように見えます。
- 例: "Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive
-
fantasy
-
fantasy フォントは、遊び心に溢れた文字表現を含む、主として装飾的なフォントです。
- 例: Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.
-
system-ui
-
指定されたプラットフォームの既定のユーザーインターフェイスフォントからグリフを取ります。文字の伝統は世界で様々であるため、この総称は他の総称にきれいに一致しない文字フォントを提供します。
-
ui-serif
-
ユーザーインターフェイス既定のセリフ付きフォントです。
-
ui-sans-serif
-
ユーザーインターフェイス既定のセリフなしフォントです。
-
ui-monospace
-
ユーザーインターフェイス既定の等幅フォントです。
-
ui-rounded
-
ユーザーインターフェイス既定の丸い特性を持ったフォントです。
-
math
-
これは、数式を表現するための特別なスタイル上の概念のためのものです。上付き文字と下付き文字、複数行をまたぐ括弧、式の入れ子、明確な意味を持つ二重のグリフなどです。
-
emoji
-
絵文字を表示するために特別にデザインされたフォントです。
-
fangsong
-
セリフ風の Song と手書き風の Kai の形の間にある中国語の文字の特定のスタイルです。このスタイルは政府文書によく使用されます。
-
-
-
- -

妥当なファミリ名

- -

フォントファミリ名は、引用符で囲まれた文字列か、引用符で囲まれていない 1 つ以上の識別子でなければなりません。これは、引用符で囲まれていないフォントファミリ名において、各トークンの冒頭に区切り記号文字や数字がある場合、エスケープしなければならないということを意味します。

- -

例えば、以下の宣言は妥当です:

- -
font-family: Gill Sans Extrabold, sans-serif;
-font-family: "Goudy Bookletter 1911", sans-serif;
- -

以下の宣言は無効です。

- -
font-family: Goudy Bookletter 1911, sans-serif;
-font-family: Red/Black, sans-serif;
-font-family: "Lucida" Grande, sans-serif;
-font-family: Ahem!, sans-serif;
-font-family: test@foo, sans-serif;
-font-family: #POUND, sans-serif;
-font-family: Hawaii 5-0, sans-serif;
- -

形式文法

- -{{CSSSyntax}} - -

例

- -

いくつかのよくあるフォントファミリ

- -
.serif {
-  font-family: Times, Times New Roman, Georgia, serif;
-}
-
-.sansserif {
-  font-family: Verdana, Arial, Helvetica, sans-serif;
-}
-
-.monospace {
-  font-family: Lucida Console, Courier, monospace;
-}
-
-.cursive {
-  font-family: cursive;
-}
-
-.fantasy {
-  font-family: fantasy;
-}
-
-.emoji {
-  font-family: emoji;
-}
-
-.math {
-  font-family: math;
-}
-
-.fangsong {
-  font-family: fangsong;
-}
-
- - - -

{{EmbedLiveSample("Some_common_font_families", 600, 120)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Fonts", "#generic-font-families", "generic font families")}}{{Spec2("CSS4 Fonts")}}新しい総称フォントファミリを追加。特に、 system-ui, ui-serif, ui-sans-serif, ui-monospace, ui-rounded, emoji, math, fangsong
{{SpecName("CSS3 Fonts", "#font-family-prop", "font-family")}}{{Spec2("CSS3 Fonts")}}特に変更なし
{{SpecName("CSS2.1", "fonts.html#propdef-font-family", "font-family")}}{{Spec2("CSS2.1")}}特に変更なし
{{SpecName("CSS1", "#font-family", "font-family")}}{{Spec2("CSS1")}}初回定義
- -

{{CSSInfo}}

- -

ブラウザーの互換性

- -

{{Compat("css.properties.font-family")}}

diff --git a/files/ja/web/css/font-family/index.md b/files/ja/web/css/font-family/index.md new file mode 100644 index 0000000000..c8092db361 --- /dev/null +++ b/files/ja/web/css/font-family/index.md @@ -0,0 +1,241 @@ +--- +title: font-family +slug: Web/CSS/font-family +tags: + - CSS + - CSS フォント + - CSS プロパティ + - Reference + - font + - font-family +translation_of: Web/CSS/font-family +--- +
{{CSSRef}}
+ +

CSS の font-family プロパティは、選択した要素に対して、フォントファミリ名や総称ファミリ名の優先順位リストを指定することができます。

+ +
{{EmbedInteractiveExample("pages/css/font-family.html")}}
+ + + +

複数の値をカンマで区切って、代替フォントを示します。ブラウザーはリストの中で最初のインストール済み、または {{CSSxRef("@font-face")}} @-規則を使用してダウンロード可能なフォントを選択します。

+ +

一括指定プロパティの {{CSSxRef("font")}} を使用すると、 font-size やその他のフォント関連プロパティを一度に設定できるのでふつうは便利です。

+ +

指定されたフォントが利用可能であるという保証はないので、 font-family リストの中に、総称ファミリを少なくとも 1 つ、常に追加しておくべきです。総称ファミリを使うことで、必要ならば、ブラウザーで受け付け可能な代替フォントを選択させることができます。

+ +

font-family プロパティでは、優先順位の高い方から低い方へ、フォントのリストを指定します。フォント選択は、ユーザーのシステム上に存在する、リスト中の一番最初に指定されたフォントを選んで終わるとは限りません。むしろ、フォント選択は 1 文字ずつ行われます。なぜなら、利用可能なフォントが、その文字を表示するのに必要なグリフを欠いている場合には、そのフォントよりも順位の低い利用可能なフォントが試行されるからです (ただし、これは Internet Explorer 6 およびそれ以前では動作しません)。フォントが一部のスタイル、種類、大きさでのみ利用可能な場合、これらのプロパティがどのフォントファミリを選択するかに影響する可能性があります。

+ +

構文

+ +
/* フォントファミリ名および総称ファミリ名 */
+font-family: Gill Sans Extrabold, sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;
+
+/* 総称ファミリ名のみ */
+font-family: serif;
+font-family: sans-serif;
+font-family: monospace;
+font-family: cursive;
+font-family: fantasy;
+font-family: system-ui;
+font-family: ui-serif;
+font-family: ui-sans-serif;
+font-family: ui-monospace;
+font-family: ui-rounded;
+font-family: emoji;
+font-family: math;
+font-family: fangsong;
+
+/* グローバル値 */
+font-family: inherit;
+font-family: initial;
+font-family: unset;
+
+ +

font-family プロパティは1つ以上のフォントファミリを、カンマで区切って指定します。それぞれのフォントファミリは <family-name> または <generic-name> の値です。

+ +

以下の例は二つのフォントファミリを並べており、最初は <family-name> で二番目は <generic-name> です。

+ +
font-family: Gill Sans Extrabold, sans-serif;
+ +

値

+ +
+
<family-name>
+
フォントファミリの名称。例えば、 "Times" や "Helvetica" はフォントファミリです。空白を含むフォントファミリ名は、引用符で囲む必要があります。
+
<generic-name>
+
+

総称フォントファミリは代替メカニズムです。このメカニズムによって、指定されたフォントがどれも利用できなかった場合、スタイルシート製作者の意図を多少なりとも保つことができます。総称ファミリ名はキーワードであり、引用符で囲んではいけません。総称フォントファミリは、フォントファミリ名リストの最終選択肢である必要があります。以下のキーワードが定義されています。

+ +
+
serif
+
終わりが止めや払い、または実際の活字のセリフの形をした角を持つ字形です。
+ 例: Lucida Bright, Lucida Fax, Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif
+
sans-serif
+
平たい角の端を持つ字形です。
+ 例: "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif
+
monospace
+
すべての字が同じ幅を持つ字形です。
+ 例: "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace
+
cursive
+
筆記体フォントの字形には、一般に、続け書き、もしくは、イタリック体の特性以上に、その他の筆記体の特性があります。字形は、部分的に、あるいは完全につながっていて、仕上がりは、印刷された活字というよりは、手書きのペンまたは毛筆で書かれたように見えます。
+ 例: "Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive
+
fantasy
+
fantasy フォントは、遊び心に溢れた文字表現を含む、主として装飾的なフォントです。
+ 例: Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.
+
system-ui
+
指定されたプラットフォームの既定のユーザーインターフェイスフォントからグリフを取ります。文字の伝統は世界で様々であるため、この総称は他の総称にきれいに一致しない文字フォントを提供します。
+
ui-serif
+
ユーザーインターフェイス既定のセリフ付きフォントです。
+
ui-sans-serif
+
ユーザーインターフェイス既定のセリフなしフォントです。
+
ui-monospace
+
ユーザーインターフェイス既定の等幅フォントです。
+
ui-rounded
+
ユーザーインターフェイス既定の丸い特性を持ったフォントです。
+
math
+
これは、数式を表現するための特別なスタイル上の概念のためのものです。上付き文字と下付き文字、複数行をまたぐ括弧、式の入れ子、明確な意味を持つ二重のグリフなどです。
+
emoji
+
絵文字を表示するために特別にデザインされたフォントです。
+
fangsong
+
セリフ風の Song と手書き風の Kai の形の間にある中国語の文字の特定のスタイルです。このスタイルは政府文書によく使用されます。
+
+
+
+ +

妥当なファミリ名

+ +

フォントファミリ名は、引用符で囲まれた文字列か、引用符で囲まれていない 1 つ以上の識別子でなければなりません。これは、引用符で囲まれていないフォントファミリ名において、各トークンの冒頭に区切り記号文字や数字がある場合、エスケープしなければならないということを意味します。

+ +

例えば、以下の宣言は妥当です:

+ +
font-family: Gill Sans Extrabold, sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;
+ +

以下の宣言は無効です。

+ +
font-family: Goudy Bookletter 1911, sans-serif;
+font-family: Red/Black, sans-serif;
+font-family: "Lucida" Grande, sans-serif;
+font-family: Ahem!, sans-serif;
+font-family: test@foo, sans-serif;
+font-family: #POUND, sans-serif;
+font-family: Hawaii 5-0, sans-serif;
+ +

形式文法

+ +{{CSSSyntax}} + +

例

+ +

いくつかのよくあるフォントファミリ

+ +
.serif {
+  font-family: Times, Times New Roman, Georgia, serif;
+}
+
+.sansserif {
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+}
+
+.monospace {
+  font-family: Lucida Console, Courier, monospace;
+}
+
+.cursive {
+  font-family: cursive;
+}
+
+.fantasy {
+  font-family: fantasy;
+}
+
+.emoji {
+  font-family: emoji;
+}
+
+.math {
+  font-family: math;
+}
+
+.fangsong {
+  font-family: fangsong;
+}
+
+ + + +

{{EmbedLiveSample("Some_common_font_families", 600, 120)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Fonts", "#generic-font-families", "generic font families")}}{{Spec2("CSS4 Fonts")}}新しい総称フォントファミリを追加。特に、 system-ui, ui-serif, ui-sans-serif, ui-monospace, ui-rounded, emoji, math, fangsong
{{SpecName("CSS3 Fonts", "#font-family-prop", "font-family")}}{{Spec2("CSS3 Fonts")}}特に変更なし
{{SpecName("CSS2.1", "fonts.html#propdef-font-family", "font-family")}}{{Spec2("CSS2.1")}}特に変更なし
{{SpecName("CSS1", "#font-family", "font-family")}}{{Spec2("CSS1")}}初回定義
+ +

{{CSSInfo}}

+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.font-family")}}

-- cgit v1.2.3-54-g00ecf