que - Corregir fuente de línea personalizada de altura con CSS
plantillas contact form 7 (5)
Al final, terminé arreglando la fuente manualmente, usando la ayuda de esta respuesta:
He estado experimentando un problema extraño al usar una fuente personalizada en una nueva aplicación web en la que estoy trabajando.
Esta fuente personalizada (FF DIN) Parece tener una altura de línea vertical, naturalmente descentrada, lo que me obliga a poner un poco de relleno superior de relleno para compensar el espacio superior en el botón y entrada del elemento.
Ejemplo: la fuente en verde (Helvetica Neue) está correctamente alineada, donde la fuente personalizada que usamos (FF DIN) está verticalmente descentrada:
¿Existe alguna forma conocida de solucionar ese problema de centrado en el CSS de forma natural, de alguna manera para forzar el comportamiento de línea de base de la fuente?
Gracias.
El problema aquí no es la altura de la línea sino la colocación vertical de los glifos, en particular, la ubicación de la línea de base del texto. Eso es algo que el diseñador de fuentes ha decidido; el diseñador dibuja glifos y los coloca en la casilla em, el dispositivo conceptual que tiene una altura igual a (o que se define como) la altura de la fuente. En particular, el diseñador decide cuánto espacio hay por debajo de la línea de base en una mano y por encima de la altura de las letras mayúsculas en la otra. Normalmente, estos espacios son iguales, o casi iguales, pero no necesitan serlo. Si son sustancialmente diferentes, el uso previsto de la fuente es probablemente especial y no incluye el uso como el que se muestra en la imagen. Esto sugiere que se debe reconsiderar la elección de la fuente, pero supongamos que es fija.
Hay varias maneras de lidiar con el problema. Si hay demasiado espacio debajo de las letras, reducir line-height hace más pequeña, pero también afecta el espacio de arriba. El relleno superior ayuda en cierto sentido, pero aumenta la altura total ocupada por el elemento. También puede jugar con vertical-align , pero afecta la altura de los cuadros de línea.
Probablemente, el enfoque más simple es utilizar el posicionamiento relativo , suponiendo que el problema se trata de un texto de una sola línea. El posicionamiento relativo simplemente desplaza el contenido de una manera específica, sin afectar el diseño de lo contrario. Necesitaría un envoltorio para esto, es decir, un elemento que contenga el texto, de modo que pueda desplazar solo el texto, no el fondo.
La siguiente demostración utiliza una fuente de Google, Candal, que tiene un problema similar, pero en una dirección diferente: la línea de base es demasiado baja. Las modificaciones de este enfoque para resolver el problema original deberían ser obvias, pero la cantidad exacta de desplazamiento debe determinarse empíricamente (o a partir de la información extraída del archivo de fuentes utilizando un inspector de fuentes). Naturalmente, la unidad em debe usarse aquí, incluso si establece el tamaño de la fuente en píxeles o puntos (de modo que no es necesario cambiar el código si se cambia algún día el tamaño de la fuente).
<link href=''http://fonts.googleapis.com/css?family=Candal'' rel=''stylesheet''>
<style>
div { font-family: Candal }
div { background: lightgreen; font-size: 200%}
</style>
<p>What we have got initially:
<div>BRAKE HOSE AND AIR CHAMBER</div>
<p>Reducing line height (even “setting solid”) does not really help:
<div style="line-height: 1">BRAKE HOSE AND AIR CHAMBER</div>
<p>But displacing the text upwards by 0.1em does:
<div><span style="position: relative; bottom: 0.1em">
BRAKE HOSE AND AIR CHAMBER</span></div>
En Chrome he encontrado que si estás usando una declaración de fuente tipográfica. Puede resolver el problema de la altura de línea con un style = "" call i el HTML, o simplemente declarando la altura de la línea DESPUÉS de la declaración de la fuente en su CSS.
Creo que Chrome simplemente no sabe cómo calcular la altura de la línea hasta que se representa la fuente personalizada.
Esto es algo que he encontrado recientemente. La línea de base de las fuentes que estaba usando por alguna razón no se alineaba, por lo que me alineé en la parte inferior y aumenté la altura de la línea en lugar de agregar relleno.
Así es como resolví mi problema, si tiene un enlace a un lápiz de código, puedo verificar si funcionará para usted o si otra solución sería mejor.
p {
vertical-align: text-bottom;
line-height: 1.5;
}
He tenido ese problema también en el pasado, ¡incluso diferentes navegadores daban diferentes alturas de línea! Creo que sucede cuando se usa el generador de webfont y solo se puede arreglar con el uso de diferentes alturas de línea, que yo sepa.
¿Probaste fontsquirrel? Hay algunas opciones con diferentes resultados.
http://everythingfonts.com/font-face