font

  • Enlace amigable (slug) de la revisión: CSS/font
  • Título de la revisión: font
  • Id de la revisión: 166623
  • Creada:
  • Creador: Mgjbot
  • ¿Es la revisión actual?
  • Comentario robot Añadido: [[ja:CSS:font]] <<langbot>>

Contenido de la revisión

<< Volver

Resumen

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.

  • {{ Cssxref("initial", "Valor inicial") }}: ver las propiedades individuales.
  • Se aplica a: todos los elementos.
  • {{ Cssxref("inheritance", "Valor heredado") }}: sí
  • Porcentajes: N/A
  • Media: {{ Xref_cssvisual() }}
  • {{ Cssxref("computed value", "Valor calculado") }}:

Sintaxis

font: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>

font: caption | icon | menu | message-box | small-caption | status-bar | -moz-window | -moz-document | -moz-workspace | -moz-desktop | -moz-info | -moz-dialog | -moz-button | -moz-pull-down-menu | -moz-list | -moz-field

font: {{ Cssxref("inherit") }}

Valores

La propiedad {{ Cssxref("font") }} establece los valores individuales tal como se especifica y a las otras su valor inicial.

Ver las propiedades individuales: {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }} y {{ Cssxref("font-family") }}.

También se pueden especificar los tipos de letra del sistema usando la propiedad {{ Cssxref("font") }}, en lugar de tener que especificar cada propiedad individualmente:

caption 
el tipo de letra para elementos de control (por ejemplo: botones, cajas de selección, etc.).
icon 
el tipo de letra usado para etiquetar iconos.
menu 
el tipo de letra usado en menús (por ejemplo: barra de menú o menús desplegables).
message-box 
el tipo de letra usado en cajas de diálogo.
small-caption 
el tipo de letra usado para etiquetar pequeños controles (small control).
status-bar 
el tipo de letra usado en la barra de estado de la ventana.
-moz-window 
-moz-document 
-moz-workspace 
-moz-desktop 
-moz-info 
-moz-dialog 
-moz-button 
-moz-pull-down-menu 
-moz-list 
-moz-field 

Ejemplos

{{ CSSRefExampleLink("font") }}

/* 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 }
/* 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 }
/* 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 }

Notas

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.

Si no se establece un valor concreto, las propiedades tomarán el valor por defecto: normal. Las propiedades que se pueden omitir son: ({{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }} y {{ Cssxref("line-height") }}).

La propiedad {{ Cssxref("font-size-adjust") }} también se establece a su valor inicial (none) cuando se usa la propiedad general {{ Cssxref("font") }}.

Especificaciones

Compatibilidades

Navegador Versión mínima
Internet Explorer 3
Netscape 4
Opera 3.5

Ver también

{{ CSS_Reference:Fonts() }}


Categorías

Interwiki Languages

{{ languages( { "en": "en/CSS/font", "fr": "fr/CSS/font", "ja": "ja/CSS/font", "pl": "pl/CSS/font" } ) }}

Fuente de la revisión

<p>
</p><p>&lt;&lt; <a href="es/Gu%c3%ada_de_referencia_de_CSS">Volver</a>
</p>
<h3 id="Resumen" name="Resumen"> Resumen </h3>
<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>
<ul><li> {{ Cssxref("initial", "Valor inicial") }}: ver las propiedades individuales.
</li><li> Se aplica a: todos los elementos.
</li><li> {{ Cssxref("inheritance", "Valor heredado") }}: sí
</li><li> Porcentajes: N/A
</li><li> Media: {{ Xref_cssvisual() }}
</li><li> {{ Cssxref("computed value", "Valor calculado") }}:
</li></ul>
<h3 id="Sintaxis" name="Sintaxis"> Sintaxis </h3>
<p><code>font:</code> [ &lt;<a href="es/CSS/font-style">font-style</a>&gt; || &lt;<a href="es/CSS/font-variant">font-variant</a>&gt; || &lt;<a href="es/CSS/font-weight">font-weight</a>&gt; ]? &lt;<a href="es/CSS/font-size">font-size</a>&gt; [ / &lt;<a href="es/CSS/line-height">line-height</a>&gt; ]? &lt;<a href="es/CSS/font-family">font-family</a>&gt;
</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") }}, <i>en lugar</i> 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>
<h3 id="Ejemplos" name="Ejemplos"> Ejemplos </h3>
<p>{{ CSSRefExampleLink("font") }}
</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>
<h3 id="Notas" name="Notas"> Notas </h3>
<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>
<h3 id="Especificaciones" name="Especificaciones"> Especificaciones </h3>
<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>
<h3 id="Compatibilidades" name="Compatibilidades"> Compatibilidades </h3>
<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>
<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n"> Ver también </h3>
<p>{{ CSS_Reference:Fonts() }}
</p><p><br>
</p>
<div class="noinclude">
<p><span class="comment">Categorías</span>
</p><p><span class="comment">Interwiki Languages</span>
</p>
</div>
{{ languages( { "en": "en/CSS/font", "fr": "fr/CSS/font", "ja": "ja/CSS/font", "pl": "pl/CSS/font" } ) }}
Revertir a esta revisión