Cerrar menu
Tutoriales En Linea
  • Tutoriales
    • Aprendizaje
    • Video Tutorial
    • Manuales
    • Hagalo usted mismo
    • Explorar todo
  • Adobe
    • After Effects
    • Dreamweaver
    • Premiere Pro CC
    • Photoshop
    • Photoshop Mix
    • Lightroom
    • Illustrator
    • Adobe Muse
    • Creative Cloud
  • Android
    • Developer Android
    • Aplicaciones
    • Android Studio
    • Android Wear
    • Desarrolladores
    • SDK Platform-Tools
    • ADB...depuración Bridge
    • Fastboot
    • Root
    • Recovery
  • Apple
    • iPhone y iPad
    • iPhone
    • iPad
    • Mac OS
    • iCloud
    • iTunes
  • Cursos
    • Actívate
    • Autoempleo
    • Idiomas
    • Curso De HTML
    • Curso de C++
    • Javascript
    • jQuery
    • Matematicas
    • Programacion
    • Python
    • Udacity
    • Diseño Web adaptativo
  • Ciberseguridad
    • Malware
    • Ransomware
    • Virus
    • Troyano
    • Dorkbot
    • Filecoders
    • keylogger
    • Spyware
    • Jackware
    • DDoS
    • HackerOne
    • Interpol
  • Criptomonedas
    • Blockchain
    • Mineria de Criptomonedas
    • Bitcoin (BTC)
    • Bitcoin Cash (BCH)
    • DASH (Dash)
    • Dogecoin (Doge)
    • Ethereum (ETH)
    • Litecoin (LTC)
    • Monero (XMR)
    • Ripple (XRP)
    • Zcash (ZEC)
    • Forex
    • Trading
  • Desarrollo Web
    • Sistema de gestion de contenidos
    • AMP
    • Datalife Engine
    • Blogger
    • WordPress
    • Joomla
    • Bootstrap
    • Plantillas
    • @font-face
    • Schema
    • Website
    • Desarrolladores
    • Lenguaje Web
  • Diseño Web
    • Web Responsive
    • Lenguaje Web
    • Datos estructurados
    • HTML
    • CSS3
    • JavaScript
    • Ajax
    • jQuery
    • PHP
  • Entretenimiento
  • Encuestas
    • GlobalTestMarket
    • Centro de opinion
    • Ipsos i-Say
    • Triaba
    • opinea
    • Toluna
    • YouGov
    • ClixSense
    • ySense
    • Cint
    • Beruby
  • Electricidad
  • Electronica
  • Ganar dinero comprando
    • CashbackDeals
    • Cashback
    • Por ir de compras
    • Aklamio
    • Intercambio de tráfico
    • Justificante de pagos
    • Webs estafas
  • Google
    • Google Pay
    • Adsense
    • Gmail
    • Google Apps
    • Google Chrome
    • Google Cloud Platform
    • Google Consumer Surveys
    • Google Desarrolladores
    • Google Fit
    • Google Maps
    • Google Photos
    • Google Play
    • Google Translation
    • DoubleClick
    • YouTube
    • Chromebooks
  • Marketing
    • SEM
    • SEO
    • Posicionamiento
    • Contenido
    • Publisuites
    • Space Content
    • Coobis
    • Marketing
  • Computadora u ordenador
    • Sistemas operativos
      • Windows
      • Mac OS
      • Android
      • Linux
      • Ubuntu
      • Kali Linux
      • Wifislax
    • hardware
    • Software
    • BIOS
    • Unidad de disco duro
    • Programacion
    • Dispositivos
    • Internet
  • Ofimática
    • Microsoft
    • Suite Ofimatica
    • Access
    • Word
    • Excel
    • Powerpoint
    • Outlook
    • Microsoft Publisher
  • PTC
    • No pierdas tiempo con estas web
  • Redes Sociales
    • Delicious
    • Facebook
    • Instagram
    • linkedin
    • Snapchat
    • TikTok
    • Twitter
    • Pinterest
    • Spotify
    • Vkontakte - VK
    • WhatsApp
  • Smartphone
    • Telefonos
    • Telefonia movil y telecomunicaciones
    • Desbloquear
    • Códigos NCK
    • Liberar
    • Tarjeta SIM
    • Tablet
  • Sitio Web
    • Dominios
    • Hosting
    • Servidores
    • Demo DLE
    • Documentación sobre Datalife Engine
    • Modulos DLE
    • Hack
    • Optimizacion
    • Google Adsense
    • Plantillas
  • Tips
    • Cabello
    • Consejos
    • Cremas
    • Cosmético
    • Cuerpo
    • Dieta
    • Exfoliantes
    • Entrenamiento
    • Ejercicio
    • Estilo
    • Fitness
    • Habitos
    • Hidratante
    • Look
    • Maquillaje
    • Moda
    • Piel Radiante
    • Recetas
    • Ropa
    • Rutina
    • Salud
    • Tratamientos
  • Trabajos
    • Atencion al cliente
    • Asistente virtual
    • Transcripcíon
    • Transcripcíones medica
    • Entrada de datos
    • De edicion y correccion
    • Mystery Shopping
    • Micro trabajos
    • Contabilidad
    • Tutoria y aprendizaje
    • Mas ingresos extras
    • Git
    • GitHub
    • Criptografia
    • Deep Web
    • Hacker
    • FTP
    • Indexar
    • Newsletter
    • Redes y VPN
    • Herramientas online
  • Windows
    • Skype
    • Windows
    • Windows 11
    • Windows 10
    • Windows 8
    • Windows 7
    • Puerta trasera de Windows
    • Microsoft Edge
