1 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. 2 00:00:05,864 --> 00:00:09,359 Pero puedes hacer mucho más en los textos con CSS. 3 00:00:09,359 --> 00:00:12,437 Para empezar cambiemos la fuente. 4 00:00:12,437 --> 00:00:15,925 ¿Qué es una fuente? Probablemente ya sepas qué es una fuente, pero tal vez 5 00:00:15,925 --> 00:00:17,264 no sabes qué palabra usar. 6 00:00:17,264 --> 00:00:19,507 Es el estilo de las letras que componen las palabras. 7 00:00:19,802 --> 00:00:23,186 Si las letras tienen adornos o qué tan anchas son, 8 00:00:23,186 --> 00:00:25,853 o si se ven como si las hubieran escrito con tinta. 9 00:00:25,853 --> 00:00:30,676 Será más fácil explicarlo si cambio la fuente de esta página web. 10 00:00:30,676 --> 00:00:35,441 Voy a ir a la regla "" de CSS que selecciona todos los párrafos, 11 00:00:35,729 --> 00:00:38,429 y añadir aquí la propiedad "font-family". 12 00:00:38,429 --> 00:00:42,197 Así que escribimos "font-family: sans-serif;" 13 00:00:42,197 --> 00:00:44,245 ¿Viste cómo cambiaron las letras? 14 00:00:44,245 --> 00:00:46,983 Fíjate que ahora se ven un poco más simples. 15 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. 16 00:00:52,283 --> 00:00:55,902 ¿Te das cuenta de que las letras se ven un poco más complejas? 17 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. 18 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 19 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". 20 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". 21 00:01:13,786 --> 00:01:17,806 "Sans" viene del latín y singnifica "sin". 22 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. 23 00:01:22,120 --> 00:01:24,522 Es por eso que las letras se ven más simples. 24 00:01:24,522 --> 00:01:27,936 Cuando le decimos al navegador que use el tipo de letra "sans-serif", usa 25 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". 26 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 27 00:01:38,460 --> 00:01:41,216 se está usando no el del autor. 28 00:01:41,293 --> 00:01:45,337 Así que tal vez estemos viendo dos tipos diferentes letras "sans-serif" en este momento, 29 00:01:45,337 --> 00:01:47,595 si tu computadora tiene un tipo predeterminado diferente que la mía. 30 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 31 00:01:54,330 --> 00:01:56,423 exactamente igual que yo. 32 00:01:56,423 --> 00:02:01,981 En ese caso, puedo especificar el tipo de letra preciso. Por ejemplo, "Helvetica". 33 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. 34 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 35 00:02:12,708 --> 00:02:14,596 va a ignorar esa propiedad por completo. 36 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 37 00:02:20,058 --> 00:02:23,023 un tipo de letra particular no exista en una computadora. 38 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í. 39 00:02:28,443 --> 00:02:32,737 Ahora, la computadora va a usar "Helvetica", y si no puede encontrarla, entonces simplemente 40 00:02:32,737 --> 00:02:34,438 va a usar el tipo de letra "sans-serif" predeterminado. 41 00:02:35,070 --> 00:02:39,300 Generalmente, cuando especificas un determinado tipo de letra, como "Helvetica", también 42 00:02:39,324 --> 00:02:44,225 deberías especificar una familia de tipos de letra de respaldo. 43 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 44 00:02:48,349 --> 00:02:49,917 genéricos que puedes usar. 45 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. 46 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". 47 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? 48 00:03:08,305 --> 00:03:11,124 Podríamos especificar la familia de tipos de letra "monospace". 49 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 50 00:03:15,196 --> 00:03:16,396 exactamente lo mismo de ancho. 51 00:03:16,397 --> 00:03:20,198 De hecho, has visto muchas fuentes "monospace" aquí en Khan Academy, 52 00:03:20,198 --> 00:03:23,906 porque siempre usamos ese tipo de letra para nuestros editores de código. 53 00:03:23,906 --> 00:03:27,247 Lo hacemos porque queremos que nuestro código esté alineado, independientemente de las letras 54 00:03:27,247 --> 00:03:29,190 en las palabras. 55 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. 56 00:03:33,490 --> 00:03:37,900 Si quieres que tu página se vea bien, limítate a usar pocas familias diferentes, 57 00:03:37,900 --> 00:03:40,725 y trata de encontrar pares de familias de tipos de letras que se vean bien juntas. 58 00:03:40,725 --> 00:03:43,158 Pero si no quieres que tu página se vea bien 59 00:03:43,158 --> 00:03:45,398 entonces tu mundo será feo. 60 00:03:45,398 --> 00:03:48,038 Continúa y usa los tipos de letra.