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
|
---
title: font
slug: Web/CSS/font
tags:
- CSS
- 'CSS:Referencias'
- Todas_las_Categorías
translation_of: Web/CSS/font
---
<p>{{CSSRef}}</p>
<h2 id="Resumen" name="Resumen">Resumen</h2>
<p>La propiedad {{ Cssxref("font") }} permite establecer de una sola vez los valores para todas las propiedades: {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{ Cssxref("line-height") }} y {{ Cssxref("font-family") }} en una hoja de estilo.</p>
<p>{{cssinfo}}</p>
<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>
<p><code>font:</code> [ <<a href="es/CSS/font-style">font-style</a>> || <<a href="es/CSS/font-variant">font-variant</a>> || <<a href="es/CSS/font-weight">font-weight</a>> ]? <<a href="es/CSS/font-size">font-size</a>> [ / <<a href="es/CSS/line-height">line-height</a>> ]? <<a href="es/CSS/font-family">font-family</a>></p>
<p><code>font:</code> <code>caption</code> | <code>icon</code> | <code>menu</code> | <code>message-box</code> | <code>small-caption</code> | <code>status-bar</code> | <code>-moz-window</code> | <code>-moz-document</code> | <code>-moz-workspace</code> | <code>-moz-desktop</code> | <code>-moz-info</code> | <code>-moz-dialog</code> | <code>-moz-button</code> | <code>-moz-pull-down-menu</code> | <code>-moz-list</code> | <code>-moz-field</code></p>
<p><code>font:</code> {{ Cssxref("inherit") }}</p>
<h3 id="Valores" name="Valores">Valores</h3>
<p>La propiedad {{ Cssxref("font") }} establece los valores individuales tal como se especifica y a las otras su valor inicial.</p>
<p>Ver las propiedades individuales: {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }} y {{ Cssxref("font-family") }}.</p>
<p>También se pueden especificar los tipos de letra del sistema usando la propiedad {{ Cssxref("font") }},<em>en lugar</em> de tener que especificar cada propiedad individualmente:</p>
<dl>
<dt>caption </dt>
<dd>el tipo de letra para elementos de control (por ejemplo: botones, cajas de selección, etc.).</dd>
<dt>icon </dt>
<dd>el tipo de letra usado para etiquetar iconos.</dd>
<dt>menu </dt>
<dd>el tipo de letra usado en menús (por ejemplo: barra de menú o menús desplegables).</dd>
<dt>message-box </dt>
<dd>el tipo de letra usado en cajas de diálogo.</dd>
<dt>small-caption </dt>
<dd>el tipo de letra usado para etiquetar pequeños controles (<small>small control</small>).</dd>
<dt>status-bar </dt>
<dd>el tipo de letra usado en la barra de estado de la ventana.</dd>
<dt>-moz-window </dt>
<dd> </dd>
<dt>-moz-document </dt>
<dd> </dd>
<dt>-moz-workspace </dt>
<dd> </dd>
<dt>-moz-desktop </dt>
<dd> </dd>
<dt>-moz-info </dt>
<dd> </dd>
<dt>-moz-dialog </dt>
<dd> </dd>
<dt>-moz-button </dt>
<dd> </dd>
<dt>-moz-pull-down-menu </dt>
<dd> </dd>
<dt>-moz-list </dt>
<dd> </dd>
<dt>-moz-field </dt>
<dd> </dd>
</dl>
<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>
<p><a href="/samples/cssref/font.html">Ver El Ejemplo Vivo</a></p>
<pre>/* Ajusta el tamaño de letra a 12pt y el alto de línea a 14pt. La familia tipográfica es sans-serif */
p { font: 12pt/14pt sans-serif }
</pre>
<pre>/* Ajusta el tamaño de letra al 80% del elemento padre o al tamaño por defecto (si no hay elemento padre) y la familia tipográfica a sans-serif */
p { font: 80% sans-serif }
</pre>
<pre>/* Ajusta el peso tipográfico a '''bold''' (negrita), el estilo de letra a ''italic'' (cursiva), el tamaño de letra a large (grande) y la familia a serif. */
p { font: bold italic large serif }
</pre>
<h2 id="Notas" name="Notas">Notas</h2>
<p>Las partes {{ Cssxref("font-size") }} y {{ Cssxref("font-family") }} de {{ Cssxref("font") }} son obligatorias. Omitirlas causa un error de sintaxis y la declaración CSS será completamente ignorada.</p>
<p>Si no se establece un valor concreto, las propiedades tomarán el valor por defecto: <code>normal</code>. Las propiedades que se pueden omitir son: ({{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }} y {{ Cssxref("line-height") }}).</p>
<p>La propiedad {{ Cssxref("font-size-adjust") }} también se establece a su valor inicial (<code>none</code>) cuando se usa la propiedad general {{ Cssxref("font") }}.</p>
<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2>
<ul>
<li><a class="external" href="http://www.w3.org/TR/CSS1#font">CSS 1</a></li>
<li><a class="external" href="http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#propdef-font">CSS 2</a> (para {{ Cssxref("font-size-adjust") }})</li>
<li><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font">CSS 2.1</a></li>
<li><a class="external" href="http://www.w3.org/TR/css3-ui/#font">css3-ui</a> (para los nuevos valores de fuentes de sistema])</li>
</ul>
<h2 id="Compatibilidades" name="Compatibilidades">Compatibilidades</h2>
<table class="standard-table">
<tbody>
<tr>
<th>Navegador</th>
<th>Versión mínima</th>
</tr>
<tr>
<td>Internet Explorer</td>
<td>3</td>
</tr>
<tr>
<td>Netscape</td>
<td>4</td>
</tr>
<tr>
<td>Opera</td>
<td>3.5</td>
</tr>
</tbody>
</table>
|