Facebook X (Twitter) Instagram
  • Sobre nosotros
  • Últimos artículos
  • Herramientas SEO
  • Ver mas temas
  • Más sitios que te gustarán
Facebook X (Twitter) Instagram Pinterest Youtube
  • Secciones
    1. Android
    2. Adobe
    3. Bricolaje
    4. Bachillerato
    5. Cursos
    6. Criptomonedas
    7. Criptografia
    1. Diseño Web
    2. Encuestas
    3. Empleo
    4. Electricidad
    5. Electronica
    6. Forex
    7. Fisica
    1. Google
    2. Hardware
    3. Herramientas Ofimaticas
    4. Herramientas
    5. Internet
    6. Idiomas
    7. IPTV
    1. Programacion
    2. Libros
    3. Microsoft
    4. Manuales
    5. Matematica
    6. Newsletter
    7. Optimizacion
    1. Redes Sociales
    2. Software
    3. Seguridad
    4. Telefonia
    5. WebSite
    6. Ver todas las categorias
    7. Post promocionado
  • Smartphone

    Comprendre les Différences entre les Chargeurs USB et les Chargeurs USB-C : Un Guide Complet

    Huawei Smartphones: Las Mejores Ofertas del Black Friday para Aprovechar

    Gadgets imprescindibles para tu configuración de oficina en casa

    ¡Descubre las tendencias más emocionantes en el mundo de los videojuegos!

    Tendencias en sistemas operativos en smartphone

  • Tecnología
    1. Móviles
    2. Ordenadores
    3. Software
    4. Hardware
    5. Seguridad
    6. Ver todo

    Comprendre les Différences entre les Chargeurs USB et les Chargeurs USB-C : Un Guide Complet

    Huawei Smartphones: Las Mejores Ofertas del Black Friday para Aprovechar

    Gadgets imprescindibles para tu configuración de oficina en casa

    ¡Descubre las tendencias más emocionantes en el mundo de los videojuegos!

    Cómo limpiar la unidad C de archivos innecesarios

    Descubre el misterioso mundo del hash de archivos: ¡todo lo que necesitas saber!

    Los componentes fundamentales que todo PC debería tener

    Que es la tecla TAB

    Cifrado | Seguridad Local

    Maximiza tu productividad: Descubre el sistema interactivo que revolucionará la gestión de proyectos en tu empresa

    Cómo limpiar la unidad C de archivos innecesarios

    Como jugar online y resolver un sudoku

    Que es la tecla TAB

    Cómo deshabilitar la desfragmentación de SSD y HDD en Windows 10 y 11

    Benefits Of Vertical Dual Monitors For Coding And Programming

    AMD ha identificado la causa de la quema de los procesadores Ryzen 7000 y ha lanzado un nuevo AGESA para corregir el problema

    Cifrado | Seguridad Local

    Descubre el misterioso mundo del hash de archivos: ¡todo lo que necesitas saber!

    Virus en el sistema DataLife Engine (DLE) y cómo tratarlos

    La ciberseguridad: Vital Para Las Apuestas Online en España

    ¡Descubre las tendencias más emocionantes en el mundo de los videojuegos!

    ¿Aburrido de tu viejo televisor? Descubre las últimas tendencias en televisores

    Generador de Video IA: La Revolución en la Creación Audiovisual

    Los últimos celulares para que estés a la última

  • Estilo de vida
    1. Entrenamiento
    2. Maquillaje
    3. Dieta
    4. Moda
    5. Trucos y tips
    6. Ver todo

    Desarrolla un cuerpo fuerte y saludable

    ¿Qué es la forma física?

    Mejora los resultados de tu entrenamiento de estabilidad y fuerza

    Consejos para maximizar las caminatas diarias

    ¿Por qué es importante preparar la piel antes de maquillarla?

    Consejos para aplicar pestañas postizas

    Consejos para una piel perfecta este invierno

    La nutrición y un cabello saludable

    Cosas que le pasan a tu cuerpo cuando comes salmón todos los días

    Batidos de proteínas pueden ayudar a mejorar sus hábitos alimenticios

    Batidos de proteinas - Una guía para principiantes

    Snacks nutritivos para cada antojo

    Inspiración de traje de otoño

    La dura verdad sobre las modelos de talla grande

    Razones por las que las marcas de moda de lujo son tan caras

    Cuales son las mejores frutas para adelgazar

    Como enseñar a leer y a escribir

    Como generar cuentas Disneyplus

    Calcular porcentajes con la Calculadora de Windows 10

    Bricolaje para la decoración del hogar

    Top 10 de posturas de yoga

    ¿Por qué es importante preparar la piel antes de maquillarla?

    Inspiración de traje de otoño

    Consejos de belleza para lucir fresca en el verano

  • Marketing

    ¿Sirven de algo los diseñadores Web?… ¿y los redactores de contenido?

    ¿Qué es un Link Dofollow?

    ¿Qué es Nofollow?

    ¿Qué es el remarketing?

    ¿Qué es el posicionamiento web (SEO) y lo necesito para mi sitio web?

  • Juegos

    Para qué se pueden usar las Gafas VR PS4

    La nueva generación de realidad virtual de PlayStation®VR2 y PlayStation®5

    Colaboración entre Sony INZONE y EXCEL Esports

    Sony prohíbe cuatro juegos de terceros en Xbox

    Prepárate para el futuro: Project Trinity llega a finales de 2024

  • Herramientas
