Retomando nuestra costumbre de ayudarles con artículos de Diseño, presentamos ejemplos de como usar Webkit CSS y CSS 3, en esta entrega: Flexible Box Model, Box Sizing y Columns
Tag: CSS
Google acaba de anunciar la creación de un directorio de Fuentes Open Source que se pueden utilizar en nuestros sitios mediante una API.
Bajo el lema “Haciendo hermosa la web” podemos por ahora usar una lista de 18 fuentes con sus respectivas variantes.
¿Cómo usarlo?
El ejemplo que nos dejan es muy sencillo. Primero agregamos esta línea entre las etiquetas <head>:
HTML:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light" />
Y luego para que se vea en nuestra página agregamos el siguiente código CSS:
CSS:
body {
font-family: 'Josefin Sans Std Light', arial, serif;
font-size: 48px;
}
font-family: 'Josefin Sans Std Light', arial, serif;
font-size: 48px;
}
Donde el valor del parámetro family en el atributo href es la fuente que queremos usar. En el ejemplo escogí la fuente Josefin+Sans+Std+Light ya que es la fuente más parecida al logo de Buayacorp :).
El resultado con alguito de color:
Y añadiendo alguito de código:
CSS:
body {
font-family: 'Josefin Sans Std Light', arial, serif;
font-size: 48px;
text-shadow: 2px 2px 4px #aaa;
letter-spacing: -5px;
background: #4b4b4b;
}
font-family: 'Josefin Sans Std Light', arial, serif;
font-size: 48px;
text-shadow: 2px 2px 4px #aaa;
letter-spacing: -5px;
background: #4b4b4b;
}
¿Cómo funciona?
Básicamente lo que hace es usar la regla @font-face de CSS3. Revisando un poco el código veremos que estas fuentes funcionarán sólamente en en modo “screen” y no en impresión.
CSS:
@media screen {
@font-face {
font-family: 'Josefin Sans Std Light';
font-style: normal;
font-weight: normal;
src: local('Josefin Sans Std Light'), url('http://themes.googleusercontent.com/font?kit=doRWK9Qks0OQGenH-kW8nsnX9wMe89zs2uzox0MWMfk') format('truetype');
}
}
@font-face {
font-family: 'Josefin Sans Std Light';
font-style: normal;
font-weight: normal;
src: local('Josefin Sans Std Light'), url('http://themes.googleusercontent.com/font?kit=doRWK9Qks0OQGenH-kW8nsnX9wMe89zs2uzox0MWMfk') format('truetype');
}
}
Vemos que tampoco funcionarán en navegadores antiguos.
Esperemos que con este tipo de ayudas, no se cometa el error del pasado de abusar como se hacía con la etiqueta <font>.
Es cierto que se podría lograr maravillas usando esta regla, sin embargo no se debe abusar de su uso.
Enlaces
Categories
Dive into HTML5
Dive Into HTML5, un libro que explica algunas ventajas de HTML5. (Vía CSSBeauty)