From c3b3861e2d91e1426847dcf987c084ab7d2732f3 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 3 Nov 2021 03:10:57 +0900 Subject: CSS Fonts の変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/css_fonts/index.html | 141 ---------------------------------- files/ja/web/css/css_fonts/index.md | 141 ++++++++++++++++++++++++++++++++++ 2 files changed, 141 insertions(+), 141 deletions(-) delete mode 100644 files/ja/web/css/css_fonts/index.html create mode 100644 files/ja/web/css/css_fonts/index.md (limited to 'files') diff --git a/files/ja/web/css/css_fonts/index.html b/files/ja/web/css/css_fonts/index.html deleted file mode 100644 index c1584ac37f..0000000000 --- a/files/ja/web/css/css_fonts/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: CSS フォント -slug: Web/CSS/CSS_Fonts -tags: - - CSS - - CSS フォント - - Reference - - 概要 -translation_of: Web/CSS/CSS_Fonts ---- -
{{CSSRef}}
- -

CSS フォントは CSS のモジュールの一つで、フォントに関するプロパティを定義し、どのようにフォントリソースを読み取るのかを定義します。これによって、単一の文字に利用できる複数のフォントがある場合、使用するフォントのスタイルを、例えばフォントファミリ、寸法、太さ、行の高さ、グリフの種類を定義することができます。

- -

基本的な例

- -

以下の例は、テキストの段落をスタイル付けする基本的なフォントプロパティの使い方を示します。

- -
p {
-  width: 600px;
-  margin: 0 auto;
-  font-family: "Helvetica Neue", "Arial", sans-serif;
-  font-style: italic;
-  font-weight: 100;
-  font-variant-ligatures: normal;
-  font-size: 2rem;
-  letter-spacing: 1px;
-}
- -
<p>Three hundred years ago<br>
-  I thought I might get some sleep<br>
-  I stretched myself out onna antique bed<br>
-  An' my spirit did a midnite creep</p>
- -

結果は以下のようになります。

- -

{{EmbedLiveSample('Basic_example', '100%', '200')}}

- -

可変フォントの例

- -

たくさんの可変フォントの例を v-fonts.com および axis-praxis.org で見ることができます。詳しい情報と使い方の情報は、可変フォントガイドも参照してください。

- -

リファレンス

- -

プロパティ

- -
- -
- -

@-規則

