Lección 5: Texto

font-size

Tamaño del texto.

.texto {
    font-size: 2.5rem;
}

Más información

font-style

Estilo de la letra.

.texto {
    font-style: normal;
    font-style: italic;
    font-style: oblique;
    font-style: oblique 20deg;
}

Más información

font-variant

Versalitas.

.texto {
    font-variant: normal;
    font-variant: small-caps;
}

Más información

font-wight

Grosor de la letra.

.texto {
    font-weight: normal;
    font-weight: bold;

    /* Relativas al padre */
    font-weight: lighter;
    font-weight: bolder;

    /* Grosor numérico */
    font-weight: 100; /* Thin */
    font-weight: 200;
    font-weight: 300; /* Light */
    font-weight: 400; /* Regular */
    font-weight: 500;
    font-weight: 600;
    font-weight: 700; /* Bold */
    font-weight: 800;
    font-weight: 900; /* Black */
}

Más información

5-1

text-transform

Capitalización, mayúsculas y minúsculas.

.texto {
    text-transform: none;
    text-transform: capitalize;
    text-transform: uppercase;
    text-transform: lowercase;
}

Más información

text-align

Alineación de textos.

.texto {
    text-align: start;
    text-align: end;
    text-align: left;
    text-align: right;
    text-align: center;
    text-align: justify;
    /* Experimental: Igual que justify salvo que fuerza la última línea */
    text-align: justify-all;
}

Más información

word-spacing

Distancia entre palabras.

.texto {
    word-spacing: 1.2rem;
}

Más información

letter-spacing

Espacio entre letras.

.texto {
    letter-spacing: 1.2rem;
}

Más información

5-2

text-decoration

Línea inferior o superior.

.texto {
  text-decoration: underline;
  text-decoration: overline red;
  text-decoration: none;
}

Más información

hover

Pseudoclase que es activado cuando el usuario deja el cursor sobre el elemento.

/* Estilos por defecto */
.estilo {
    color: orange;
}

/* Estilos cuando el cursor esta encima */
.estilo:hover {
    color: blue;
}

Más información

5-3

font-family

Seleccionar fuente.

.estilo {
/* Nombre de fuente + nombre genérico:
Si no encuentra la primera instalada, busca la genérica */
font-family: "Oswald", sans-serif;
font-family: "Poppins", sans-serif;

/* Nombres genéricos más utilizados */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
}

Más información

font-face

Cargar fuente.

@font-face {
    /* Alias que le das para utilizarla */
    font-family: "Fira Sans";
    /* Origen */
    src: url("../fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

body {
    /* Utilizas */
    font-family: "Fira Sans";
}

Los formatos más extendidos, y por orden de recomendación, son:

  1. woff2
  2. woff
  3. otf
  4. ttf

Más información

font-display

Forma de carga.

.texto {
    /* No muestra el texto hasta que sea cargada la tipografía */
    font-display: block;
    /* Si muestra el texto. Cuando sea cargada la tipografía cambiará */
    font-display: swap;
}

Más información

5-4 5-5

¿Te ayudo?

Comprame un café
  • 1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
  • 2 cafés: Respondo a una duda en los comentarios.
  • 4 cafés: Te corrijo una actividad y te envío feedback.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario