Así que este video se enfocará en las fuentes de éxito y, obviamente, divertirse y elegir fuentes para una
página web es realmente muy importante.
Pero también cubriremos muchas otras propiedades relacionadas con las fuentes y el texto.
Y esos son fuente, fuente, tamaño, fuente, peso, línea, altura, texto, una línea y decoración de texto.
Entonces en este video vamos a parar y cubrir todos esos.
Y lo primero que vamos a hacer es obtener nuestro texto simple que vamos a estilizar.
Así que tengo un Funk sencillo que es Jim M-file y voy a seguir adelante y agregarlo a tu boca.
Así que solo voy a hacer un H-1 para que podamos ver un encabezado y estilo.
Y luego algunos párrafos.
Así que voy a llamar a la página de demostración de esta fuente y luego a lo siguiente, en lugar de simplemente
escribir algunas palabras al azar o un jibberish como este, que en realidad no refleja el aspecto
del idioma inglés en una página.
Voy a usar un generador de Lorem Epsom.
Entonces, para aquellos de ustedes que no saben, los generadores de Lorem Ipsum se utilizan para generar un montón de texto aleatorio
que son palabras en inglés.
No significa nada, pero al menos parece palabras reales.
Entonces es texto de marcador de posición.
Así que tengo un artículo bastante divertido, abierto de 10 de los mejores o más divertidos generadores de Lorem Ipsum
para diseñadores web.
Y voy a ir con este primer tocino ipsum, así que voy a generar algunos párrafos aquí.
Rápido.
Dame tocino y puedes verlo solo dame un poco de texto.
Pero este es un texto real que realmente parece un potencial, usted sabe algo que tendría en un
sitio web.
No parece jibberish como este.
Entonces es una mejor representación de una fuente.
Así que voy a seguir adelante y pegar eso.
Voy a hacer dos párrafos de esto.
Todo bien.
Y lo dejaremos así por ahora y volveremos y lo agregaremos un poco más tarde.
Vamos a abrir esto y ver lo que tenemos.
DE ACUERDO.
Así que aquí hay un sitio que vamos a diseñar y lo primero que queremos hacer es
hablar sobre cómo asignamos una fuente a cualquier cosa.
Y antes de que podamos hacer eso, tenemos que hablar sobre la fuente que tenemos disponible en el navegador.
Por lo tanto, no hay una respuesta fácil sobre qué fuentes tiene una computadora disponible en el navegador.
Y eso es porque son diferentes en cada máquina.
Y tengo este sitio abierto aquí.
Ella dice que las fuentes se apilan.
Eso realmente se muestra dependiendo de si estás en una Mac o Windows.
¿Cuál es el porcentaje de esas máquinas que tienen una fuente determinada?
Por lo tanto, estos son solo tipos de fuentes web estándar que veremos la mayor parte del tiempo.
Entonces, si observamos uno como Helvetica, puede ver que todas las Mac tienen América pero se han instalado muy
pocas ventanas.
Y entonces estas son las fuentes del sistema que vienen en una máquina.
Estas no son las únicas fuentes que puede usar, pero estas son algunas de las que son más seguras.
Entonces, si querías uno que él supiera con certeza, funcionaría en todas las máquinas que elegirías como
Arial negro o aéreo.
Obviamente, estas fuentes son bastante limitadas.
Así que vamos a ver cómo en realidad incluimos las fuentes personalizadas más adelante en este video.
Pero por ahora vamos a elegir uno de estos.
Así que vamos con Ariel Sharon Ariel.
Entonces, para usar eso, vamos a asignar eso a nuestros párrafos aquí.
Así que vamos a entrar en mi C S que he vinculado aquí.
Estilos que C S S y la propiedad se llaman familia de fuentes.
Así que voy a seleccionar párrafos y voy a decir que la familia de fuentes es Arial así.
Y si actualizo verás que ahora tengo la fuente Arial aquí.
Una nota rápida también puedo poner citas alrededor de esto, que es totalmente válido.
A veces tendrás que hacer esto si tienes una fuente que tiene un número al principio.
No es que sea una fuente real, pero si fuera así, tendría que ponerle comillas porque esta
no es una línea válida de CSSA.
OK, así puedo darle Aeriel así y puedes ver que tenemos a Aeriel.
Entonces hay otras fuentes con las que puedes jugar.
Probemos Georgia.
Así que démosle
a nuestra H-1 Georgia esa actualización.
Y puedes ver que cambia de fuente, así que no te desesperes si eres un diseñador.
Vamos a ver cómo usar muchas más fuentes y cómo incluir las personalizadas.
Pero por ahora solo vamos a centrarnos en las fuentes predeterminadas del sistema incorporadas que son un poco limitadas.
Y aun así no hay garantía ya que puede ver que no hay ninguna que tenga el 100 por ciento de las máquinas, así que la
siguiente propiedad de la que quiero hablar es el tamaño de la fuente para que el tamaño de la fuente parezca lo grande que
es la fuente o cuán pequeña sea la fuente es de un elemento dado.
Entonces podemos seleccionar algo y hagámoslo a nuestro H-1 y hagamos que cada uno sea mucho más grande.
Así que hacemos tamaño de fuente y hay diferentes unidades que podemos usar.
Y el primero se llama píxeles o picos y lo hemos visto un poco antes con Forder.
Así que vamos a darle algo así como 200 fotos y si volvemos al navegador, podemos ver si
conseguimos esta gigantesca diversión de 200 píxeles, lo que podemos hacer por las dudas.
Si quieres jugar con los tamaños de fuente, no estás seguro de lo grande que quieres que sea.
85 o
lo que queramos y podemos jugar en el navegador y simplemente verlo el cambio reflejado inmediatamente.
Podemos inspeccionarlo y luego podemos ir hasta aquí y podemos hacer clic en esto y podemos cambiar este número para poder cambiarlo
a 100 o 60 o
Esa es una característica realmente agradable cuando estás jugando con tamaños de fuente.
Entonces, como mencioné, esta no es la única forma de elegir un tamaño de letra.
No es la única unidad.
Hay otra unidad popular llamada IEMs y E-M es básicamente un tamaño de fuente relativo.
Así que voy a seguir adelante y abrir el tamaño de fuente M. leer desde aquí por solo un momento el tamaño de un valor
EM es dinámico y EM es igual al tamaño de la fuente que se aplica al padre del elemento en cuestión .
D y página e ir a la sección EM y voy a
Entonces, lo que realmente significa es que voy a mostrarte un ejemplo rápido.
Si puse Vamos a entrar aquí debajo de filete de tiras voy a poner un elemento de tramo en todo lo que hace un
tramo.
Esta es probablemente la primera vez que los vemos.
¿Es solo una manera de agrupar texto sin hacer una diferencia visual, por lo que es solo una manera de
hacer un elemento alrededor de la palabra tira de carne.
Pero si me actualizo
Nada cambia en absoluto.
Bueno, la búsqueda del tamaño de fuente pero nada cambia aquí y donde tengo este lapso.
Entonces, es una manera de resaltar o destacar alguna línea y luego hacer algo al respecto.
Y vamos a hacerlo mucho más grande.
Entonces usamos un E-M o usamos las unidades E-M y estamos si quisiéramos duplicar el tamaño de la
fuente de este párrafo que acabamos de ver aquí.
Así que analicemos y luego solo decimos tamaño de fuente 2. 0 E-M y así va a ser el doble del tamaño de fuente del
elemento adjunto del elemento padre que es este párrafo.
Entonces verás que aquí si actualizo este lapso duplica el tamaño de fuente de esto.
Pero en realidad no le dijimos explícitamente cuántos píxeles hacer.
Simplemente sabía lo grande que era y luego lo duplicó.
Así que esto es dinámico y es por eso que a muchas personas les gusta que, si por alguna razón
tuviera que cambiar el tamaño de la fuente, esto cambiaría automáticamente.
Déjame mostrarte otro ejemplo.
Aumentemos el tamaño de fuente del tamaño
de fuente del párrafo y hagamos que sean 40 píxeles y puede ver que esto sigue siendo el doble.
Entonces, la única pregunta sobre E-M que surge mucho es cuál es el valor inicial de v y cuál
es el nivel superior.
Porque no podemos seguir heredando de un padre y ese padre debe haber alguna fuente de verdad.
Tiene que haber como en el elemento de nivel superior que realmente tiene un tamaño de fuente y que realmente
cambia dependiendo del navegador, lo cual es un poco frustrante.
Pero de acuerdo con SDN, suele ser de aproximadamente 16 píxeles, por lo que no es garantía, pero por lo general es de alrededor de
16 píxeles.
Entonces, lo que la mayoría de la gente haría es establecer un tamaño de fuente en el cuerpo desde el principio.
Así que algo así como este tamaño de fuente del cuerpo.
Y vamos a darle a hacer algo realmente pequeño para comenzar como 10 pixeles y luego debemos
cambiar o cada uno para que sea cinco veces más grande que el cuerpo.
Así que se verá como cinco porno E-M y luego vamos en nuestro párrafo para que sea el doble
del cuerpo.
Entonces 2. 0 E-M.
Y finalmente, queremos que nuestro tramo sea dos veces más grande que un párrafo.
Entonces eso también es 2. 0 porque recuerda que está anidado dentro.
Así que hagamos un texto fuera de un párrafo así y verá que es bastante pequeño.
Y luego hicimos esto cinco veces más grande que esto.
Hicimos esto dos veces más grande.
Y esto es dos veces más grande que el párrafo