El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En esta lección, aprenderemos sobre las propiedades de fuentes en CSS, que nos permiten controlar la apariencia del texto en nuestras páginas web. Estas propiedades incluyen la familia de fuentes, el tamaño, el estilo, el peso y más. Vamos a desglosar cada una de estas propiedades y ver ejemplos prácticos de cómo usarlas.

Familia de Fuentes

La propiedad font-family se utiliza para especificar la familia de fuentes de un texto. Puedes listar varias fuentes como una lista de respaldo en caso de que la primera no esté disponible.

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

En este ejemplo, si "Arial" no está disponible, el navegador intentará usar "Helvetica". Si ninguna de las dos está disponible, usará una fuente sans-serif genérica.

Ejercicio

Aplica la propiedad font-family a un párrafo utilizando las fuentes "Georgia", "Times New Roman" y una fuente serif genérica.

Tamaño de Fuente

La propiedad font-size se utiliza para especificar el tamaño del texto. Puedes usar diferentes unidades como píxeles (px), em, rem, porcentajes (%), etc.

h1 {
    font-size: 24px;
}

p {
    font-size: 1.5em;
}

Ejercicio

Cambia el tamaño de la fuente de un encabezado h2 a 2rem.

Estilo de Fuente

La propiedad font-style se utiliza para aplicar estilos como cursiva o normal al texto.

em {
    font-style: italic;
}

p {
    font-style: normal;
}

Ejercicio

Aplica el estilo de fuente cursiva a un párrafo utilizando la propiedad font-style.

Peso de Fuente

La propiedad font-weight se utiliza para especificar el grosor del texto. Los valores pueden ser palabras clave como normal, bold, bolder, lighter, o valores numéricos entre 100 y 900.

strong {
    font-weight: bold;
}

p {
    font-weight: 300;
}

Ejercicio

Cambia el peso de la fuente de un encabezado h3 a 700.

Variante de Fuente

La propiedad font-variant se utiliza para aplicar variantes de fuente como small-caps.

p {
    font-variant: small-caps;
}

Ejercicio

Aplica la variante de fuente small-caps a un párrafo.

Altura de Línea

La propiedad line-height se utiliza para especificar la altura de la línea del texto. Esto puede mejorar la legibilidad del texto.

p {
    line-height: 1.6;
}

Ejercicio

Cambia la altura de línea de un párrafo a 1.8.

Ejercicios Prácticos

Ejercicio 1

Crea un archivo HTML con el siguiente contenido:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Propiedades de Fuentes</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Propiedades de Fuentes en CSS</h1>
    <p>Este es un párrafo de ejemplo para practicar las propiedades de fuentes en CSS.</p>
    <p><em>Este texto está en cursiva.</em></p>
    <p><strong>Este texto está en negrita.</strong></p>
</body>
</html>

Crea un archivo CSS styles.css y aplica las siguientes propiedades:

Cambia la familia de fuentes del párrafo a "Georgia", "Times New Roman" y una fuente serif genérica.
Cambia el tamaño de la fuente del encabezado h1 a 2rem.
Aplica el estilo de fuente cursiva al segundo párrafo.
Cambia el peso de la fuente del tercer párrafo a 700.
Aplica la variante de fuente small-caps al primer párrafo.
Cambia la altura de línea del primer párrafo a 1.8.

Solución

h1 {
    font-size: 2rem;
}

p {
    font-family: "Georgia", "Times New Roman", serif;
    line-height: 1.8;
}

p:nth-of-type(2) {
    font-style: italic;
}

p:nth-of-type(3) {
    font-weight: 700;
}

p:first-of-type {
    font-variant: small-caps;
}

Conclusión

En esta lección, hemos aprendido sobre las diferentes propiedades de fuentes en CSS y cómo aplicarlas para controlar la apariencia del texto en nuestras páginas web. Estas propiedades incluyen la familia de fuentes, el tamaño, el estilo, el peso, la variante y la altura de línea. Practicar con estos ejemplos y ejercicios te ayudará a dominar el uso de fuentes en CSS.

En la próxima lección, exploraremos cómo integrar Google Fonts en nuestros proyectos para ampliar aún más nuestras opciones tipográficas. ¡Sigue practicando y nos vemos en la siguiente lección!

Propiedades de Fuentes

Contenido

Familia de Fuentes

Ejercicio

Tamaño de Fuente

Ejercicio

Estilo de Fuente

Ejercicio

Peso de Fuente

Ejercicio

Variante de Fuente

Ejercicio

Altura de Línea

Ejercicio

Ejercicios Prácticos

Ejercicio 1

Solución

Conclusión

Maestría en CSS: De Principiante a Avanzado

Módulo 1: Introducción a CSS

Módulo 2: Estilización de Texto y Fuentes

Módulo 3: Modelo de Caja y Diseño

Módulo 4: Posicionamiento y Flotación

Módulo 5: Flexbox

Módulo 6: CSS Grid

Módulo 7: Técnicas Avanzadas de CSS

Módulo 8: Diseño Responsivo

Módulo 9: Preprocesadores y Frameworks

Módulo 10: Mejores Prácticas y Optimización

Módulo 11: Proyecto: Construyendo un Sitio Web Responsivo