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-style/index.html | 227 +++++++++++++++++++++++++++++++++ 1 file changed, 227 insertions(+) create mode 100644 files/ja/web/css/font-style/index.html (limited to 'files/ja/web/css/font-style/index.html') diff --git a/files/ja/web/css/font-style/index.html b/files/ja/web/css/font-style/index.html new file mode 100644 index 0000000000..2bea52a0bb --- /dev/null +++ b/files/ja/web/css/font-style/index.html @@ -0,0 +1,227 @@ +--- +title: font-style +slug: Web/CSS/font-style +tags: + - CSS + - CSS フォント + - CSS プロパティ + - Reference + - font + - ウェブ +translation_of: Web/CSS/font-style +--- +
{{CSSRef}}
+ +

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

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

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

+ +

構文

+ +
font-style: normal;
+font-style: italic;
+font-style: oblique;
+font-style: oblique 10deg;
+
+/* グローバル値 */
+font-style: inherit;
+font-style: initial;
+font-style: unset;
+
+ +

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 を参照してください)。
+
+ +

可変フォント

+ +

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

+ +

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

+ +

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

+ +
{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}
+ +

HTML

+ +
+
<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>
+
+ +

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-face {
+  src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf');
+  font-family:'AmstelvarAlpha';
+  font-style: normal;
+}
+
+label {
+  font: 1rem monospace;
+}
+
+.container {
+  max-height: 150px;
+  overflow: scroll;
+}
+
+.sample {
+  font: 2rem 'AmstelvarAlpha', sans-serif;
+}
+
+
+ + + +

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;
+}
+
+slantInput.addEventListener('input', update);
+
+update();
+
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

フォントスタイル

+ + + +
.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")}}

-- cgit v1.2.3-54-g00ecf