Consejo rápido Cómo trabajar con @ Font-face

Debido al hecho de que @ font-face puede ser un poco demasiado complicado, no se ha contagiado tanto como debería. Una vez que comience a leer sobre licencias, diferentes formatos de fuente, consistencias del navegador, puede potencialmente convertirse en más problemas de lo que vale la pena..

Pero, en cinco minutos, intentaré simplificar el proceso de trabajar con fuentes personalizadas tanto como sea posible. Servicios como Font Squirrel ayudan a hacer que la tarea sea fácil!

CSS final

 @ font-face font-family: 'blok-regular'; src: url ('type / Blokletters-Potlood.eot'); src: formato local ('Blokletters Potlood Potlood'), local ('Blokletters-Potlood'), url ('type / Blokletters-Potlood.ttf') ('truetype');  @ font-face font-family: 'blok-italic'; src: url ('type / Blokletters-Balpen.eot'); src: formato local ('Blokletters Balpen Balpen'), local ('Blokletters-Balpen'), url ('type / Blokletters-Balpen.ttf') ('truetype');  @ font-face font-family: 'blok-heavy'; src: url ('type / Blokletters-Viltstift.eot'); src: local ('Blokletters Viltstift Viltstift'), local ('Blokletters-Viltstift'), url ('type / Blokletters-Viltstift.ttf') formato ('truetype');  h1 font-family: blok-heavy, helvetica, arial; 

¿Nota cómo estamos haciendo referencia a una fuente .eot y .ttf? Esto se debe a que, por supuesto, Internet Explorer solo usa su propio formato, que todavía no se ha puesto realmente al día. Como tal, primero debemos importar ese archivo .eot, y luego pasar a los diferentes formatos para Firefox, Safari, etc.. Es esencial que primero cargues la versión .eot.

A continuación, buscamos la fuente en la computadora del usuario usando el atributo "local". Si no está fundado, solo entonces pasamos una URL que cargará la fuente.

¿Por qué IE no intenta cargar las fuentes TTF??

Esto fue definitivamente una preocupación. Si Explorer no puede trabajar con el formato TrueType, no queremos perder tiempo intentando descargar la fuente. Afortunadamente, debido a todos esos atributos locales y las comas, IE no entenderá nada de eso. Como tal, simplemente saltará la línea por completo, por lo tanto, solo utilizará la versión .eot.

• Síganos en Twitter o suscríbase a Nettuts + RSS Feed para obtener los mejores tutoriales de desarrollo web en la web..