Summary  
This chapter explains how to use CSS font properties—font-family, font-size, font-weight, font-style—and the ::first-letter pseudo-class to control and decorate text appearance.

General domain of usage  
Web design

Watch this video to see how different CSS font properties—such as font-family, font-size, font-weight, and font-style—change the appearance of text on a web page. You'll also learn how the ::first-letter pseudo-class can be used for decorative effects. Use simple css examples. Do not provide full html document stucture. Focus on css mainly

Las fuentes influyen significativamente en el tono y la legibilidad de una página web.
En este capítulo, se exploran las propiedades CSS más utilizadas relacionadas con las fuentes: `font-family`, `font-size`, `font-weight` y `font-style`.


Todos los ejemplos utilizan el mismo texto para mostrar cómo estas propiedades modifican la apariencia.

Nota

## font-family
La propiedad `font-family` define qué tipografía se utiliza para mostrar el texto.
```css
p {
  font-family: 'Montserrat', Arial, sans-serif;
}
```
Se pueden listar varias fuentes como alternativas, separadas por comas. Si la primera fuente no está disponible, el navegador utiliza la siguiente en la lista. Se recomienda incluir siempre una alternativa genérica como: `serif`, `sans-serif`, `monospace`.

## font-size
La propiedad `font-size` controla el tamaño con el que aparece el texto.
```css
p {
  font-size: 16px;
}
```
Unidades comunes:
- `px`: tamaño fijo;
- `em`: relativo al elemento padre;
- `rem`: relativo al elemento raíz.

## font-weight
Controla el grosor del texto. Valores numéricos: `100–900`. Palabras clave: `normal`, `bold`, `lighter`.

## font-style
Especifica el estilo del texto: `normal`, `italic` o `oblique`.

## Pseudo-clase ::first-letter
`::first-letter` selecciona la primera letra de un elemento (normalmente un párrafo o encabezado), permitiendo aplicar efectos decorativos o estilizados.
```css
selector::first-letter {
 /* some styles */
}
```
Ejecuta el siguiente ejemplo para observar su funcionamiento.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJhcnRpY2xlIj4KICAgICAgPGgyIGNsYXNzPSJ0aXRsZSI+VGhlIFBvd2VyIG9mIFN0b3JpZXM8L2gyPgogICAgICA8cCBjbGFzcz0ibGVhZCI+CiAgICAgICAgU3RvcmllcyBjb25uZWN0IHVzLiBUaGV5IHNoYXBlIGhvdyB3ZSBzZWUgdGhlIHdvcmxkLCB1bmRlcnN0YW5kIGVhY2gKICAgICAgICBvdGhlciwgYW5kIHJlbWVtYmVyIG91ciBwYXN0LiBBIHdlbGwtdG9sZCBzdG9yeSBjYW4gbW92ZSBoZWFydHMsIGNoYW5nZQogICAgICAgIG1pbmRzLCBhbmQgc3BhcmsgYWN0aW9uLgogICAgICA8L3A+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogQ3VycmVudCBmb2N1cyAqLwoubGVhZDo6Zmlyc3QtbGV0dGVyIHsKICBmb250LXNpemU6IDNyZW07CiAgZm9udC13ZWlnaHQ6IGJvbGQ7CiAgY29sb3I6IGRhcmtyZWQ7CiAgZmxvYXQ6IGxlZnQ7CiAgbGluZS1oZWlnaHQ6IDE7CiAgcGFkZGluZy1yaWdodDogOHB4OwogIHBhZGRpbmctdG9wOiA0cHg7Cn0KCi8qIEFkZGl0aW9uYWwgc3R5bGVzIGZvciBiZXR0ZXIgYXBwZWFyYW5jZSAobm90IHRoZSBjdXJyZW50IGZvY3VzKSAqLwpib2R5IHsKICBmb250LWZhbWlseTogJ01lcnJpd2VhdGhlcicsIHNlcmlmOwogIGJhY2tncm91bmQtY29sb3I6ICNmOWY5Zjk7CiAgbWFyZ2luOiAwOwogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKfQoKLmFydGljbGUgewogIGJhY2tncm91bmQtY29sb3I6IHdoaXRlOwogIGJvcmRlcjogMXB4IGRhc2hlZCBkYXJrc2FsbW9uOwogIHBhZGRpbmc6IDMwcHggMjVweDsKICB3aWR0aDogNTAwcHg7CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIGJveC1zaGFkb3c6IDJweCAycHggOHB4IHJnYmEoMCwgMCwgMCwgMC4xKTsKfQoKLnRpdGxlIHsKICBtYXJnaW4tdG9wOiAwOwogIHRleHQtYWxpZ246IGNlbnRlcjsKICBmb250LXNpemU6IDI0cHg7CiAgbWFyZ2luLWJvdHRvbTogMTVweDsKfQoKLmxlYWQgewogIGZvbnQtc2l6ZTogMTZweDsKICBsaW5lLWhlaWdodDogMS43OwogIHRleHQtYWxpZ246IGp1c3RpZnk7Cn0=

`font-family` define la tipografía y alternativas.

`font-size` controla el tamaño del texto en px, em o rem.

`font-weight` ajusta el grosor usando números o palabras clave.

`font-style` modifica el estilo de la fuente.

`::first-letter` aplica estilos a la primera letra de un bloque de texto.

Resumen

¿Qué propiedad determina el grosor de la fuente?

¿Cuál es el valor predeterminado de la propiedad `font-style` en CSS?

Domina los conceptos esenciales de CSS, el lenguaje de estilos que transforma la apariencia y sensación de las páginas web. Explora conceptos clave como estilos de texto, colores, espaciado, el modelo de caja, Flexbox y efectos decorativos. Desarrolla las habilidades necesarias para crear páginas web visualmente atractivas y bien estructuradas.

Comprender cómo CSS se conecta con HTML y cómo se aplican los estilos mediante selectores.
Aplicación de colores, estilos de texto y efectos hover para controlar la presentación visual.

Mejora de la tipografía utilizando altura de línea, espaciado, propiedades de fuente y fuentes personalizadas. Control de familias tipográficas, grosor, estilo y tamaño de fuente para una mejor legibilidad.

Control de la estructura del diseño utilizando las propiedades de margen, relleno, bordes y ancho. Comprensión del comportamiento de dimensionamiento de cajas y de los tipos de visualización de elementos como block, inline e inline-block.

Control de diseños horizontales y verticales utilizando propiedades de Flexbox. Ajuste de dirección, alineación y espaciado para estructurar componentes de la interfaz de usuario.

Mejora de diseños utilizando colores de fondo, imágenes, pseudoelementos y sombras. Estilización de componentes visuales para profundidad y contraste.

Trabajando con Fuentes y Propiedades de Fuentes

font-family

font-size

font-weight

font-style

Pseudo-clase ::first-letter

1. ¿Qué propiedad determina el grosor de la fuente?

2. ¿Cuál es el valor predeterminado de la propiedad `font-style` en CSS?