Lección 8: Texto
font-size
Tamaño del texto. Durante los ejemplos se usará la unidad de medida rem. En la siguiente lección se explica su origen y referencia, de momento solo es importante que la utilices sabiendo que 1rem es equivalente al tamaño de letra de tu navegador (en la gran mayoría 16px).
.texto {
font-size: 2.5rem;
}
font-style
Estilo de la letra.
.texto {
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 20deg;
}
font-variant
Versalitas.
.texto {
font-variant: normal;
font-variant: small-caps;
}
font-weight
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 */
}
text-transform
Capitalización, mayúsculas y minúsculas.
.texto {
text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
}
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;
}
word-spacing
Distancia entre palabras.
.texto {
word-spacing: 1.2rem;
}
letter-spacing
Espacio entre letras.
.texto {
letter-spacing: 1.2rem;
}
text-decoration
Línea inferior, superior o tachado.
.texto {
/* Subrayado inferior */
text-decoration: underline;
/* Subrayado superior, y además de color rojo */
text-decoration: overline red;
/* Subrayado tachado */
text-decoration: line-through;
/* Quitar subrayado */
text-decoration: none;
}
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;
}
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;
}
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");
/* No bloquea la carga del texto. Cuando se descargue la tipografía se aplicará */
font-display: swap;
}
body {
/* Utilizas */
font-family: "Fira Sans";
}
Los formatos más extendidos, y por orden de recomendación, son:
- woff2
- woff
- otf
- ttf
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;
}
Actividad 1
A partir del prólogo de Moby Dick, crea una web usando los siguientes estilos en su diseño.
font-sizefont-stylefont-weight
Usa el siguiente texto.
Moby Dick
Herman Melville
Prólogo
Vivimos tiempos en que los hombres pueden arponear impunemente a las ballenas. A despecho de todos los ecologistas del mundo, las localizan por medio del radar, consiguen incluso algunas veces la complicidad de un hidroavión y luego, para dar muerte al enorme mamífero que emerge a lo lejos, tienen suficiente ya con apretar el gatillo desde la cubierta del barco homicida. Ni siquiera les tiembla el pulso.
Hubo otras épocas, sin embargo, en las que no lo tuvieron tan fácil. Los marineros embarcaban entonces en incómodos veleros, arriaban precipitadamente los botes, remaban sin descanso hacia donde estaba la ballena y, cuando la tenían a tiro, lanzaban los crueles arpones y confiaban en su buena suerte.
Actividad 2
Vamos a mejorar la actividad anterior
- Separa las letras del título: Moby Dick.
- Separa un poco el nombre del autor y su apellido.
- Convierte el título del capítulo, Prólogo, en mayúsculas.
- Justifica el texto del capítulo.
Actividad 3
Somos tan tozudos como el Captain Ahab, no nos rendimos con Moby Dick.
Realiza las siguientes tareas.
- Cuando mi cursor se coloque sobre el título, debe cambiar su estilo a cursiva y cambiar su color a azul.
- El título del capítulo debe convertirse en negrita y en rojo.
Actividad 4
Dejamos de lado, de momento, nuestra lucha marina y nos centramos en crear un sitio nuevo con el texto que tú quieras.
Los pasos a seguir son:
- Descarga 2 tipografías diferentes, una para el título y otra para el texto.
- Carga en el CSS ambas fuentes con
@font-face. - Crea un par de clases para cada fuente y aplica sobre el HTML donde corresponda.
Actividad 5
A partir del siguiente texto...
Aquellas cacerías, sin embargo, acababan muchas veces en tragedia. Fue en uno de esos lances, por ejemplo, donde el enigmático protagonista de esta novela, el capitán Ahab, perdió una pierna, la sustituyó por otra de marfil y concibió un odio mortal hacia aquella colosal ballena blanca y solitaria que sembraba el terror por mares sin civilizar.
Lo que deberíamos hacer ahora, sin embargo, es determinar las razones de ese odio inextinguible. Seamos cautos y no aventuremos hipótesis precipitadas. Puede que la mutilación de Ahab no tuviese nada que ver porque todos sabemos que hay odios que encuentran sus más secretas motivaciones mucho más allá de las cosas que han sucedido en este mundo y que actúan sobre nosotros a nivel inconsciente.
Logra la siguiente Web.
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.
¿Me ayudas?
No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ formatDate(fields.createdAt) }}
{{ filterHTMLTags(fields.message) }}
{{ comments.length }} comentarios