dimarts, 7 de desembre de 2010

Implementant altres tipus de lletra en la web

Gràcies a diverses eines i APIs a l'hora d'escollir un tipus de lletra pel nostre web, ja no cal (en principi) fer anar els tipus de lletra de sistema, ja sabeu: Arial, Verdana, Times New Roman etc.
Per poder-ho fer cal seguir un sèrie de recomanacions que ens evitaran mals de cap a l'hora d'utilitzar altres fonts.

  • Podem utilitzar tot tipus de fonts a les webs (tenint en compte llicència, llegibilitat, etc.), i s'ha d'ajustar el disseny a la posterior maquetació.
  • A l'hora de fer el disseny, mai s'han d'escalar les fonts, sempre s'han d'utilitzar com a font/text i no com a imatge vectorial.
  • Junt amb el disseny cal que existeixi la llista de fonts utilitzades i les seves mides i atributs.
  • Per poder utilitzar una font qualsevol a un disseny s'ha de disposar com a mínim dels arxius en format TrueType i EOT.

Formats dels arxius de fonts segons els navegadors:

  • TrueType Fonts: Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
  • EOT fonts: Internet Explorer 4+
  • WOFF fonts: Firefox 3.6+, Internet Explorer 9+, Chrome 5+
  • SVG fonts: iPad and iPhone

Explicació del codi CSS per inserir arxius de fonts al web
Paulirish.com



Generador de codi Font Squirrel
Font Squirrel ens proporciona un generador online i un llistat de fonts per a que les puguem utilitzar en els nostres dissenys i les nostres webs. Aquí teniu un exemple del generador de codi:


Codi CSS per tenir una font disponible

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on July 23, 2010 05:08:36 AM America/New_York */


@font-face {

font-family: 'KingthingsGothiqueRegular';

src: url('Kingthings_Gothique-webfont.eot');

src: local('☺'),
url('Kingthings_Gothique-webfont.woff') format('woff'),
url('Kingthings_Gothique-webfont.ttf') format('truetype'),
url('Kingthings_Gothique-webfont.svg#webfontfcLqx2uM') format('svg');

font-weight: normal;

font-style: normal;

}


Codi CSS per utilitzar una font

h1.fontface {font: 60px/68px 'KingthingsGothiqueRegular', Arial, sans-serif;letter-spacing: 0;}