diff options
Diffstat (limited to 'files/es/web/css/@font-feature-values/index.html')
-rw-r--r-- | files/es/web/css/@font-feature-values/index.html | 134 |
1 files changed, 134 insertions, 0 deletions
diff --git a/files/es/web/css/@font-feature-values/index.html b/files/es/web/css/@font-feature-values/index.html new file mode 100644 index 0000000000..7966f7433e --- /dev/null +++ b/files/es/web/css/@font-feature-values/index.html @@ -0,0 +1,134 @@ +--- +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> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<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> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("34")}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("34")}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Implementación experimental de las extensiones CSS Fonts Nivel 3 estaba disponible desde Gecko 24. Estaba regido por la preferencia <code>layout.css.font-features.enabled</code> con valor predeterminado <code>true</code> en Nightly y Aurora solamente.</p> + +<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> |