- -
-
{{cssxref("@font-face")}}
-
-
-
    -
  • {{cssxref("@font-face/font-family", "font-family")}}
    • -
  • {{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}
    • -
  • {{cssxref("@font-face/font-style", "font-style")}}
    • -
  • {{cssxref("@font-face/font-variant", "font-variant")}}
    • -
  • {{cssxref("@font-face/font-weight", "font-weight")}}
    • -
  • {{cssxref("@font-face/font-stretch", "font-stretch")}}
    • -
  • {{cssxref("@font-face/src", "src")}}
    • -
  • {{cssxref("@font-face/unicode-range", "unicode-range")}}
    • -
-
-
-
{{cssxref("@font-feature-values")}}
-
- -

ガイド

- -
-
テキストとフォントのスタイル付けの基礎
-
この初心者向けの学習記事で、基本的なテキストやフォントのスタイル付けを、ウェイト、ファミリとスタイル、 font 一括指定、テキスト配置とその他の効果、行、字間など、詳細にわたって全て通します。
-
OpenType フォント特性ガイド
-
フォント特性またはバリアントは、 OpenType フォントに含まれている様々な字形や文字スタイルを参照します。これらには合字 ('fi' や 'ffl' のような特殊な形の文字の組み合わせ)、カーニング (特定の字形の組み合わせにおける間隔の調整)、分数、数字のスタイル、他にもたくさんあります。これらはすべて OpenType の特性として参照され、特定のプロパティや低水準制御プロパティ — {{cssxref("font-feature-settings")}} を通してウェブ上で使用することができます。この記事は、 CSS で OpenType フォント特性を使用することについて知る必要があるすべてのことを紹介します。
-
可変フォントガイド
-
可変フォントは OpenType フォント仕様書が進化したもので、幅、太さ、スタイルごとに別々のフォントファイルを用意するのではなく、さまざまな種類のフォントを単一のファイルに組み込むことができます。この記事では、可変フォントを使い始めるために必要なことをすべて紹介します。
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Fonts')}}{{Spec2('CSS4 Fonts')}}font-variation-settings (および関連する高水準プロパティ) および font-optical-sizing を追加。
{{SpecName('CSS3 Fonts')}}{{Spec2('CSS3 Fonts')}}font-feature-settings (および関連する高水準プロパティ)
{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#font', '')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの対応

- -

({{cssxref("font-weight")}} や {{cssxref("font-style")}} など) 基本フォントプロパティの多くはブラウザー間で良く対応されていますが、もっと新しいもののいくつかは対応が限られています。全体としてはそれぞれのリファレンスページにあるブラウザーの対応情報を見る必要があります。

diff --git a/files/ja/web/css/css_fonts/index.md b/files/ja/web/css/css_fonts/index.md new file mode 100644 index 0000000000..c1584ac37f --- /dev/null +++ b/files/ja/web/css/css_fonts/index.md @@ -0,0 +1,141 @@ +--- +title: CSS フォント +slug: Web/CSS/CSS_Fonts +tags: + - CSS + - CSS フォント + - Reference + - 概要 +translation_of: Web/CSS/CSS_Fonts +--- +
{{CSSRef}}
+ +

CSS フォントは CSS のモジュールの一つで、フォントに関するプロパティを定義し、どのようにフォントリソースを読み取るのかを定義します。これによって、単一の文字に利用できる複数のフォントがある場合、使用するフォントのスタイルを、例えばフォントファミリ、寸法、太さ、行の高さ、グリフの種類を定義することができます。

+ +

基本的な例

+ +

以下の例は、テキストの段落をスタイル付けする基本的なフォントプロパティの使い方を示します。

+ +
p {
+  width: 600px;
+  margin: 0 auto;
+  font-family: "Helvetica Neue", "Arial", sans-serif;
+  font-style: italic;
+  font-weight: 100;
+  font-variant-ligatures: normal;
+  font-size: 2rem;
+  letter-spacing: 1px;
+}
+ +
<p>Three hundred years ago<br>
+  I thought I might get some sleep<br>
+  I stretched myself out onna antique bed<br>
+  An' my spirit did a midnite creep</p>
+ +

結果は以下のようになります。

+ +

{{EmbedLiveSample('Basic_example', '100%', '200')}}

+ +

可変フォントの例

+ +

たくさんの可変フォントの例を v-fonts.com および axis-praxis.org で見ることができます。詳しい情報と使い方の情報は、可変フォントガイドも参照してください。

+ +

リファレンス

+ +

プロパティ

+ +
+ +
+ +

@-規則

+ +
+
{{cssxref("@font-face")}}
+
+
+
    +
  • {{cssxref("@font-face/font-family", "font-family")}}
    • +
  • {{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}
    • +
  • {{cssxref("@font-face/font-style", "font-style")}}
    • +
  • {{cssxref("@font-face/font-variant", "font-variant")}}
    • +
  • {{cssxref("@font-face/font-weight", "font-weight")}}
    • +
  • {{cssxref("@font-face/font-stretch", "font-stretch")}}
    • +
  • {{cssxref("@font-face/src", "src")}}
    • +
  • {{cssxref("@font-face/unicode-range", "unicode-range")}}
    • +
+
+
+
{{cssxref("@font-feature-values")}}
+
+ +

ガイド

+ +
+
テキストとフォントのスタイル付けの基礎
+
この初心者向けの学習記事で、基本的なテキストやフォントのスタイル付けを、ウェイト、ファミリとスタイル、 font 一括指定、テキスト配置とその他の効果、行、字間など、詳細にわたって全て通します。
+
OpenType フォント特性ガイド
+
フォント特性またはバリアントは、 OpenType フォントに含まれている様々な字形や文字スタイルを参照します。これらには合字 ('fi' や 'ffl' のような特殊な形の文字の組み合わせ)、カーニング (特定の字形の組み合わせにおける間隔の調整)、分数、数字のスタイル、他にもたくさんあります。これらはすべて OpenType の特性として参照され、特定のプロパティや低水準制御プロパティ — {{cssxref("font-feature-settings")}} を通してウェブ上で使用することができます。この記事は、 CSS で OpenType フォント特性を使用することについて知る必要があるすべてのことを紹介します。
+
可変フォントガイド
+
可変フォントは OpenType フォント仕様書が進化したもので、幅、太さ、スタイルごとに別々のフォントファイルを用意するのではなく、さまざまな種類のフォントを単一のファイルに組み込むことができます。この記事では、可変フォントを使い始めるために必要なことをすべて紹介します。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Fonts')}}{{Spec2('CSS4 Fonts')}}font-variation-settings (および関連する高水準プロパティ) および font-optical-sizing を追加。
{{SpecName('CSS3 Fonts')}}{{Spec2('CSS3 Fonts')}}font-feature-settings (および関連する高水準プロパティ)
{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#font', '')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの対応

+ +

({{cssxref("font-weight")}} や {{cssxref("font-style")}} など) 基本フォントプロパティの多くはブラウザー間で良く対応されていますが、もっと新しいもののいくつかは対応が限られています。全体としてはそれぞれのリファレンスページにあるブラウザーの対応情報を見る必要があります。

-- cgit v1.2.3-54-g00ecf