Lección 5: Propiedades de texto y fuentes

Introducción

Las propiedades de texto y fuentes en CSS nos permiten controlar la apariencia del texto en nuestras páginas web. Esto incluye el tipo de fuente, tamaño, estilo, espaciado y más.

Propiedades de fuente

font-family

Especifica la fuente o familia de fuentes para el texto.

CSS

p {
    font-family: Arial, Helvetica, sans-serif;
}

font-size

Define el tamaño de la fuente.

CSS

h1 {
    font-size: 2em;
}

font-weight

Establece el grosor de la fuente.

CSS

strong {
    font-weight: bold; /* o 700 */
}

font-style

Define el estilo de la fuente (normal, italic, oblique).

CSS

em {
    font-style: italic;
}

Propiedades de texto

text-align

Alinea el texto horizontalmente.

CSS

.center {
    text-align: center;
}

line-height

Establece la altura de línea.

CSS

p {
    line-height: 1.6;
}

text-decoration

Añade decoraciones al texto como subrayado.

CSS

a {
    text-decoration: none;
}

text-transform

Transforma el texto (mayúsculas, minúsculas, etc.).

CSS

.uppercase {
    text-transform: uppercase;
}

Fuentes web

Las fuentes web permiten usar fuentes personalizadas en tu sitio web.

@font-face

CSS

@font-face {
    font-family: 'MiFuentePersonalizada';
    src: url('ruta/a/mi-fuente.woff2') format('woff2');
}

Google Fonts

Google Fonts es un servicio popular que proporciona una amplia variedad de fuentes web gratuitas.

HTML

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
CSS

body {
    font-family: 'Roboto', sans-serif;
}

Ejercicio práctico

Crea una página HTML con varios párrafos y encabezados. Aplica diferentes estilos de texto y fuente, incluyendo:

Referencias