EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            Posición y comportamiento de contenedores en CSS
            Posición y comportamiento de contenedores en CSS
            12/10/2019
            estilos en formularios
            Estilos en formularios CSS, propiedades necesarias
            12/10/2019

            Formatos de las fuentes en CSS y utilización de repositorios

            Formatos de las fuentes

            Formatos de las fuentes

            Tabla de contenidos

            • 15. Formatos de las fuentes CSS
            • 1. La regla @font-face en CSS
            • 2. Repositorios de fuentes
            • 3. Herramientas
              • 3.1. Fuentes web online
              • 3.2. Convertidores de fuentes online
              • 3.3. Repositorios de iconos
            • Ejercicio propuesto

            En la unidad 1 vimos la importancia de elegir bien las fuentes que se van a utilizar en nuestros sitios web. Además, en este mismo tema también hemos repasado las propiedades CSS para las fuentes que nos permiten controlar el tamaño, el tipo, el grosor o el estilo de las letras entre otras cosas. Veamos ahora los diferentes formatos de las fuentes y qué métodos tenemos para incorporarlos en nuestros proyectos web.

            15. Formatos de las fuentes CSS

            Actualmente no hay un formato de fuente único para todos los navegadores. Por este motivo, es necesario incluir las fuentes en todos los formatos para que sean visibles en el mayor número de navegadores. Los formatos más destacados son los siguientes:

            FormatoDescripción
            EOTEmbedded OpenType, Explorer
            TTFTrueType Font, IOS
            WOFFWeb Open Font Format, Chrome
            WOFF2Mejora de WOFF
            SVGScalar Vector Graphics

            1. La regla @font-face en CSS

            La regla @font-face nos permite descargar una fuente o tipografía, cargarla en el navegador y utilizarla en nuestras páginas. Así pues, tendríamos el siguiente código para incluir la fuente Open Sans:

            @font-face { 
                font-family: 'Open Sans'; 
                src: local('Open Sans'), 
                    url(opensans.woff2) format('woff2'), 
                    url(opensans.woff) format('woff'), 
                    url(opensans.ttf) format('truetype'), 
                    url(opensans.otf) format('opentype'), 
                    url(opensans.eot) format('embedded-opentype'); 
            }

            2. Repositorios de fuentes

            Hoy en día es muy común utilizar un repositorio de fuentes que nos provea de los archivos necesarios para tener las fuentes disponibles en nuestra web.  

            Uno de los repositorios proveedores de tipografías más  utilizados es Google Fonts (fonts.google.com). Los motivos de su uso son los siguientes:

            • Gratuito: dispone de un amplio catálogo de fuentes gratuitas.
            • Cómodo: su interfaz es de fácil uso.
            • Rápido: utiliza un CDN que proporciona ventajas en cuanto a la velocidad.
            fuente tangerine Google Fonts
            Interfaz Google Fonts. Fuente Tangerine.

            Ejercicio propuesto

            Añade la fuente Tangerine del repositorio de Google Fonts a un nuevo proyecto web. Para ello, busca la fuente deseada en la página de Google Fonts y agrega  los códigos HTML y CSS que se detallan en la ficha descriptiva.

            Formatos de las fuentes
            Interfaz de Google Fonts, Fuente Tangerine.

            En este caso, tendremos que incorporar en nuestro documento CSS El siguiente código:

            @import url('https://fonts.googleapis.com/css2?family=Tangerine&display=swap');ss?family=Tangerine">

            También podríamos incluir el siguiente código en HTML:

            <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

            Y a continuación tendremos que definir el siguiente estilo CSS:

            p{ font-family: 'Tangerine', cursive;}

            Ver código y resultado en CodePen:

            0

            3. Herramientas

            3.1. Fuentes web online

            Nombre URL
            Font Squirrel fontsquirrel.com
            Da Font dafont.com
            Google Fonts google.com/fonts

            3.2. Convertidores de fuentes online

            NombreURL
            Font Squirrel converterfontsquirrel.com/tools/webfont-generator
            Online Font Converteronlinefontconverter.com
            Files conversionfiles-conversion.com/font-converter.php
            Font converterfontconverter.org

            3.3. Repositorios de iconos

            NombreURL
            Flaticonfalticon.es
            Lineconsdesignmodo.com/linecons-free/
            Flaticons.coflaticons.co
            Flaticons.netflaticons.net
            Iconshockiconshock.com/flat-icons/

            Ejercicio propuesto

             Al igual que con las fuentes, podemos utilizar repositorios de iconos para representar cualquier parte de nuestra interfaz. Busca un icono en el repositorio de Font Awesome (fontawesome.com) e inclúyelo en un nuevo proyecto web.

            0

            Compartir

            UD3. CSS básico

            • 1. ¿Qué es CSS?
            • 2. ¿Cómo aplicar estilos CSS?
            • 3. Selectores
            • 4. Unidades de medida
            • 5. Colores y fondo
            • 6. Propiedades de texto
            • 7. Propiedades de las fuentes
            • 8. Propiedades de las listas
            • 9. Propiedades de las tablas
            • 10. Pseudo-clases y pseudo-elementos en CSS
            • 11. Prefijos CSS de los navegadores
            • 12. Buenas prácticas CSS
            • 13. Modelo de cajas: márgenes, relleno y bordes
            • 14. Posición y comportamiento de contenedores en CSS
            • 15. Formatos de las fuentes en CSS y utilización de repositorios
            • 16. Estilos en formularios CSS
            • 17. Herramientas útiles, test de verificación y referencias
            • 18. Resumen CSS
            • 19. Prácticas CSS
            • 20. Test de conocimientos CSS
            • 21. Propiedades Personalizadas CSS

            Diseño de Interfaces Web

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results