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;}
Cap comentari :
Publica un comentari a l'entrada