Búsqueda extendida

Escriba arriba y presione Enter para buscar.

¡Bienvenido de nuevo!

Inicie sesión o Regístrate ahora

VK

o con Email

¿Has olvidado tu contraseña?

Noticias » Guía rápida de fuentes web a través de @font-face

Guía rápida de fuentes web a través de @font-face


0 Febrero 06, 2016
Compartir

Compartir
Twitter Pinterest LinkedIn Tumblr WhatsApp Email
Guía rápida de fuentes web a través de @font-face

Introducción

 

La característica @font-face de CSS3 nos permite utilizar tipos de letra personalizados en la web de una manera accesible, manipulable y escalable. Sin embargo, usted podría decir: Por qué deberíamos usar @ font-face si tenemos Cufon, sIFR, y el uso de texto en imágenes.


Unos beneficios de aprovechamiento @font-face de fuentes personalizadas:

  • capacidad de búsqueda completa por Find (Ctrl-F)
  • La accesibilidad a las tecnologías de asistencia como lectores de pantalla
  • El texto es traducible, a través de servicios de traducción y traducción en el navegador
  • CSS tiene plena capacidad para ajustar la pantalla tipográfico: line-height , espaciado entre letras , sombra de texto , text-aligny selectores como :: primera carta y :: primera línea

@ Font-face en su esencia


En su forma más básica, declaramos una nueva fuente remota personalizada se utilice de esta manera:

@font-face {  font-family:'Tagesschrift';  src: url('tagesschrift.ttf');}

Luego ponerla en uso:

h1, h3, h3 { font-family:'Tagesschrift','Georgia', serif;}

En esta declaración @ font-face estamos usando la fuente-familia propiedad para indicar el nombre de la fuente. Puede ser cualquier cosa, independientemente de lo que la fuente se llama en realidad; font-family: '' SuperDuperComicSans; iba a salir bien, aunque quizás no para su reputación.

En el src propiedad que apuntan a que el navegador puede encontrar la fuente de activos. Dependiendo del navegador, algunos tipos de fuentes válidas son EOT, TTF, OTF, SVG, o una URI de datos incorporación de toda la línea de datos fuente.


Por supuesto, nada es tan simple como debería ser. La limitación inicial del código anterior era que no servía a un EOT a IE 6-8. @font-face propuso una forma de resolver este; una versión robusta como la que sigue.

@font-face {  font-family:'Tagesschrift';  src: url('tagesschrift.eot');/* IE 5-8 */ 
  src:local('☺'),/* sneakily trick IE */        url('tagesschrift.woff') format('woff'),/* FF 3.6, Chrome 5, IE9 */        url('tagesschrift.ttf') format('truetype'),/* Opera, Safari */        url('tagesschrift.svg#font') format('svg');/* iOS */}

La inducción es un dolor de cabeza todavía? Si lo que queremos es obtenerla de forma rápida, a la cabeza del generador de fuentes de ardilla , una herramienta que simplifica todo el proceso para usted, teniendo su fuente y la preparación de sus variantes y CSS para usted. Es indispensable para poner en práctica las @font-face.



Soporte móvil?


Safari móvil es compatible con fuentes web como SVG 3.1 de iOS y Android soporta OTF / ttf partir de la versión 2.2. Pero si sus s móviles obtiene esta experiencia tipográfica mejorada? Me gustaría recomendar no. La principal razón es debido a la forma en que se maneja WebKit el texto que está a la espera de una fuente personalizada a través de @font-face: el texto es invisible. Por lo tanto en una conexión móvil de ancho de banda baja, los s verán ningún texto en absoluto hasta que el ~ 50k de los datos de la fuente se ha cargado. El equipo Webkit está aplicando una solución de convertir en una fuente de reserva después de unos segundos se cumplan, pero hasta que ha aterrizado, yo no lo consideraría justo someter a sus s a tales obstáculos entre ellos y su contenido.


Servicios Fuente Web


Un número de servicios envuelven la función @ font-face en una API sencilla, muchas veces lo que le permite añadir una sola línea de CSS o secuencia de comandos para su HTML y algo de configuración y ya está todo hecho. Muchos como WebINK , TypeKit , y Fontslive le permitirá utilizar las fuentes (a veces hasta un límite de ancho de banda) por una cuota mensual. El uso de estos servicios es muy conveniente para el desarrollador casual, de dar el relevo algunas de las complicaciones de servir a una solución multi-navegador


El Google Font API le permite utilizar un conjunto pequeño, curada de fuentes con licencia libre con sólo ligarse a una hoja de estilo y dejar que Google maneja la cruz-navegador y los problemas de rendimiento. Es la manera más rápida de conseguir el funcionamiento de las fuentes web.


Encontrar tipos de letra para profesionales @ font-face


Una sorpresa común a los diseñadores es que sólo porque usted compra una licencia de fuente (para uso en su diseño gráfico, por ejemplo), eso no significa que se puede utilizar en @font-face. Las licencias para @font-face (o incrustación web) típicamente se venden por separado. 


Lea detenidamente el contrato, y no dude en ponerse en o con la fundición de la fuente si tiene alguna pregunta.

@font-face. FontFont , y otras fundiciones, han empezado a vender licencias @font-face directamente, aunque en la actualidad sólo la orientación WOFF y EOT, el cual dejar de lado una parte considerable (pero encogimiento) del mercado de los navegadores. 

Muchas fundiciones son la adición de licencias Fuente Web a su catálogo, pero si usted no puede encontrar uno para su tipo de letra elegido, se ponen en o con ellos para preguntar sobre ello.


Tratar con FOUT


El flash de texto sin estilo es un fenómeno en Firefox y Opera que algunos diseñadores web son aficionados. Cuando se aplica un tipo de fuente personalizada a través de @font-face, hay un breve momento, cuando se carga la página, donde la fuente no se ha descargado y aplicado todavía, y la próxima fuente de la fuente-familia se utiliza pila. Esto provoca un destello de una fuente diferente (típicamente menos guapo), antes de que se actualizó.


Acompañando a la API de Google Font se la Fuente Web del cargador , una biblioteca de jаvascript con el objetivo de proporcionar una serie de ganchos de eventos que le da un gran control sobre la carga. Vamos a echar un vistazo a cómo se puede obtener otros navegadores para imitar el comportamiento de ocultar el texto de respaldo mientras se carga la fuente font-face @ de WebKit.

 

<scriptsrc="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"<script>WebFont.load({  custom:{    families:['Tagesschrift'],    urls:['https://paulirish.com/tagesschrift.css']}});</script>
/* we want Tagesschrift to apply to all h3's */.wf-loading h3 {  visibility: hidden;}.wf-active h3,.wf-inactive h3 {  visibility: visible;  font-family:'Tagesschrift','Georgia', serif;}

Si jаvascript está desactivado, el texto permanecerá visible todo el tiempo, y si los errores de la fuente de alguna manera, se va a caer de nuevo a un trazo de pie con seguridad básica. Considere esto, como una medida provisional por el momento; la mayoría de los expertos Fuente Web desean ocultar el texto de repliegue durante 2-5 segundos, después revelarlo. De bajo ancho de banda y los dispositivos móviles se benefician en gran medida por este tiempo de espera. Es comprensible que Mozilla está tratando de rectificar esto pronto.


Una solución más ligero, pero menos eficaz es el font-size-adjust propiedad, actualmente sólo está soportado en Firefox. Se le da una oportunidad para normalizar altura x través de una fuente de pila, lo que reduce la cantidad de cambio visible en el FOUT. De hecho, el generador de fuentes de ardilla acaba de añadir una característica que le indica la relación altura-x de las fuentes que se cargan, por lo que se puede establecer con precisión el tamaño de fuente a ajustar el valor.


Resumen


WebFonts ofrecer un poco de libertad a los diseñadores y con los próximos características como ligaduras discrecionales y alternativas estilísticas, tendrán mucha más flexibilidad. Por ahora, puede estar seguro que las aplicación en CSS3, ya que cubre el 98% de los navegadores desplegados. ¡Disfrutar!....

Síguenos en
Google News Flipboard
  • 100
  • 1
  • 2
  • 3
  • 4
  • 5
Novedades De Google Fit: Distancia, Calorías, Los Datos De Comida, y Entre Otras...
Cómo usar iconos basado en fuentes tipográficas?
omegayalfa
omegayalfa
  • Website
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
  • Instagram

Sobre mi: ¡Aprende los trucos de tutoriales online y cursos gratis con Tutoriales En Linea! Con manuales paso a paso para desarrollar tu conocimiento, Tutoriales En Linea te ayudará a mejorar tus habilidades y lograr tus metas.
Un tutorial está diseñado con pasos secuenciales que aumentan gradualmente el entendimiento. Por lo tanto, es importante que se sigan los pasos en su orden lógico para que el comprenda todos los elementos. Para optimizar los resultados, se recomienda seguir de forma profesional las instrucciones del tutorial.

Artículos Relacionados


Competencia En La Construccion de aplicaciones: El desafío de ob App Estudiante

Competencia En La Construccion de aplicaciones: El desafío de ob App Estudiante

Novedades De Google Fit: Distancia, Calorías, Los Datos De Comida, y Entre Otras...

Novedades De Google Fit: Distancia, Calorías, Los Datos De Comida, y Entre Otras...

Las Expresiones Regulares En php

Las Expresiones Regulares En php


Comentarios



Información
s que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!

Destacados

Lista IPTV con canales para colombia

Mayo 23 43 856

Como instalar SS IPTV en una Smart Tv Samsung

Ene 22 10 381

Como podemos conseguir proxies

Jun 21 11 617

Historia de los sistemas operativos

Mayo 16 31 053

Lo mas leidos

Herramientas SEO para posicionamiento de nuestra web 2024

Por 17-06-24

Herramienta online de generador de datos estructurados

Por Tutoriales En Linea 17-06-24

Las 7 mejores páginas para descargar películas en .torrent en español

Por 26-09-24

Etiquetas

Fuente




Sobre nosotros

Tutoriales En Linea

¡Bienvenidos a Tutoriales En Línea, el sitio web perfecto para encontrar todas las herramientas necesarias para mejorar tus habilidades de forma gratuita! En Tutoriales En Linea se encuentran tutoriales, cursos online y aprendizaje de calidad, muy útiles para desarrollar tus capacidades... Leer mas...

Tiene una pregunta? ar...

Enlaces

  • Sobre nosotros
  • Ultimos tutoriales
  • Publicar tutorial
  • Ver mas temas
  • Ultimos comentarios
  • ¿Preguntas Frecuentes?
  • Derechos de autor
  • Politica de cookies
  • Nuestro equipo
  • Normas

Herramientas online

  • Buscador de recetas
  • Prueba de diseño web
  • Codificar en binarios, hexadecimales...
  • Cual es mi IP
  • Test de velocidad
  • Editor HTML
  • Test de escritura
  • Test de nutricion
  • Descargar Videos
  • Generador de datos estructurados

Recursos

  • Analisis de tus problemas de SEO
  • Herramientas SEO
  • Generar palabras claves
  • Referencia de CSS3
  • Convertir HTML a XML
  • Acortador de URL
  • Selector de colores
  • Contador de palabras
  • Comprimir imagenes
  • Conversor a URI de datos
  • Suscribirse
Facebook Twitter Instagram Pinterest Linkedin Youtube
  • Anunciarse
  • Socios externos
  • Política de privacidad
  • Términos y Condiciones
  • Sobre nosotros
  • ar
© Tutoriales En Linea. Reservados todos los derechos, queda prohibida la reproducción parcial o total sin previa autorización.