El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Desarrolladores: Trucos semanales

Identifica tipografías con fontface ninja

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Aprende los mejores trucos y tips, y descubre los conceptos básicos indispensable para todo desarrollador web, independientemente de tu experiencia. Si ya llevas desarrollando por años o si vienes del mundo del diseño y jamás has tocado una sola línea de código, todo lo que aprenderás con esta serie semanal de trucos serán una gran adición a tu actividad profesional y apuntalará tus habilidades como programador o desarrollador. Descubre desde increíbles consejos para que puedas tratar con tu cliente y saber cómo cobrar adecuadamente, hasta cuestiones técnicas claves para organizar y gestionar mejor tu tiempo y proyectos desarrollando.
03:12
  Añadir a marcadores

Transcripción

Hay sitios web que se caracterizan por su buen diseño al combinar adecuada y elegantemente colores e imágenes. También ponen especial cuidado en cómo se ven los textos, pues no se trata solo de tener un texto con cualquier tipografía, sino de que este se lea adecuadamente. Hay otras ocasiones en las que simplemente vemos un tipo de letra en algún sitio web e inmediatamente la imaginamos en nuestro sitio. Tenemos varias formas de poder identificar dicha tipografía, como entrar directamente al código de JavaScript, o al estilo y ubicar la fuente que se está usando y rastrearla en la web para poder comprarla o descargarla. Existe también una extensión de Google Chrome llamada "FontFace Ninja" que nos permite identificar, en la misma página, la tipografía y ubicar la página donde podemos descargarla. La ventaja que ofrece este proceso es que podemos hacerlo rápidamente pues no necesitaremos de revisar el código, sólo activar la extensión y listo. Una vez que la tengamos instalada y activa, solo podemos probar y seguir los pasos en pantalla para poder usarla. Comencemos a trabajar con FonFace Ninja. Para comenzar con FontFace Ninja podemos entrar al sitio fontface.ninja. En este sitio web tenemos la opción de ver un poco cómo funciona y también para poder descargar las versiones. De hecho, tenemos opciones para Firefox, para Chrome y para Safari. Vamos a comenzar a usar la extensión de Google Chrome. Pulsamos en el botón donde viene la extensión y esto nos redirige a la tienda. Y simplemente seguimos el proceso normal de añadir la extensión. Una vez que la extensión se ha añadido, podemos acudir al sitio que nosotros deseemos. para revisar las tipografías que queremos. En este caso, si entramos al sitio de angular.io, pulsamos en el botón del ninja que nos aparece en la parte superior derecha de nuestro navegador, y al hacerlo, nos va a aparecer aquí un nuevo menú. Seleccionamos la opción que dice Mask y esto va a enmascarar la aplicación porque comienza a tratar de entender cuáles son todos los textos. Y, de hecho, cuando tú colocas el cursor encima de ellos, te dice el tipo de letra que es y el tamaño que está ocupando. Si tiene algún margen o algún padding también te lo indica. Así que, tú puedes dar clic en alguno de ellos y en la parte superior te ofrece una opción donde puedes escribir texto de ejemplo. Escribamos "Hola Mundo". Así, puedes verificar cómo se ve el texto que a ti te gustaría ver con esa tipografía. Y puedes jugar un poco con los tamaños, con el espaciado entre las letras e incluso después la puedes volver a ocultar para ver cómo se ve en comparativa a tu sitio normal. Si tú ya quieres utilizarla, puedes pulsar en el botón que dice "Get it now!" Así entonces te manda directamente la tipografía si es que esta es gratuita y en caso de que sea una tipografía de pago, te manda a su sitio web. Lo mismo puedes hacer con cualquier otra página, lo único que necesitas es activar la extensión, seleccionar el texto que deseas, dar un clic, comenzar a averiguar. También puedes intentarlo con algunos otros sitios. Trata de entrar al sitio que tú desees, actívala y pruébala para que empieces a revisar cómo se ven algunas tipografías directamente en tu navegador.