CSS Font
Usa las propiedades de fuente CSS para estilizar texto, ajustar su tamaño, grosor y familia tipográfica. Aprende a usar los estilos de fuente en CSS.
La tipografía es una de las primeras cosas que un lector nota en una página, y CSS te ofrece un control preciso sobre ella. Las propiedades de fuente de CSS definen la tipografía (familia de fuente), el tamaño, el grosor (negrita) y el estilo (como la cursiva) de tu texto.
Este capítulo presenta cada propiedad de fuente individual, muestra un ejemplo ejecutable para cada una y luego explica la abreviatura font que te permite establecerlas todas en una sola declaración.
La propiedad font de CSS es una abreviatura que combina varias propiedades de fuente. Aquí explicaremos las propiedades individuales que la componen:
Al añadir texto o enlaces a una página web, los estilizamos usando estas propiedades. Vamos a explorarlas en detalle.
Font Family
Usamos la propiedad font-family para especificar la fuente del texto. Esto define el nombre de la fuente utilizada en la página web.
Fuente CSS
p {
font-family: Arial, sans-serif;
}Como puedes ver, hemos aplicado la propiedad font-family a nuestra etiqueta <p>. Diferenciamos dos tipos de familias:
- familia genérica - un grupo de familias de fuentes con un aspecto similar (como "Serif" o "Sans-serif")
- familia de fuente - una familia tipográfica concreta (como "Times New Roman" o "Arial")
Cuando el nombre de una familia de fuente consta de más de una palabra, enciérralo entre comillas (p. ej., "Times New Roman"). También se recomienda proporcionar una fuente alternativa en caso de que el navegador no admita la primera.
Font Style
Usamos la propiedad font-style principalmente para mostrar texto en cursiva.
Los valores más utilizados para la propiedad font-style son:
normal, que muestra el texto de forma normal,italic, que muestra el texto en cursiva,oblique, que "inclina" el texto.
Ejemplo de la propiedad font-style:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="font-style:normal">This is paragraph with font-style property with normal value.</p>
<p style="font-style:italic">This is paragraph with font-style property with italic value.</p>
<p style="font-style:oblique">This is paragraph with font-style property with oblique value.</p>
</body>
</html>Por defecto, nuestro texto tendrá font-style: normal, incluso sin escribir este valor.
Font Size
Usamos la propiedad font-size para establecer el tamaño del texto.
Los valores pueden especificarse en píxeles, puntos, em, rem, etc. Puedes encontrar la lista completa en la sección font-size. Ten en cuenta que 1em equivale al tamaño de fuente calculado del elemento padre (generalmente 16px por defecto). Los píxeles (px) son la unidad más utilizada.
Ejemplo de la propiedad font-size:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h3 style="font-size:40px;"> Some heading with font-size property.</h3>
<p style="font-size:25px;"> Some paragraph with font-size property.</p>
<a style="font-size:2em;"> Some link with font-size property.</a>
</body>
</html>También deberías comprobarlo por ti mismo. Puedes hacerlo con nuestro editor HTML en línea haz clic aquí.
Font Variant
La propiedad font-variant te permite establecer el texto en normal o versalitas.
El valor small-caps convierte las letras minúsculas en mayúsculas, pero las muestra a un tamaño menor que las letras mayúsculas originales.
Ejemplo de la propiedad font-variant:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.smallcaps {
font-variant: small-caps;
}
</style>
</head>
<body>
<h2>Font-variant property example</h2>
<p>Here we used a normal text as you can see.</p>
<p class="smallcaps">But We Used A Text With Small-Caps Here.</p>
</body>
</html>Font Weight
Ahora, aprendamos a hacer que el texto normal sea más grueso, ya que los encabezados son negrita por defecto.
Usamos la propiedad font-weight para esto.
Los valores más utilizados para la propiedad font-weight son:
normalbold
Los valores también pueden especificarse como números.
Ejemplo de la propiedad font-weight:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="font-weight:900">Some paragraph with the font-weight property with value bold.</p>
<p style="font-weight:normal">Some paragraph with the font-weight property with value normal.</p>
<p style="font-weight:bold">Some paragraph with the font-weight property with value bold.</p>
</body>
</html>Como se mencionó, los valores numéricos van de 100 a 900. El valor 400 corresponde a normal, y 700 corresponde a bold. A medida que el número aumenta de 100 a 900, la fuente se vuelve más gruesa.
La abreviatura font
En lugar de escribir cada propiedad en su propia línea, puedes establecerlas todas a la vez con la abreviatura font. Esto hace tu hoja de estilos más corta y agrupa las declaraciones relacionadas.
El orden de los valores importa. La sintaxis es:
font: font-style font-variant font-weight font-size/line-height font-family;Algunas reglas a recordar:
font-sizeyfont-familyson obligatorias. Si falta cualquiera de ellas, toda la declaración se ignora.font-style,font-variantyfont-weightson opcionales y deben ir antes defont-size.line-heightes opcional y se escribe después defont-size, separado por una barra (/).- Cualquier valor que omitas se restablece a su valor por defecto, por lo que la abreviatura es una forma práctica de limpiar declaraciones individuales anteriores.
Aquí el mismo párrafo estilizado con propiedades individuales y luego con la abreviatura:
/* Longhand */
p {
font-style: italic;
font-weight: bold;
font-size: 18px;
line-height: 1.5;
font-family: Georgia, serif;
}
/* Equivalent shorthand */
p {
font: italic bold 18px/1.5 Georgia, serif;
}Para más detalles y ejemplos, consulta el capítulo font.