Todas las mentes comprar kamagra espana del mundo comprar levitra espana recomiendan comprar priligy espana prevenir problemas

Importar fuentes está a la orden del día. Quién más quién menos suele importar fuentes bonitas, originales, atrevidas o poco comunes para sus mejores webs (si queréis algunas gratis os dejo mi blog de tipografías gratis). Pero la mayoría de las veces o no importamos bien o lo hacemos de una manera cutre.

Lo normal para una tipografía es que la llames y configures los pesos con font-weight o los estilos con font-style, así:

Incorrecto
elemento{
    font-family: 'Custom font', sans-serif;
}
elemento span{
    font-family: 'Custom font bold', sans-serif;
}
Correcto
elemento{
    font-family: 'Custom font', sans-serif;
}
elemento span{
    font-weight: bold;
}

Para poder hacer esto deberemos importar correctamente las fuentes. A continuación pongo un ejemplo con muchas especificaciones pero la mayoría son opcionales ya qu ese les asigna valores por defecto.

@font-face {
    font-family: 'Custom font';
    src: url('path/to/custom_font.eot');
    src: url('path/to/custom_font.eot?#iefix') format('embedded-opentype'),
         url('path/to/custom_font.woff') format('woff'),
         url('path/to/custom_font.ttf') format('truetype'),
         url('path/to/custom_font.svg#custom-font') format('svg');
    font-variant: normal;
    font-stretch: normal;
    font-weight: normal;
    font-style: normal;
}

Hay diferentes opiniones sobre cómo ordenar los src pero este orden a mí en particular me va bien, sí que es verdad que en algunos IE hace un salto pero creo que el % de casos es despreciable frente a los que sí sale bien. A continuación detallo qué archivo sirve para qué navegador (pongo la versión mínima necesaria):

  • EOT: IE6
  • WOFF: IE 9.0, Chrome 5.0, Firefox 3.6, Safari 5.1, Opera 11.1
  • WOFF2: Chrome 36.0, Firefox 35.0, Opera 26.0
  • TTF/OTF: IE 9.0, Chrome 4.0, Firefox 3.5, Safari 3.1, Opera 10.0
  • SVG: Chrome 4.0, Safari 3.2, Opera 9

Os preguntaréis: ¿Si EOT sólo es para IE porqué va la primera? Pues es para que IE lo coja directamente si los navegadores más modernos se la saltan pero con más rapidez sin la pusiéramos detrás de SVG por ejemplo tardaría un segundo en cargar la tipo ya que IE6 es un navegador más lento.

A continuación detallo las posibilidades de cada una de las propiedades que por defecto todas usan normal:

  • font-variant: normal, small-caps
  • font-stretch: condensed, expanded, extra-expanded, extra-condensed, normal, semi-condensed, semi-expanded, ultra-condensed, ultra-expanded
  • font-weight: 100, 200, 300, 400, 500, 600, 700, 800, 900, normal, bold, bolder, lighter
  • font-style: italic, normal, oblique

Así que ya podéis importa funetes sin miedo alguno.

Categorías: CSS
Si necesitas una url corta puede usar: codygo.es/1635

Deja un comentario