From 917858acd763bfb1f5d1e794c4f3bf45d00f3666 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 6 Nov 2021 01:12:30 +0900 Subject: CSS Fonts の各プロパティを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/05 時点の英語版に同期 --- files/ja/web/css/font-style/index.md | 230 ++++++++++------------------------- 1 file changed, 61 insertions(+), 169 deletions(-) (limited to 'files/ja/web/css/font-style') diff --git a/files/ja/web/css/font-style/index.md b/files/ja/web/css/font-style/index.md index 339426e6c0..93a5e965bd 100644 --- a/files/ja/web/css/font-style/index.md +++ b/files/ja/web/css/font-style/index.md @@ -5,24 +5,25 @@ tags: - CSS - CSS フォント - CSS プロパティ - - Reference - - font + - リファレンス - ウェブ + - font + - recipe:css-property +browser-compat: css.properties.font-style translation_of: Web/CSS/font-style --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の font-style プロパティは、フォントが {{cssxref("font-family")}} の中で通常体 (normal)、筆記体 (italic)、斜体 (oblique) のどれでスタイル付けするかを設定します。

+**`font-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、{{cssxref("font-family")}} の中で通常体 (normal)、筆記体 (italic)、斜体 (oblique) のどのスタイルにするか設定します。 -
{{EmbedInteractiveExample("pages/css/font-style.html")}}
+{{EmbedInteractiveExample("pages/css/font-style.html")}} - +**italic** フォントフェイスは通常、本質的に筆記体であり、装飾されていない書体より水平方向の幅が小さいのが一般的です。一方 **oblique** フェイスはたいてい、通常のフェイスを傾けただけです。 italic と oblique のいずれも、通常のフェイスの字形を人工的に傾けることによってシミュレートされます (この制御については {{cssxref("font-synthesis")}} をご覧ください)。 -

italic フォントフェイスは通常、本質的に筆記体であり、スタイル付けされていない書体より水平方向の幅が小さいのが一般的です。一方 oblique フェイスはたいてい、通常のフェイスを傾けただけです。 italic と oblique のいずれも、通常のフェイスのグリフを人工的に傾けることによってシミュレートされます (この制御については {{cssxref("font-synthesis")}} をご覧ください)。

+## 構文 -

構文

- -
font-style: normal;
+```css
+font-style: normal;
 font-style: italic;
 font-style: oblique;
 font-style: oblique 10deg;
@@ -30,196 +31,87 @@ font-style: oblique 10deg;
 /* グローバル値 */
 font-style: inherit;
 font-style: initial;
+font-style: revert;
 font-style: unset;
-
+``` -

font-style プロパティは、以下の一覧から選択した単一のキーワードで指定し、キーワードが oblique であれば任意で角度を含めることができます。

+`font-style` プロパティは、以下の一覧から選択した単一のキーワードで指定し、キーワードが `oblique` であれば任意で角度を含めることができます。 -

値

+### 値 -
-
normal
-
{{Cssxref("font-family")}} の中で normal に分類されているフォントを選択します。
-
italic
-
italic として分類されているフォントを選択します。 italic フェイスが使用できない場合は、代わりに oblique に分類されているフォントを選択します。どちらも利用できない場合は、スタイルは人工的にシミュレートされます。
-
oblique
-
oblique として分類されているフォントを選択します。 oblique フェイスが使用できない場合は、代わりに italic に分類されているフォントを選択します。どちらも利用できない場合は、スタイルは人工的にシミュレートされます。
-
oblique <angle>
-
oblique として分類されているフォントを選択し、加えてテキストの傾きの角度を指定します。選択されたフォントファミリで１つまたは複数の oblique フェイスが利用できる場合、指定した角度に最も近いものが選択されます。 oblique フェイスが利用できない場合、ブラウザーは通常のフェイスを指定した大きさだけ傾けることで、 oblique バージョンを作成します。有効な値は-90以上90以下の角度の値です。角度が指定されない場合、14度の角度が使用されます。正の数では行末に向けて傾け、負の数では行頭に向けて傾けます。
-
- 一般に、要求された角度が14度以上の場合、大きな角度が推奨されます。その他の場合は、より小さい角度が推奨されます (アルゴリズムの詳細は、仕様書の font matching section を参照してください)。
-
+- `normal` + - : {{Cssxref("font-family")}} の中で `normal` に分類されているフォントを選択します。 +- `italic` + - : `italic` として分類されているフォントを選択します。 italic フェイスが使用できない場合は、代わりに `oblique` に分類されているフォントを選択します。どちらも利用できない場合は、スタイルは人工的にシミュレートされます。 +- `oblique` + - : `oblique` として分類されているフォントを選択します。 oblique フェイスが使用できない場合は、代わりに `italic` に分類されているフォントを選択します。どちらも利用できない場合は、スタイルは人工的にシミュレートされます。 +- `oblique` [``](/ja/docs/Web/CSS/angle) -

可変フォント

+ - : `oblique` として分類されているフォントを選択し、加えてテキストの傾きの角度を指定します。選択されたフォントファミリで１つまたは複数の oblique フェイスが利用できる場合、指定した角度に最も近いものが選択されます。 oblique フェイスが利用できない場合、ブラウザーは通常のフェイスを指定した大きさだけ傾けることで、 oblique バージョンを作成します。有効な値は-90以上90以下の角度の値です。角度が指定されない場合、14度の角度が使用されます。正の数では行末に向けて傾け、負の数では行頭に向けて傾けます。 -

可変フォントでは、 oblique フェイスをどれだけ傾けるかの角度を細かく制御することができます。 oblique キーワードに <angle> 修飾子を使用して選択することができます。

+ 一般に、要求された角度が14度以上の場合、大きな角度が推奨されます。その他の場合は、より小さい角度が推奨されます (アルゴリズムの詳細は、仕様書の [font matching section](https://drafts.csswg.org/css-fonts-4/#font-matching-algorithm) を参照してください)。 -

TrueType または OpenType の可変フォントでは、 "slnt" 変数が oblique の傾く角度を様々に実装するために使用され、 "ital" 変数の値が 1 ならば、 italic の値を使用します。 {{cssxref("font-variation-settings")}} を参照してください。

+### 可変フォント -

次の例を動作させるには、 CSS Fonts Level 4 の font-style: oblique が <angle> を受け入れる構文に対応したブラウザーが必要です。

+可変フォントでは、 oblique フェイスをどれだけ傾けるかの角度を細かく制御することができます。 `` 修飾子を `oblique` キーワードに使用して選択することができます。 -
{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}
+TrueType または OpenType の可変フォントでは、 `"slnt"` 変数が oblique の傾く角度を様々に実装するために使用され、 `"ital"` 変数の値が 1 ならば、 italic の値を使用します。 {{cssxref("font-variation-settings")}} を参照してください。 -

HTML

+> **Note:** 次の例を動作させるには、 CSS Fonts Level 4 の `font-style: oblique` が `` を受け入れる構文に対応したブラウザーが必要です。デモは `font-style: oblique 23deg;` を読み込みます。この値を変更すると、テキストの傾きが変わるのを確認することができます。 -
-
<header>
-    <input type="range" id="slant" name="slant" min="-90" max="90" />
-    <label for="slant">Slant</label>
-</header>
-<div class="container">
-    <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
-</div>
-
+{{EmbedGHLiveSample("css-examples/variable-fonts/oblique.html", '100%', 860)}} -

CSS

+## アクセシビリティの考慮 -
/*
-AmstelvarAlpha-VF is created by David Berlow (https://github.com/TypeNetwork/Amstelvar)
-and is used here under the terms of its license:
-https://github.com/TypeNetwork/Amstelvar/blob/master/OFL.txt
-*/
+テキストの長い区間に渡って `font-style` の値を `italic` に設定すると、失読症のような認知問題を抱える人にとって読むのが難しくなる可能性があります。
 
-@font-face {
-  src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf');
-  font-family:'AmstelvarAlpha';
-  font-style: normal;
-}
+- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- [W3C Understanding WCAG 2.1](https://www.w3.org/TR/WCAG21/#visual-presentation)
 
-label {
-  font: 1rem monospace;
-}
+## 公式定義
 
-.container {
-  max-height: 150px;
-  overflow: scroll;
-}
+{{cssinfo}}
 
-.sample {
-  font: 2rem 'AmstelvarAlpha', sans-serif;
-}
+## 形式文法
 
-
+{{csssyntax}} - -

JavaScript

- -
let slantLabel = document.querySelector('label[for="slant"]');
-let slantInput = document.querySelector('#slant');
-let sampleText = document.querySelector('.sample');
-
-function update() {
-  let slant = `oblique ${slantInput.value}deg`;
-  slantLabel.textContent = `font-style: ${slant};`;
-  sampleText.style.fontStyle = slant;
+.oblique {
+  font-style: oblique;
 }
+```
 
-slantInput.addEventListener('input', update);
+{{ EmbedLiveSample('Font_styles') }}
 
-update();
-
-
+## 仕様書 -

形式文法

+{{Specifications}} -{{csssyntax}} - -

例

+## ブラウザーの互換性 -

フォントスタイル

+{{Compat}} - +## 関連情報 -
.normal {
-  font-style: normal;
-}
-
-.italic {
-  font-style: italic;
-}
-
-.oblique {
-  font-style: oblique;
-}
- -

{{ EmbedLiveSample('Font_styles') }}

- -

アクセシビリティの考慮事項

- -

テキストの長い区間に渡って font-style の値を italic に設定すると、失読症のような認知問題を抱える人にとって読むのが難しくなる可能性があります。

- - - -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-style-prop', 'font-style')}}{{Spec2('CSS4 Fonts')}}oblique の後で角度を指定できるようになった
{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}{{Spec2('CSS3 Fonts')}}変更なし
{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#font-style', 'font-style')}}{{Spec2('CSS1')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

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

+- {{cssxref("font-style")}} +- {{cssxref("font-weight")}} +- [基本的なテキストとフォントの装飾](/ja/docs/Learn/CSS/Styling_text/Fundamentals) -- cgit v1.2.3-54-g00ecf