2012-01-17 6 views
5

Es un problema muy común con font-face, p.¿Cómo se compensa la línea de base de altura de línea?

font: 20px/20px 'ITC Avant Garde Gothic Std'; font-style: 'book'; letter-spacing: 1px; text-transform: uppercase; 

enter image description here

El problema es que yo esperaría de texto centrado verticalmente. Sin embargo, no lo es. ¿Hay alguna manera de compensar la línea de base de altura de línea? Sin cambiar realmente el line-height.

Respuesta

2

El fenómeno depende de la fuente. Depende del diseñador de la fuente decidir cómo la fuente usa su altura. Por ejemplo, en Arial, cuando se establece en sólido, las letras latinas básicas en mayúsculas se centran verticalmente, mientras que en Verdana, aparecen un poco más bajas (es decir, un poco más de espacio por encima que por debajo).

Puede ajustar esto utilizando posicionamiento relativo, pero luego necesita un marcado adicional, p.

<div><span>text</span></div> 

con CSS para el ajuste span, por ejemplo,

position: relative; 
top: 2px; 

Esto puede causar efectos desagradables si la fuente utilizada en el navegador del usuario es diferente de sus expectativas.

No consideré el posible efecto de font-style: 'book', ya que no tengo idea de lo que podría significar. No hay ningún recurso de CSS que sepa que mencione algo así (los valores font-style son palabras clave no citadas y no incluyen book).

+1

Solo para que lo sepas, las referencias 'font-style: 'book'' a un miembro de la familia de fuentes con estilo' book'. Gracias por el consejo sobre el posicionamiento relativo. El problema es, sin embargo, que, por ejemplo, en Opera, la fuente aparece como se esperaba, es decir. centrado verticalmente Por lo tanto, aplicar un arreglo como el suyo no lo haría compatible con varios navegadores. ¿Esto también hace que parezca que esto no es un problema de fuente? – Gajus

Cuestiones relacionadas