---
title: '@font-feature-values'
slug: Web/CSS/@font-feature-values
tags:
  - CSS
  - Fuentes
  - Referencia
  - Regla-at
translation_of: Web/CSS/@font-feature-values
---
<div>{{CSSRef}}</div>

<h2 id="Resumen">Resumen</h2>

<p>La <a href="/es/docs/Web/CSS/At-rule" title="At-rule">regla-at</a> <a href="/es/docs/Web/CSS" title="CSS">CSS</a> <strong><code>@font-feature-values</code></strong> permite a los autores usar un nombre común de {{cssxref("font-variant-alternates")}} para características activadas de distintas formas en OpenType. Permite simplificar el código CSS cuando se usan distintas fuentes.</p>

<pre class="brush: css">@font-feature-values Font One { /* Cómo activar nice-style en Font One */
  @styleset {
    nice-style: 12;
  }
}

@font-feature-values Font Two { /* Cómo activar nice-style en Font Two */
  @styleset {
    nice-style: 4;
  }
}

…

.nice-look { font-variant-alternates: styleset(nice-style); } /* Independiente de la fuente */
</pre>

<p>La regla-at <code>@font-feature-values</code> debe ser usada en la parte superior de la hoja de estilos, pero también dentro de <a href="/es/docs/Web/CSS/At-rule#Grupos_de_Reglas_Condicionales" title="CSS/At-rule#Conditional_Group_Rules">Grupos de reglas condicionales</a>.</p>

<h2 id="Sintaxis">Sintaxis</h2>

<h3 id="Bloques_de_valores_de_características">Bloques de valores de características</h3>

<dl>
 <dt><a name="@swash"><code>@swash</code></a></dt>
 <dd>Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "swash()", "#swash()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de swash permite solo un valor: <code>ident1: 2</code> es válido con <code>ident2: 2 4</code> no lo es.</dd>
 <dt><a name="@annotation"><code>@annotation</code></a></dt>
 <dd>Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "annotation()", "#annotation()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de annotation permite solo un valor: <code>ident1: 2</code> es válido con <code>ident2: 2 4</code> no lo es.</dd>
 <dt><a name="@ornaments"><code>@ornaments</code></a></dt>
 <dd>Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "ornaments()", "#ornaments()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de ornaments permite solo un valor: <code>ident1: 2</code> es válido con <code>ident2: 2 4</code> no lo es.</dd>
 <dt><a name="@stylistic"><code>@stylistic</code></a></dt>
 <dd>Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "stylistic()", "#stylistic()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de stylistic permite solo un valor: <code>ident1: 2</code> es válido con <code>ident2: 2 4</code> no lo es.</dd>
 <dt><a name="@styleset"><code>@styleset</code></a></dt>
 <dd>Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "styleset()", "#styleset()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de stylset permite una cantidad ilimitada de valores: <code>ident1: 2 4 12 1</code> corresponden a los valores OpenType <code>ss02</code>, <code>ss04</code>, <code>ss12</code>, <code>ss01</code>. Nótese que los valores superiores a <code>99</code> son válidos, pero no corresponden a ningún valor OpenType y serán ignorados.</dd>
 <dt><a name="@character-variant"><code>@character-variant</code></a></dt>
 <dd>Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de character-variant permite uno o dos valores: <code>ident1: 2</code>  corresponde a <code>cv02=1</code> y <code>ident2: 2 4</code> corresponde a <code>cv02)4</code> e <code>ident2: 2 4 5</code> no es válido.</dd>
</dl>

<h3 id="Sintaxis_formal">Sintaxis formal</h3>

{{csssyntax}}

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estatus</th>
   <th scope="col">Comentarios</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Fonts', '#font-feature-values', '@font-feature-values')}}</td>
   <td>{{Spec2('CSS3 Fonts')}}</td>
   <td>Definición inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2>

{{Compat("css.at-rules.font-feature-values")}}

<h2 id="Véase_también">Véase también</h2>

<ul>
 <li>La propiedad {{cssxref("font-variant-alternates")}} que usa valores definidos por esta regla-at.</li>
</ul>