1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
---
title: font-variant-alternates
slug: Web/CSS/font-variant-alternates
tags:
- Fuentes CSS
- Propiedad CSS
- Referencia
translation_of: Web/CSS/font-variant-alternates
---
<div>{{CSSRef}}</div>
<h2 id="Resumen">Resumen</h2>
<p>La propiedad CSS <strong><code>font-variant-alternates</code></strong> controla el uso de glifos alternos. Estos glifos alternos pueden ser referenciados por nombres alternativos en {{cssxref("@font-feature-values")}}.</p>
<p>Las reglas-at definen nombres, para un tipo determinado de glifos alternativos (<code>stylistic</code>, <code>styleset</code>, <code>character-variant</code>, <code>swash</code>, <code>ornament</code> o <code>annotation</code>), asociándolos a un valor OpenType dado. Esta propiedad permite utilizar estos nombres de fácil uso (según se defina en {{cssxref("@font-feature-values")}}) dentro de la hoja de estilos.</p>
<p>{{cssinfo}}</p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="brush:css">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);
/* Global values */
font-variant-alternates: initial;
font-variant-alternates: inherit;
font-variant-alternates: unset;
</pre>
<h3 id="Valores">Valores</h3>
<dl>
<dt><code>normal</code></dt>
<dd>Se deshabilita el uso de glifos alternos.</dd>
<dt><code>historical-forms</code></dt>
<dd>Se habilita la muestra de formas históricas , es decir, glifos que eran usados comúnmente en el pasado, pero no en la actualidad. Corresponde al valor de OpenType <code>hist</code>.</dd>
<dt><code><a name="stylistic()"></a>stylistic()</code></dt>
<dd>Esta función habilita la muestra de alternos estilísticos. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde al valor de OpenType <code>salt</code>, como <code>salt 2</code>.</dd>
<dt><code><a name="styleset()"></a>styleset()</code></dt>
<dd>Esta función habilita el uso de un conjunto de alternos estilísticos para caracteres. El parámetro es un nombre de fuente específico mapeado a un número. Corresponde al valor de OpenType <code>ssXY</code>, como <code>ss02</code>.</dd>
<dt><code><a name="character-variant()"></a>character-variant()</code></dt>
<dd>Esta función habilita el uso de un conjunto de alternos estilísticos para caracteres. Es muy similar a <code>styleset()</code>, aunque la variante aquí no crea glifos coherentes a un set de caracteres; los caracteres individuales tendrán estilos indipendientes, no necesariamente coherentes. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde al valor de OpenType <code>cvXY</code>, como <code>cv02</code>.</dd>
<dt><code><a name="swash()"></a>swash()</code></dt>
<dd>Esta función habilita la muestra de glifos de tipografía <a href="http://en.wikipedia.org/wiki/Swash_%28typography%29">swash</a>. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde a los valores de OpenType <code>swsh</code> y <code>cswh</code>, como <code>swsh 2</code> y <code>cswh 2</code>.</dd>
<dt><code><a name="ornaments()"></a>ornaments()</code></dt>
<dd>Esta función habilita la muestra de ornamentas, que son <a href="http://en.wikipedia.org/wiki/Fleuron_%28typography%29">florones</a> y otros glifos de estilo dingbat. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde al valor de OpenType <code>ornm</code>, como <code>ornm 2</code>.
<div class="note"><strong>Nota: </strong>para manteneer la semántica de la fuente, se invita a los diseñadores de fuentes a incluir ornamentas qoe no coincidan con caracteres zingbat de Unicode como variantes de ornamenta al caracter de viñeta (U+2022). Las fuentes bien diseñadas lo harán, aunque muchas otras fuentes no.</div>
</dd>
<dt><code><a name="annotation()"></a>annotation()</code></dt>
<dd>Esta función habilita la muestra de anotaciones, como dígitos circulares o caracteres invertidos. El parámetro es un nombre de fuente específico mapeado a un número. Corresponde al valor de OpenType <code>nalt</code>, como <code>nalt 2</code>.</dd>
</dl>
<h3 id="Sintaxis_formal">Sintaxis formal</h3>
{{csssyntax}}
<h2 id="Ejemplo">Ejemplo</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p>Firefox rocks!</p>
<p class="variant">Firefox rocks!</p>
</pre>
<h3 id="CSS"><span class="pun">CSS</span></h3>
<pre class="brush: css">p.variant {
font-family: Leitura Display Swashes;
font-variant-alternates: swash(2);
}</pre>
<h3 id="Resultado">Resultado</h3>
<p><strong>Nota:</strong> se necesita la fuente Open Type <a href="http://ufonts.com/download/leituradisplay-swashes-opentype/470776.html">Leitura Display Swashes</a> instalada para que este ejemplo funcione</p>
<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/font-variant-alternates') }}</p>
<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', '#propdef-font-variant-alternates', 'font-variant-alternates')}}</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>
<p>{{ CompatibilityTable }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Firefox (Gecko)</th>
<th>Chrome</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{CompatGeckoDesktop("34")}} [1]</td>
<td>{{ CompatUnknown() }}</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] Una implementación experimental estaba disponible desde Gecko 24. Se regía por la preferencia <code>layout.css.font-features.enabled</code>, con valor predeterminado de <code>true</code>, solamente disponible en Nightly y Aurora.</p>
|
