@font-face utiliza tipografías no estándar en páginas web con CSS3

Propiedad CSS3 @font-face para embeber tipografías no estándar en páginas web

Con la llegada de la nueva CSS3 tenemos a nuestra disposición multitud de nuevas propiedades para facilitar y mejorar el acceso a nuestra información y la presentación de ésta. Una de las propiedades más interesantes es @font-face, que nos ofrece una funcionalidad similar a las técnicas sFIR, pero mucho más sencilla, limpia y menos aparatosa. Esta propiedad, que están incorporando en sus útlimas versiones todos los navegadores web, permite indicar la URL de una tipografía en la hoja de estilos, que se descargará automáticamente para que el usuario pueda verla en su máquina.

La implementación de la propiedad @font-face en nuestras páginas es muy sencilla. En primer lugar indicamos la ruta de la tipografía en nuestro servidor o una URL externa y el formato de ésta. No es necesario indicar el formato en caso de que la tipografía sea EOT (Embedded OpenType), tipografias diseñadas por Microsoft para embeberlas en páginas web. Después basta con asignar esa tipografía a la propiedad font-family de cualquier elemento de nuestra CSS.

@font-face {

font-family: “n4gash”;

src: url( /*ruta a nuestra fuente en el servidor*/n4gash.ttf) format(“truetype”);

}

h1 {

font-family: “n4gash”, sans-serif;

}

Etiquetas:

Suscríbete a nuestro Feed para recibir las últimas novedades de diseño web, diseño gráfico y programación

2 Comentarios hasta el momento »

  1. Font Squirrel, descarga gratis cientos de tipografías y kits @font-face - The n4gash Blog dijo

    6 de septiembre del 2009 a las 17:08

    […] caben destacar los cientos de kits que podemos descargary que soportan la propiedad CSS3@font-face. Cada kit está compuesto por varios archivos: un .ttf, un .eot para internet explorer, una hoja de […]

  2. 13 Excelentes posts para los amantes de las tipografías | pixelco.us blog dijo

    20 de septiembre del 2009 a las 21:26

    […] @font-face utiliza tipografías no estándar en páginas web con CSS3 – http://www.n4gash.com […]

Comentarios RSS · TrackBack URI

Dejanos tu Comentario

Nombre: (Requerido)

E-Mail: (Requerido)

Sitio WEB:

Comentario:

What is 9 + 14 ?
Please leave these two fields as-is: