Google Website Translator Gadget

miércoles, 18 de junio de 2014

CSS3: Fonts, @font-face i Fira Sans

CSS3 logo
http://www.w3.org/Style/CSS/

CSS3: Fonts, @font-face i Fira Sans

Entre altres funcionalitats pel disseny de pàgines, CSS3 permet la incorporació de diverses fonts, tant des del propi servidor com importades de un altres servidor.
Aquesta darrera es molt interessant per tal d'importar fonts des de servidors on estan publicades per a compartir, veiem els paràmetres i un exemple:

Exemple de codi:

@font-face
{
font-family:FiraSans, Georgia, Serif;
font-weight:900;

font-variant:small-caps;

src: url(https://github.com/buildingfirefoxos/Building-Blocks/blob/gh-pages/fonts/FiraSans/FiraSans-Regular.otf);
}

Repàs dels paràmetres principals

ParàmetreTractament
font-familyIndica la prioritat de les fonts disponibles.
font-weightEspecifica el "pes", per exemple negreta ("bold").
Hi ha una normalització del pes per a facilitar el tractament:
normal, bold, 100, 400, etc...
font-strechEspecifica principalment la relació entre alt i ample de la font.
No esta gaire suportat encara.
font-style
font-sizeEspecifica el tamany 
font-variantEspecifica el tractament del text. Té 2 opcions:
normal: Text normal
small-caps:
El text es genera automàticament en "Versalita"
FormatsWoff (Web Open Font Format): .woff
TrueType: .ttf Desenvolupat per Apple als 80'
OpenType: .ttf, .otf
Embedded-opentype: .eot
SVG Font: .svg, svgz. Típic de iOS (iPad, iPhone)

Webfonts.info es pot trobar una llista de llocs i plans per a descarregar embedded fonts, fontsquirrel.com i Google fonts disposen d'una àmplia llista també.

Enllaços relacionats:

No hay comentarios:

Publicar un comentario