Micaela 11 de agosto de 2009 a las 09.04
   Imprimir artículo
elWebmaster.com

CSS 3: Trabajar con font-weight y otras opciones tipogr√°ficas


css3En CSS 3, La forma en que funciona una @font-face es que cualquiera que sea el atributo que especificas para una regla @font-face, éste no determina cómo luce una fuente sino más bien cuándo es que va a ser utilizada.

A continuación tienes un ejemplo en el que utilizando @font-face se simulan los extra-weight de las fuentes, mediante la asignación de fuentes específicas para cada weight.

Por ejemplo, si posees las dos reglas siguientes:

  1. @font-face {
  2.     font-family: newfont;
  3.     src: local(Arial);
  4.     font-weight: 200;
  5. }
  6. @font-face {
  7.     font-family: newfont;
  8.     src: local(Calibri);
  9.     font-weight: 300;
  10. }

Entonces, si utilizas font-family “newfont” con weight 200 utilizar√° Arial, pero si la utilizas con weight 300 implementar√° Calibri. As√≠ que podemos tomar ventaja de eso, y dado que usa @font-face ni siquiera debemos preocuparnos acerca de si la computadora del usuario posee la fuente o no.

Fuente: Ajaxian


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. Alain dice:

    Hola. Respecto a √©sto, ¬ŅQu√© browsers lo soportan?

  2. Alejandra dice:

    Muy buena pregunta. La propiedad @font-face es compatible con Safari 4, Firefox 3.5, Opera 10 e Internet Explorer 6, 7 y 8. Esto para las versiones de Windows. El √ļnico browser masivo que no soporta la propiedad es Google Chrome :(

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder