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 usuarios 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 usuarios 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 usuarios 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 contacto con la fundición de la fuente si tiene alguna pregunta.

Fontspring es una boutique de la fuente, la venta de cientos de fuentes de calidad profesional, todos ellos aprobado para su uso con @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 contacto 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!....