Fuente CSS
En este capítulo, hablaremos sobre las fuentes.
Las propiedades CSS de fuente se usan para definir el tamaño, la familia tipográfica, el grosor y el estilo del texto.
La propiedad CSS font 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.
Familia tipográfica
Usamos la propiedad font-family para especificar la fuente del texto. Esto define el nombre de la fuente utilizada en la página web.
CSS Font
p {
font-family: Arial, sans-serif;
}Como puedes ver, hemos aplicado la propiedad font-family a nuestra etiqueta <p>. Distinguimos dos tipos de familias:
- familia genérica - un grupo de familias tipográficas con un aspecto similar (como "Serif" o "Sans-serif")
- familia tipográfica - una familia tipográfica concreta (como "Times New Roman" o "Arial")
Cuando el nombre de una familia tipográfica consta de más de una palabra, enciérralo entre comillas (por ejemplo, "Times New Roman"). También se recomienda proporcionar una familia tipográfica de respaldo en caso de que el navegador no admita la primera.
Estilo de fuente
Usamos la propiedad font-style principalmente para mostrar texto en cursiva.
Los valores más usados para la propiedad font-style son:
normal, que muestra el texto normalmente,italic, que muestra el texto en cursiva,oblique, que “inclina” el texto.
Ejemplo de la propiedad font-style:
Ejemplo con la propiedad CSS font-style|CSS Font|W3Docs
<!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 será font-style: normal, incluso sin escribir este valor.
Tamaño de fuente
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 (a menudo 16px por defecto). Los píxeles (px) son la unidad más utilizada.
Ejemplo de la propiedad font-size:
Ejemplo con la propiedad CSS font-size|CSS Font|W3Docs
<!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 debes comprobarlo por tu cuenta. Puedes hacerlo con nuestro editor HTML en línea haz clic aquí.
Variante de fuente
La propiedad font-variant te permite establecer el texto como normal o versalitas.
El valor small-caps convierte las letras minúsculas en mayúsculas, pero las muestra en un tamaño más pequeño que las letras mayúsculas originales.
Ejemplo de la propiedad font-variant:
Ejemplo con la propiedad CSS font-variant|CSS Font|W3Docs
<!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>Grosor de fuente
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 usados para la propiedad font-weight son:
normalbold
Los valores también pueden especificarse como números.
Ejemplo de la propiedad font-weight:
Ejemplo con la propiedad CSS font-weight|CSS Font|W3Docs
<!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.
Practice
Which of the following statements are true regarding CSS fonts?