---
title: font-feature-settings
slug: Web/CSS/font-feature-settings
tags:
  - CSS
  - CSS フォント
  - CSS プロパティ
  - リファレンス
translation_of: Web/CSS/font-feature-settings
---
<div>{{CSSRef}}</div>

<p>CSS の <strong><code>font-feature-settings</code></strong> プロパティは、 OpenType フォントの拡張タイポグラフィの特性を制御します。</p>

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

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

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

<pre class="brush:css no-line-numbers">/* 既定の設定を使用する */
font-feature-settings: normal;

/* OpenType の特性タグの値を設定する */
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;
font-feature-settings: "smcp", "swsh" 2;

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

<div class="note"><strong>メモ:</strong> 可能な限り、ウェブの作者は代わりに {{cssxref("font-variant")}} 一括指定プロパティ、又は関連する個別指定プロパティである {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}} プロパティを使うべきです。<br>
<br>
これらは <code>font-feature-settings</code> よりも、もっと効率的で、予想でき、理解できる結果をもたらし、 <code>font-feature-settings</code> は、 OpenType フォント特性を有効またはアクセスするための他の方法が存在しない特殊なケースを処理するように設計された低レベルの機能です。特に、スモールキャップの表現に <code>font-feature-settings</code> を使うべきではありません。</div>

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

<dl>
 <dt><code>normal</code></dt>
 <dd>テキストは既定の設定で配置されます。</dd>
 <dt><code>&lt;feature-tag-value&gt;</code></dt>
 <dd>テキストの描画時、 OpenType の特性タグ値のリストがテキストレイアウトエンジンに渡され、フォントの機能を有効化または無効化します。タグは常に 4 文字の ASCII 文字の {{cssxref("&lt;string&gt;")}} です。文字数がこれより少ないか多い場合、もしくはコードポイント U+20 - U+7E の範囲外の文字を含む場合、プロパティ全体が無効になります。<br>
 値は正の整数です。キーワード <code>on</code> と <code>off</code> はそれぞれ <code>1</code> と <code>0</code> の別名です。値が設定されていなければ、既定値は <code>1</code> です。 非真偽値の OpenType 特性 (例: <a href="http://www.microsoft.com/typography/otspec/features_pt.htm#salt">stylistic alternates</a>) では、この値は選ばれる特定のグリフを意味します。真偽値の特性はオンとオフを切り替えます。</dd>
</dl>

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

{{csssyntax}}

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

<pre class="brush:css">/* use small-cap alternate glyphs */
.smallcaps { font-feature-settings: "smcp" on; }

/* convert both upper and lowercase to small caps (affects punctuation also) */
.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }

/* use zeros with a slash through them to differentiate from "O" */

.nicezero { font-feature-settings: "zero"; }

/* enable historical forms */
.hist { font-feature-settings: "hist"; }

/* disable common ligatures, usually on by default */
.noligs { font-feature-settings: "liga" 0; }

/* enable tabular (monospaced) figures */
td.tabular { font-feature-settings: "tnum"; }

/* enable automatic fractions */
.fractions { font-feature-settings: "frac"; }

/* use the second available swash character */
.swash { font-feature-settings: "swsh" 2; }

/* enable stylistic set 7 */
.fancystyle {
  font-family: Gabriola; /* available on Windows 7, and on Mac OS */
  font-feature-settings: "ss07";
}
</pre>

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

<h2 id="仕様書">仕様書</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('CSS3 Fonts', '#propdef-font-feature-settings', 'font-feature-settings')}}</td>
   <td>{{Spec2('CSS3 Fonts')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

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

<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>

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

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="http://www.microsoft.com/typography/otspec/featurelist.htm" title="http://www.microsoft.com/typography/otspec/featurelist.htm">OpenType Feature Tags</a> list</li>
 <li><a href="http://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx" title="http://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx">Using the whole font</a> (The -moz syntax is the old one. On Gecko, use the -ms syntax but with -moz).</li>
</ul>