path: root/files/ja/web/css/font-style/index.html

---
title: font-style
slug: Web/CSS/font-style
tags:
  - CSS
  - CSS フォント
  - CSS プロパティ
  - Reference
  - font
  - ウェブ
translation_of: Web/CSS/font-style
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>font-style</code></strong> プロパティは、フォントが {{cssxref("font-family")}} の中で通常体 (normal)、筆記体 (italic)、斜体 (oblique) のどれでスタイル付けするかを設定します。</span></p>

<div>{{EmbedInteractiveExample("pages/css/font-style.html")}}</div>

<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>

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

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="brush:css no-line-numbers">font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;

/* グローバル値 */
font-style: inherit;
font-style: initial;
font-style: unset;
</pre>

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

<h3 id="Values" name="Values">値</h3>

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

<h3 id="Variable_fonts" name="Variable_fonts">可変フォント</h3>

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

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

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

<div style="border: 10px solid #f5f9fa; padding: 1rem;">{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}</div>

<h4 id="HTML">HTML</h4>

<div id="variable-font-example">
<pre class="brush: html">&lt;header&gt;
    &lt;input type="range" id="slant" name="slant" min="-90" max="90" /&gt;
    &lt;label for="slant"&gt;Slant&lt;/label&gt;
&lt;/header&gt;
&lt;div class="container"&gt;
    &lt;p class="sample"&gt;...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.&lt;/p&gt;
&lt;/div&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">/*
AmstelvarAlpha-VF is created by <span class="col-11 mr-2 text-gray-dark">David Berlow</span> (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;
}

</pre>

<div class="hidden">
<pre class="brush: css">html, body {
  max-height: 100vh;
  max-width: 100vw;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
}

header {
  margin-bottom: 1.5rem;
}

.container {
  flex-grow: 1;
}

.container &gt; p {
  margin-top: 0;
  margin-bottom: 0;
}
</pre>
</div>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js">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();
</pre>
</div>

<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>

{{csssyntax}}

<h2 id="Example" name="Example">例</h2>

<h3 id="Font_styles" name="Font_styles">フォントスタイル</h3>

<div class="hidden">
<pre class="brush: html">&lt;p class="normal"&gt;This paragraph is normal.&lt;/p&gt;
&lt;p class="italic"&gt;This paragraph is italic.&lt;/p&gt;
&lt;p class="oblique"&gt;This paragraph is oblique.&lt;/p&gt;
</pre>
</div>

<pre class="brush: css">.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}</pre>

<p>{{ EmbedLiveSample('Font_styles') }}</p>

<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>

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

<ul>
 <li><a href="/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">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
 <li><a href="https://www.w3.org/TR/WCAG21/#visual-presentation">W3C Understanding WCAG 2.1</a></li>
</ul>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Fonts', '#font-style-prop', 'font-style')}}</td>
   <td>{{Spec2('CSS4 Fonts')}}</td>
   <td><code>oblique</code> の後で角度を指定できるようになった</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}</td>
   <td>{{Spec2('CSS3 Fonts')}}</td>
   <td>変更なし</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>変更なし</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#font-style', 'font-style')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>

<p>{{Compat("css.properties.font-style")}}</p>