Contenido

Con font todo será más corto.

21 Ago

+ 9

La maquetación de fuentes puede resultar un montón de líneas que generan un fichero demasiado extenso y pesado. Para ello podemos usar propiedades como font en la cual podemos definir todas las características que deseamos tengan nuestras fuentes.

Ej:

  font-weight: bold; 
  font-style: italic; 
  font-variant: small-caps; 
  font-size: 1em; 
  line-height: 1.5em; 
  font-family: verdana,sans-serif; 

En nuestra misión de minimizar el tamaño de nuestros CSS hemos de tener en cuenta estas opciones que nos permitirán ahorrar una serie de líneas en cada CSS que generemos.

font: bold italic small-caps 1em/1.5em verdana,sans-serif;

El tamaño de las fuentes es algo muy importante a tener en cuenta en los tiempo que corren. El cambio de resoluciones en nuestros monitores no deben ser un impedimento.

Para ello debemos conocer los dos tipos de medidas de las que disponemos en nuestros CSS.

Medidas absolutas

Las medidas absolutas son aquellas que definimos como estáticas y que no respetan el navegador de nuestro visitante. Ojo, no digo que sean malas o que no sean útiles, solo que son inamovibles y que se ven del mismo tamaño en cualquier navegador y resolución.

Unidades absolutas.

  • pt points
  • in inches
  • cm centimeters
  • mm millimeters
  • pc picas

Relaciones entre únidades

  • pt – point :1/72 in;
  • pc – pica :12 points ou 1/6 in;
  • mm – milímetro :1/10 cm;
  • cm – centímetro :1/100 m;
  • in – polegada :2,54 cm;

Medidas Relativas

Las medidas relativas son aquellas que se adatan a nuestra resolución, para ello usamos valores relativos como el % o la el tamaño de la fuente heredada (em). De esta forma podemos hacer variables los tamaños de nuestras fuentes.

Unidades Relativas

  • em Elements Mheight
  • ex Elements Xheight
  • px pixels
  • % porcentaje

Más Información

  • Yo siempre he utilizado el valor px y em, de todos modos controlar con exactitud como se vera en todos los navegadores y con todas las resoluciones es algo imposible, y ademas hay que presuponer que cada visitante tiene bien configurada su pantalla. Con hacer las cosas bien es suficiente, la usabilidad de Nielsen dejemosla a las empresas.

  • Yo uso un truquillo que vi una vez por ahi, y funcionperfectamente. Trabajas con porcentajes, y en los navegadores se ve muy parecido.

    body {
    font-size: 76%;
    }

    Con esto una fuente al 100% será un texto de tamaño normal. El resto, por proporciones. Esto permite que se pueda cambiar el tamaño en muchos navegadores a voluntad de los usuarios.

    http://zumbe.net/tutoriales/las_tres_reglas_basicas.html

  • Ojo, que no todos los navegadores soportan de igual forma ese shortcut: por supuesto, MSIE no lo hace a la perfección, ya que sólo presenta un soporte parcial en sus versiones 4, 5, 5.5 y 6 (según TopStyle)

    Sobre las técnicas para fijar el tamaño de las fuentes, Owen Briggs realizó un gran experimento de capturas de pantallas (screenshots) y descubrió que el mejor método era una mezcla de ems y porcentajes

  • Siempre suelo utilizar em. Normalmente no me da ningún tipo de problemas, y me proporciona una amplia numeración para poder distinguir tamaños de fuentes, aunque sea ínfima la diferencia. Supongo que es cuestión de preferencias. Mi compañera de trabajo está acostumbrada a los px, como decimos por aquí abajo: «ca uno eh’ca uno».

  • «Para ello podemos usar etiquetas como font»

    Eeeeein??

    Etiqueta font???

    Supongo que querrás decir ESTILOS. La etiqueta FONT de HTML está desrecomendada desde hace siglos.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.