[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.58,0:00:05.86,Default,,0000,0000,0000,,Ya has visto cómo cambiar el color y el fondo del texto de una página.
Dialogue: 0,0:00:05.86,0:00:09.36,Default,,0000,0000,0000,,Pero puedes hacer mucho más en los textos con CSS.
Dialogue: 0,0:00:09.36,0:00:12.44,Default,,0000,0000,0000,,Para empezar cambiemos la fuente.
Dialogue: 0,0:00:12.44,0:00:15.92,Default,,0000,0000,0000,,¿Qué es una fuente? Probablemente ya sepas qué es una fuente, pero tal vez
Dialogue: 0,0:00:15.92,0:00:17.26,Default,,0000,0000,0000,,no sabes qué palabra usar.
Dialogue: 0,0:00:17.26,0:00:19.51,Default,,0000,0000,0000,,Es el estilo de las letras que componen las palabras.
Dialogue: 0,0:00:19.80,0:00:23.19,Default,,0000,0000,0000,,Si las letras tienen adornos o qué tan anchas son,
Dialogue: 0,0:00:23.19,0:00:25.85,Default,,0000,0000,0000,,o si se ven como si las hubieran escrito con tinta.
Dialogue: 0,0:00:25.85,0:00:30.68,Default,,0000,0000,0000,,Será más fácil explicarlo si cambio la fuente de esta página web.
Dialogue: 0,0:00:30.68,0:00:35.44,Default,,0000,0000,0000,,Voy a ir a la regla "" de CSS que selecciona todos los párrafos,
Dialogue: 0,0:00:35.73,0:00:38.43,Default,,0000,0000,0000,,y añadir aquí la propiedad "font-family".
Dialogue: 0,0:00:38.43,0:00:42.20,Default,,0000,0000,0000,,Así que escribimos "font-family: sans-serif;"
Dialogue: 0,0:00:42.20,0:00:44.24,Default,,0000,0000,0000,,¿Viste cómo cambiaron las letras?
Dialogue: 0,0:00:44.24,0:00:46.98,Default,,0000,0000,0000,,Fíjate que ahora se ven un poco más simples.
Dialogue: 0,0:00:46.98,0:00:52.18,Default,,0000,0000,0000,,Ok, ahora déjame cambiar la familia del tipo de letra y especificar "serif" en su lugar.
Dialogue: 0,0:00:52.28,0:00:55.90,Default,,0000,0000,0000,,¿Te das cuenta de que las letras se ven un poco más complejas?
Dialogue: 0,0:00:55.90,0:00:59.86,Default,,0000,0000,0000,,Una fuente "serif" es cualquier tipo de letra que se ve como si tuviera pequeños "pies" en las letras.
Dialogue: 0,0:00:59.98,0:01:04.27,Default,,0000,0000,0000,,Cuando le decimos al navegador que use una familia de tipo de letra "serif", usará por defecto
Dialogue: 0,0:01:04.27,0:01:09.20,Default,,0000,0000,0000,,el tipo de letra "serif" de la computadora, que generalmente es el tipo de letra "Times New Roman".
Dialogue: 0,0:01:09.24,0:01:13.74,Default,,0000,0000,0000,,A mí no me gusta mucho este tipo de letra así que \Nvoy a regresar al tipo de letra "sans-serif".
Dialogue: 0,0:01:13.79,0:01:17.81,Default,,0000,0000,0000,,"Sans" viene del latín y singnifica "sin".
Dialogue: 0,0:01:17.100,0:01:22.12,Default,,0000,0000,0000,,Así que el tipo de letra "sans-serif" es el que no tiene esos pequeños "pies" en las letras.
Dialogue: 0,0:01:22.12,0:01:24.52,Default,,0000,0000,0000,,Es por eso que las letras se ven más simples.
Dialogue: 0,0:01:24.52,0:01:27.94,Default,,0000,0000,0000,,Cuando le decimos al navegador que use el tipo de letra "sans-serif", usa
Dialogue: 0,0:01:27.94,0:01:33.68,Default,,0000,0000,0000,,el tipo de letra "sans-serif" por defecto de la computadora, que generalmente es "Arial" o "Helvetica".
Dialogue: 0,0:01:33.68,0:01:38.46,Default,,0000,0000,0000,,Pero aquí hay un punto importante: Va a elegir el tipo de fuente predeterminada de la computadora que
Dialogue: 0,0:01:38.46,0:01:41.22,Default,,0000,0000,0000,,se está usando no el del autor.
Dialogue: 0,0:01:41.29,0:01:45.34,Default,,0000,0000,0000,,Así que tal vez estemos viendo dos tipos diferentes letras "sans-serif" en este momento,
Dialogue: 0,0:01:45.34,0:01:47.60,Default,,0000,0000,0000,,si tu computadora tiene un tipo predeterminado diferente que la mía.
Dialogue: 0,0:01:47.60,0:01:54.33,Default,,0000,0000,0000,,Algunas veces, eso no importa, pero otras veces es necesario que el lector de las páginas web las vea
Dialogue: 0,0:01:54.33,0:01:56.42,Default,,0000,0000,0000,,exactamente igual que yo.
Dialogue: 0,0:01:56.42,0:02:01.98,Default,,0000,0000,0000,,En ese caso, puedo especificar el tipo de letra preciso. Por ejemplo, "Helvetica".
Dialogue: 0,0:02:03.15,0:02:07.94,Default,,0000,0000,0000,,Esto va a funcionar bien si tú y yo tenemos el tipo de letra "Helvetica" en nuestras computadoras.
Dialogue: 0,0:02:08.44,0:02:12.64,Default,,0000,0000,0000,,Pero no todas las computadoras tienen el mismo tipo de letra, y en ese caso la computadora
Dialogue: 0,0:02:12.71,0:02:14.60,Default,,0000,0000,0000,,va a ignorar esa propiedad por completo.
Dialogue: 0,0:02:14.60,0:02:20.03,Default,,0000,0000,0000,,Afortunadamente, CSS nos deja especificar una familia de tipos de letra alterno, de respaldo, en caso de que
Dialogue: 0,0:02:20.06,0:02:23.02,Default,,0000,0000,0000,,un tipo de letra particular no exista en una computadora.
Dialogue: 0,0:02:23.02,0:02:28.00,Default,,0000,0000,0000,,Sólo tienes que poner una coma (,) después de "Helvetica", y luego escribir "sans-serif" aquí.
Dialogue: 0,0:02:28.44,0:02:32.74,Default,,0000,0000,0000,,Ahora, la computadora va a usar "Helvetica", y si no puede encontrarla, entonces simplemente
Dialogue: 0,0:02:32.74,0:02:34.44,Default,,0000,0000,0000,,va a usar el tipo de letra "sans-serif" predeterminado.
Dialogue: 0,0:02:35.07,0:02:39.30,Default,,0000,0000,0000,,Generalmente, cuando especificas un determinado tipo de letra, como "Helvetica", también
Dialogue: 0,0:02:39.32,0:02:44.22,Default,,0000,0000,0000,,deberías especificar una familia de tipos de letra de respaldo.
Dialogue: 0,0:02:44.25,0:02:48.35,Default,,0000,0000,0000,,Además de "serif" y de "sans-serif" existen un par de familias de tipos de letras
Dialogue: 0,0:02:48.35,0:02:49.92,Default,,0000,0000,0000,,genéricos que puedes usar.
Dialogue: 0,0:02:49.92,0:02:57.30,Default,,0000,0000,0000,,Si queremos que las letras de nuestras canciones se vean manuscritas, podríamos especificar "font-family: cursive". Bien.
Dialogue: 0,0:02:57.30,0:03:04.41,Default,,0000,0000,0000,,O si queremos que las letras de nuestras canciones se vean más bonitas, podríamos probar el tipo de letra "fantasy".
Dialogue: 0,0:03:04.48,0:03:08.30,Default,,0000,0000,0000,,O ¿qué pasa si queremos que se vean como si las hubieran escrito con máquina de escribir?
Dialogue: 0,0:03:08.30,0:03:11.12,Default,,0000,0000,0000,,Podríamos especificar la familia de tipos de letra "monospace".
Dialogue: 0,0:03:11.20,0:03:15.18,Default,,0000,0000,0000,,En el tipo de letra "monospace" la anchura es fija, lo que significa que todas las letras miden
Dialogue: 0,0:03:15.20,0:03:16.40,Default,,0000,0000,0000,,exactamente lo mismo de ancho.
Dialogue: 0,0:03:16.40,0:03:20.20,Default,,0000,0000,0000,,De hecho, has visto muchas fuentes "monospace" aquí en Khan Academy,
Dialogue: 0,0:03:20.20,0:03:23.91,Default,,0000,0000,0000,,porque siempre usamos ese tipo de letra para nuestros editores de código.
Dialogue: 0,0:03:23.91,0:03:27.25,Default,,0000,0000,0000,,Lo hacemos porque queremos que nuestro código esté alineado, independientemente de las letras
Dialogue: 0,0:03:27.25,0:03:29.19,Default,,0000,0000,0000,,en las palabras.
Dialogue: 0,0:03:29.19,0:03:33.49,Default,,0000,0000,0000,,Ok, ahora que sabes cómo cambiar la familia de tipos de letra, usa ese poder sabiamente.
Dialogue: 0,0:03:33.49,0:03:37.90,Default,,0000,0000,0000,,Si quieres que tu página se vea bien, limítate a usar pocas familias diferentes,
Dialogue: 0,0:03:37.90,0:03:40.72,Default,,0000,0000,0000,,y trata de encontrar pares de familias de tipos de letras que se vean bien juntas.
Dialogue: 0,0:03:40.72,0:03:43.16,Default,,0000,0000,0000,,Pero si no quieres que tu página se vea bien
Dialogue: 0,0:03:43.16,0:03:45.40,Default,,0000,0000,0000,,entonces tu mundo será feo.
Dialogue: 0,0:03:45.40,0:03:48.04,Default,,0000,0000,0000,,Continúa y usa los tipos de letra.