font

  • Enlace amigable (slug) de la revisión: CSS/font
  • Título de la revisión: font
  • Id de la revisión: 166620
  • Creada:
  • Creador: Nathymig
  • ¿Es la revisión actual? No
  • Comentario Sigo más tarde

Contenido de la revisión

<< Volver

Resumen

La propiedad {{template.Cssxref("font")}} es un atajo para establecer los valores para las propiedades: {{template.Cssxref("font-style")}}, {{template.Cssxref("font-variant")}}, {{template.Cssxref("font-weight")}}, {{template.Cssxref("font-size")}}, {{template.Cssxref("line-height")}} y {{template.Cssxref("font-family")}} de una sola vez, en una hoja de estilo.

  • {{template.Cssxref("initial", "Valor inicial")}}: ver las propiedades individuales.
  • Se aplica a: todos los elementos.
  • {{template.Cssxref("inheritance")}}: sí
  • Porcentajes: N/A
  • Media: {{template.Xref_cssvisual()}}
  • {{template.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: {{template.Cssxref("inherit")}}

Valores

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

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

También se pueden especificar tipos de letra del sistema usando la propiedad {{template.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 (ej. 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 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

{{template.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, el estilo de letra a italic, el tamaño de letra a large y la familia tipográfica a serif. */
p { font: bold italic large serif }

Notas

Las partes {{template.Cssxref("font-size")}} y {{template.Cssxref("font-family")}} del atajo son obligatorias. Omitirlas causa un error de sintaxis y la declaración CSS será completamente ignorada.

Las propiedades a las que no se les establezca un valor serán establecidas a su valor por defecto, que es normal. Las propiedades que se pueden omitir son: ({{template.Cssxref("font-style")}}, {{template.Cssxref("font-variant")}}, {{template.Cssxref("font-weight")}}, y {{template.Cssxref("line-height")}}).

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

Especificaciones

  • CSS 1
  • CSS 2 (para{{template.Cssxref("font-size-adjust")}})
  • CSS 2.1
  • css3-ui (para los valores del sistema {{mediawiki.external('nuevo')}})

Compatibilidad entre navegadores

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

Ver también

{{wiki.template('CSS_Reference:Fonts')}}


{{ wiki.languages( { "fr": "fr/CSS/font", "pl": "pl/CSS/font", "en": "en/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 name="Resumen"> Resumen </h3>
<p>La propiedad {{template.Cssxref("font")}} es un atajo para establecer los valores para las propiedades: {{template.Cssxref("font-style")}}, {{template.Cssxref("font-variant")}}, {{template.Cssxref("font-weight")}}, {{template.Cssxref("font-size")}}, {{template.Cssxref("line-height")}} y {{template.Cssxref("font-family")}} de una sola vez, en una hoja de estilo.
</p>
<ul><li> {{template.Cssxref("initial", "Valor inicial")}}: ver las propiedades individuales.
</li><li> Se aplica a: todos los elementos.
</li><li> {{template.Cssxref("inheritance")}}: sí
</li><li> Porcentajes: N/A
</li><li> Media: {{template.Xref_cssvisual()}}
</li><li> {{template.Cssxref("computed value", "Valor calculado")}}:
</li></ul>
<h3 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> {{template.Cssxref("inherit")}}
</p>
<h3 name="Valores"> Valores </h3>
<p>La propiedad {{template.Cssxref("font")}} establece los valores individuales tal como especificado y define las otras a su valor inicial. 
</p><p>Ver las propiedades: {{template.Cssxref("font-style")}}, {{template.Cssxref("font-variant")}}, {{template.Cssxref("font-weight")}}, {{template.Cssxref("font-size")}}  y {{template.Cssxref("font-family")}}.
</p><p>También se pueden especificar tipos de letra del sistema usando la propiedad {{template.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 (ej. 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 controles <i>small control</i>.
</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 name="Ejemplos"> Ejemplos </h3>
<p>{{template.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, el estilo de letra a italic, el tamaño de letra a large y la familia tipográfica a serif. */
p { font: bold italic large serif }
</pre>
<h3 name="Notas"> Notas </h3>
<p>Las partes {{template.Cssxref("font-size")}} y {{template.Cssxref("font-family")}} del <i>atajo</i> son obligatorias. Omitirlas causa un error de sintaxis y la declaración CSS será completamente ignorada.
</p><p>Las propiedades a las que no se les establezca un valor serán establecidas a su valor por defecto, que es <code>normal</code>. Las propiedades que se pueden omitir son: ({{template.Cssxref("font-style")}}, {{template.Cssxref("font-variant")}}, {{template.Cssxref("font-weight")}}, y {{template.Cssxref("line-height")}}).
</p><p>La propiedad {{template.Cssxref("font-size-adjust")}} también se establece a su valor inicial (<code>none</code>) cuando se usa la propiedad <i>atajo</i> {{template.Cssxref("font")}}.
</p>
<h3 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{{template.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 valores del sistema {{mediawiki.external('nuevo')}})
</li></ul>
<h3 name="Compatibilidad_entre_navegadores"> Compatibilidad entre navegadores </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 name="Ver_tambi.C3.A9n"> Ver también </h3>
<p>{{wiki.template('CSS_Reference:Fonts')}}
</p><p><br>
</p>
<div class="noinclude">
</div>
{{ wiki.languages( { "fr": "fr/CSS/font", "pl": "pl/CSS/font", "en": "en/CSS/font" } ) }}
Revertir a esta revisión