---
title: font-variant-alternates
slug: Web/CSS/font-variant-alternates
tags:
  - CSS
  - CSS Fonts
  - CSS Property
  - Reference
translation_of: Web/CSS/font-variant-alternates
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary"><strong><code>font-variant-alternates</code></strong>CSSプロパティは代替グリフの使用を制御します。代替グリフは{{cssxref("@font-feature-values")}}で定義された代替名で参照される可能性があります。</span></p>

<pre class="brush:css no-line-numbers">/* 予約語 */
font-variant-alternates: normal;
font-variant-alternates: historical-forms;

/* 函数表記値 */
font-variant-alternates: stylistic(user-defined-ident);
font-variant-alternates: styleset(user-defined-ident);
font-variant-alternates: character-variant(user-defined-ident);
font-variant-alternates: swash(user-defined-ident);
font-variant-alternates: ornaments(user-defined-ident);
font-variant-alternates: annotation(user-defined-ident);
font-variant-alternates: swash(ident1) annotation(ident2);

/* 大域値 */
font-variant-alternates: initial;
font-variant-alternates: inherit;
font-variant-alternates: unset;
</pre>

<p>{{cssxref("@font-feature-values")}}@規則は，OpenType機能と関連付けられた代替グリフ函数（<code>stylistic</code>，<code>styleset</code>，<code>character-variant</code>，<code>swash</code>，<code>ornament</code>，又は<code>annotation</code>）用の名前を定義できます。本プロパティを用いて，（{{cssxref("@font-feature-values")}}で定義された）対人可読な名前をスタイルシートで使うことができます。</p>

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

<h2 id="書式">書式</h2>

<p>本プロパティは二つの形式の内一方を取ります:</p>

<ul>
 <li>予約語<code>normal</code></li>
 <li>一又は複数の後掲した他の予約語及び函数（空白区切り・順不同）</li>
</ul>

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

<dl>
 <dt><code>normal</code></dt>
 <dd>この予約語は代替グリフを無効にします。</dd>
 <dt><code>historical-forms</code></dt>
 <dd>この予約語は歴史的形式――過去には一般的だったけれども今日そうではないグリフ――を有効にします。OpenTypeの<code>hist</code>機能タグに相当します。</dd>
 <dt><code><a name="stylistic()"></a>stylistic()</code></dt>
 <dd>この函数は個々の文字に対する様式的代替 (stylistic alternates) を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>salt</code>機能タグ（例: <code>salt 2</code>）に相当します。</dd>
 <dt><code><a name="styleset()"></a>styleset()</code></dt>
 <dd>この函数は一連の文字に対する様式的代替を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>ssXY</code>機能タグ（例: <code>ss02</code>）に相当します。</dd>
 <dt><code><a name="character-variant()"></a>character-variant()</code></dt>
 <dd>この函数は文字に対する様式的代替を有効にします。<code>styleset()</code>に似ていますが，一連の文字に対して一貫したグリフを作成せず，個々の文字が持つ様式は独立しており整合する必要はありません。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>cvXY</code>機能タグ（例: <code>cv02</code>）に相当します。</dd>
 <dt><code><a name="swash()"></a>swash()</code></dt>
 <dd>この函数は<a href="https://en.wikipedia.org/wiki/Swash_%28typography%29">先端装飾</a>〔訳注: グリフの先端を流線的に延長する装飾。<a href="http://www.fishtailstudio.com/others/gd201601.pdf#page=252">訳語参考</a>〕グリフを有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>swsh</code>及び<code>cswh</code>機能タグ（例: <code>swsh 2</code>及び<code>cswh 2</code>）に相当します。</dd>
 <dt><code><a name="ornaments()"></a>ornaments()</code></dt>
 <dd>この函数は<a href="https://ja.wikipedia.org/wiki/%E3%83%95%E3%83%AB%E3%83%BC%E3%83%AD%E3%83%B3">花形装飾活字</a>及び他の飾り文字グリフのような装飾を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>ornm</code>機能タグ（例: <code>ornm 2</code>）に相当します。
 <div class="note"><strong>注意:</strong> 文義を維持する目的で，フォント設計者は，箇条書き記号 (U+2022) の装飾的変形としてのUnicodeの飾り文字とマッチしないような装飾を含めるべきです。幾つかの既存のフォントがこの助言に従っていないことに留意して下さい。</div>
 </dd>
 <dt><code><a name="annotation()"></a>annotation()</code></dt>
 <dd>この函数は丸数字又は鏡文字などの表記を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeの<code>nalt</code>機能タグ（例: <code>nalt 2</code>）に相当します。</dd>
</dl>

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

{{csssyntax}}

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

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;p&gt;Firefox rocks!&lt;/p&gt;
&lt;p class="variant"&gt;Firefox rocks!&lt;/p&gt;
</pre>

<h3 id="CSS"><span class="pun">CSS</span></h3>

<pre class="brush: css">@font-feature-values "Leitura Display Swashes" {
    @swash { fancy: 1 }
}

p {
  font-size: 1.5rem;
}

.variant {
  font-family: Leitura Display Swashes;
  font-variant-alternates: swash(fancy);
}</pre>

<h3 id="結果">結果</h3>

<div class="note">
<p><strong>注意:</strong> この例を正しく閲覧するには，OpenTypeフォント<em>Leitura Display Swashes</em>を導入する必要があります。<a href="http://fontsgeek.com/fonts/Leitura-Display-Swashes">fontsgeek.com</a>等から試験目的の無償版が入手できます。</p>
</div>

<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/font-variant-alternates') }}</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-variant-alternates', 'font-variant-alternates')}}</td>
   <td>{{Spec2('CSS3 Fonts')}}</td>
   <td>初期定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザ互換性</h2>

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

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