-
Ya has visto cómo cambiar el color y el fondo del texto de una página.
-
Pero puedes hacer mucho más en los textos con CSS.
-
Para empezar cambiemos la fuente.
-
¿Qué es una fuente? Probablemente ya sepas qué es una fuente, pero tal vez
-
no sabes qué palabra usar.
-
Es el estilo de las letras que componen las palabras.
-
Si las letras tienen adornos o qué tan anchas son,
-
o si se ven como si las hubieran escrito con tinta.
-
Será más fácil explicarlo si cambio la fuente de esta página web.
-
Voy a ir a la regla "" de CSS que selecciona todos los párrafos,
-
y añadir aquí la propiedad "font-family".
-
Así que escribimos "font-family: sans-serif;"
-
¿Viste cómo cambiaron las letras?
-
Fíjate que ahora se ven un poco más simples.
-
Ok, ahora déjame cambiar la familia del tipo de letra y especificar "serif" en su lugar.
-
¿Te das cuenta de que las letras se ven un poco más complejas?
-
Una fuente "serif" es cualquier tipo de letra que se ve como si tuviera pequeños "pies" en las letras.
-
Cuando le decimos al navegador que use una familia de tipo de letra "serif", usará por defecto
-
el tipo de letra "serif" de la computadora, que generalmente es el tipo de letra "Times New Roman".
-
A mí no me gusta mucho este tipo de letra así que
voy a regresar al tipo de letra "sans-serif".
-
"Sans" viene del latín y singnifica "sin".
-
Así que el tipo de letra "sans-serif" es el que no tiene esos pequeños "pies" en las letras.
-
Es por eso que las letras se ven más simples.
-
Cuando le decimos al navegador que use el tipo de letra "sans-serif", usa
-
el tipo de letra "sans-serif" por defecto de la computadora, que generalmente es "Arial" o "Helvetica".
-
Pero aquí hay un punto importante: Va a elegir el tipo de fuente predeterminada de la computadora que
-
se está usando no el del autor.
-
Así que tal vez estemos viendo dos tipos diferentes letras "sans-serif" en este momento,
-
si tu computadora tiene un tipo predeterminado diferente que la mía.
-
Algunas veces, eso no importa, pero otras veces es necesario que el lector de las páginas web las vea
-
exactamente igual que yo.
-
En ese caso, puedo especificar el tipo de letra preciso. Por ejemplo, "Helvetica".
-
Esto va a funcionar bien si tú y yo tenemos el tipo de letra "Helvetica" en nuestras computadoras.
-
Pero no todas las computadoras tienen el mismo tipo de letra, y en ese caso la computadora
-
va a ignorar esa propiedad por completo.
-
Afortunadamente, CSS nos deja especificar una familia de tipos de letra alterno, de respaldo, en caso de que
-
un tipo de letra particular no exista en una computadora.
-
Sólo tienes que poner una coma (,) después de "Helvetica", y luego escribir "sans-serif" aquí.
-
Ahora, la computadora va a usar "Helvetica", y si no puede encontrarla, entonces simplemente
-
va a usar el tipo de letra "sans-serif" predeterminado.
-
Generalmente, cuando especificas un determinado tipo de letra, como "Helvetica", también
-
deberías especificar una familia de tipos de letra de respaldo.
-
Además de "serif" y de "sans-serif" existen un par de familias de tipos de letras
-
genéricos que puedes usar.
-
Si queremos que las letras de nuestras canciones se vean manuscritas, podríamos especificar "font-family: cursive". Bien.
-
O si queremos que las letras de nuestras canciones se vean más bonitas, podríamos probar el tipo de letra "fantasy".
-
O ¿qué pasa si queremos que se vean como si las hubieran escrito con máquina de escribir?
-
Podríamos especificar la familia de tipos de letra "monospace".
-
En el tipo de letra "monospace" la anchura es fija, lo que significa que todas las letras miden
-
exactamente lo mismo de ancho.
-
De hecho, has visto muchas fuentes "monospace" aquí en Khan Academy,
-
porque siempre usamos ese tipo de letra para nuestros editores de código.
-
Lo hacemos porque queremos que nuestro código esté alineado, independientemente de las letras
-
en las palabras.
-
Ok, ahora que sabes cómo cambiar la familia de tipos de letra, usa ese poder sabiamente.
-
Si quieres que tu página se vea bien, limítate a usar pocas familias diferentes,
-
y trata de encontrar pares de familias de tipos de letras que se vean bien juntas.
-
Pero si no quieres que tu página se vea bien
-
entonces tu mundo será feo.
-
Continúa y usa los tipos de letra.
