WEBVTT 00:00:00.581 --> 00:00:05.864 Ya has visto cómo cambiar el color y el fondo del texto de una página. 00:00:05.864 --> 00:00:09.359 Pero puedes hacer mucho más en los textos con CSS. 00:00:09.359 --> 00:00:12.437 Para empezar cambiemos la fuente. 00:00:12.437 --> 00:00:15.925 ¿Qué es una fuente? Probablemente ya sepas qué es una fuente, pero tal vez 00:00:15.925 --> 00:00:17.264 no sabes qué palabra usar. 00:00:17.264 --> 00:00:19.507 Es el estilo de las letras que componen las palabras. 00:00:19.802 --> 00:00:23.186 Si las letras tienen adornos o qué tan anchas son, 00:00:23.186 --> 00:00:25.853 o si se ven como si las hubieran escrito con tinta. 00:00:25.853 --> 00:00:30.676 Será más fácil explicarlo si cambio la fuente de esta página web. 00:00:30.676 --> 00:00:35.441 Voy a ir a la regla "" de CSS que selecciona todos los párrafos, 00:00:35.729 --> 00:00:38.429 y añadir aquí la propiedad "font-family". 00:00:38.429 --> 00:00:42.197 Así que escribimos "font-family: sans-serif;" 00:00:42.197 --> 00:00:44.245 ¿Viste cómo cambiaron las letras? 00:00:44.245 --> 00:00:46.983 Fíjate que ahora se ven un poco más simples. 00:00:46.983 --> 00:00:52.183 Ok, ahora déjame cambiar la familia del tipo de letra y especificar "serif" en su lugar. 00:00:52.283 --> 00:00:55.902 ¿Te das cuenta de que las letras se ven un poco más complejas? 00:00:55.902 --> 00:00:59.859 Una fuente "serif" es cualquier tipo de letra que se ve como si tuviera pequeños "pies" en las letras. 00:00:59.979 --> 00:01:04.269 Cuando le decimos al navegador que use una familia de tipo de letra "serif", usará por defecto 00:01:04.269 --> 00:01:09.202 el tipo de letra "serif" de la computadora, que generalmente es el tipo de letra "Times New Roman". 00:01:09.244 --> 00:01:13.744 A mí no me gusta mucho este tipo de letra así que voy a regresar al tipo de letra "sans-serif". 00:01:13.786 --> 00:01:17.806 "Sans" viene del latín y singnifica "sin". 00:01:17.996 --> 00:01:22.120 Así que el tipo de letra "sans-serif" es el que no tiene esos pequeños "pies" en las letras. 00:01:22.120 --> 00:01:24.522 Es por eso que las letras se ven más simples. 00:01:24.522 --> 00:01:27.936 Cuando le decimos al navegador que use el tipo de letra "sans-serif", usa 00:01:27.936 --> 00:01:33.676 el tipo de letra "sans-serif" por defecto de la computadora, que generalmente es "Arial" o "Helvetica". 00:01:33.676 --> 00:01:38.460 Pero aquí hay un punto importante: Va a elegir el tipo de fuente predeterminada de la computadora que 00:01:38.460 --> 00:01:41.216 se está usando no el del autor. 00:01:41.293 --> 00:01:45.337 Así que tal vez estemos viendo dos tipos diferentes letras "sans-serif" en este momento, 00:01:45.337 --> 00:01:47.595 si tu computadora tiene un tipo predeterminado diferente que la mía. 00:01:47.595 --> 00:01:54.330 Algunas veces, eso no importa, pero otras veces es necesario que el lector de las páginas web las vea 00:01:54.330 --> 00:01:56.423 exactamente igual que yo. 00:01:56.423 --> 00:02:01.981 En ese caso, puedo especificar el tipo de letra preciso. Por ejemplo, "Helvetica". 00:02:03.150 --> 00:02:07.938 Esto va a funcionar bien si tú y yo tenemos el tipo de letra "Helvetica" en nuestras computadoras. 00:02:08.436 --> 00:02:12.641 Pero no todas las computadoras tienen el mismo tipo de letra, y en ese caso la computadora 00:02:12.708 --> 00:02:14.596 va a ignorar esa propiedad por completo. 00:02:14.596 --> 00:02:20.029 Afortunadamente, CSS nos deja especificar una familia de tipos de letra alterno, de respaldo, en caso de que 00:02:20.058 --> 00:02:23.023 un tipo de letra particular no exista en una computadora. 00:02:23.023 --> 00:02:28.001 Sólo tienes que poner una coma (,) después de "Helvetica", y luego escribir "sans-serif" aquí. 00:02:28.443 --> 00:02:32.737 Ahora, la computadora va a usar "Helvetica", y si no puede encontrarla, entonces simplemente 00:02:32.737 --> 00:02:34.438 va a usar el tipo de letra "sans-serif" predeterminado. 00:02:35.070 --> 00:02:39.300 Generalmente, cuando especificas un determinado tipo de letra, como "Helvetica", también 00:02:39.324 --> 00:02:44.225 deberías especificar una familia de tipos de letra de respaldo. 00:02:44.247 --> 00:02:48.349 Además de "serif" y de "sans-serif" existen un par de familias de tipos de letras 00:02:48.349 --> 00:02:49.917 genéricos que puedes usar. 00:02:49.917 --> 00:02:57.304 Si queremos que las letras de nuestras canciones se vean manuscritas, podríamos especificar "font-family: cursive". Bien. 00:02:57.304 --> 00:03:04.414 O si queremos que las letras de nuestras canciones se vean más bonitas, podríamos probar el tipo de letra "fantasy". 00:03:04.484 --> 00:03:08.305 O ¿qué pasa si queremos que se vean como si las hubieran escrito con máquina de escribir? 00:03:08.305 --> 00:03:11.124 Podríamos especificar la familia de tipos de letra "monospace". 00:03:11.204 --> 00:03:15.184 En el tipo de letra "monospace" la anchura es fija, lo que significa que todas las letras miden 00:03:15.196 --> 00:03:16.396 exactamente lo mismo de ancho. 00:03:16.397 --> 00:03:20.198 De hecho, has visto muchas fuentes "monospace" aquí en Khan Academy, 00:03:20.198 --> 00:03:23.906 porque siempre usamos ese tipo de letra para nuestros editores de código. 00:03:23.906 --> 00:03:27.247 Lo hacemos porque queremos que nuestro código esté alineado, independientemente de las letras 00:03:27.247 --> 00:03:29.190 en las palabras. 00:03:29.190 --> 00:03:33.490 Ok, ahora que sabes cómo cambiar la familia de tipos de letra, usa ese poder sabiamente. 00:03:33.490 --> 00:03:37.900 Si quieres que tu página se vea bien, limítate a usar pocas familias diferentes, 00:03:37.900 --> 00:03:40.725 y trata de encontrar pares de familias de tipos de letras que se vean bien juntas. 00:03:40.725 --> 00:03:43.158 Pero si no quieres que tu página se vea bien 00:03:43.158 --> 00:03:45.398 entonces tu mundo será feo. 00:03:45.398 --> 00:03:48.038 Continúa y usa los tipos de letra.