0

Tengo este pequeño problema con una tipografía para la web.

Adjunto primera imagen en la que se ve bien desde el inspector de elementos con el visor de dispositivos.

introducir la descripción de la imagen aquí

Aquí con un móvil.

introducir la descripción de la imagen aquí

Como se puede observar, la parte inferior de la M se corta.

HTML:

<div class="fullWidth">
    <div class="header-section matricula">
        <img src="imgs/header/menu.png" class="menu-button" data-open="imgs/header/cancel.png" data-close="imgs/header/menu.png">
        <div class="title">
            <h1>
                Matrícula
            </h1>
        </div>
    </div>
</div>

CSS:

.fullWidth .header-section .title {
  overflow: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 2;
}
.fullWidth .header-section .title h1 {
  overflow: auto;
  text-align: center;
  font-family: "BacktoBlackDemo";
  color: #fff;
  font-size: 120px;
  line-height: 120px;
}

Soluciones probadas:

  • Propiedad overflow como auto o visible.
  • Propiedad line-height muy por encima, o normal pero no ha resultado para que no se corte la fuente.
  • Propiedad height. En cierto modo funcionaba, he puesto tanto la caja como el h1 con la altura de la cabecera pero sigue cortando el título en la misma línea.

¿Tal vez la tipografía es la culpable, o algo que me necesite en las CSS de más que me haya olvidado?

9
  • Haz probado con un height?
    – cignius
    el 5 dic. 2016 a las 20:47
  • @Cig voy a probar!
    – Zander
    el 5 dic. 2016 a las 20:48
  • @Cig Parece ser que si al final, merci, si pones como respuesta te la doy como buena!
    – Zander
    el 5 dic. 2016 a las 20:52
  • @blonfu lo he probado, incluso poner 500px, pero no hay manera. He probado con el height, al principio funcionaba, pero el texto se colocaba arriba, fue moverlo hacia abajo, y al llegar a ese mismo punto, lo corta
    – Zander
    el 5 dic. 2016 a las 21:02
  • tienes una liga donde ver el error?
    – cignius
    el 5 dic. 2016 a las 21:06

2 respuestas 2

1

Sólo quita el overflow en el .title y del h1:

.fullWidth .header-section .title {
  /* overflow: auto; // Es probable que esto te estorbe*/
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 2;
}
.fullWidth .header-section .title h1 {
  /* overflow: auto; // Es probable que esto te estorbe*/
  text-align: center;
  font-family: "BacktoBlackDemo";
  color: #fff;
  font-size: 120px;
  line-height: 1em; /* Éste sugiero que lo cambies a 1em (120px) o 1.2em (144px) para que se ajuste automáticamente dependiendo del tamaño de tu tipografía. */
}

El overflow sirve para cortar el contenido, renderizar una scrollbar o para mostrar el contenido aún cuando sobresalga su contenedor superior. Aquí la explicación completa.

4
  • Hola, gracias por comentar, anteriormente no tenía el overflow en ninguno de ambos, lo puse para comprobar que no fuera que la tipo por alguna razón estaba sobresaliendo y se ocultaba y tal, pero no, y el line-height he probado también con esos valores, pero no ha habido suerte. Me comentan que puede deberse a la configuración de la tipografía en si misma
    – Zander
    el 5 dic. 2016 a las 21:33
  • Tienes alguna url donde se pueda comprobar o puedes crear un ejemplo con el error en jsfiddle para poder encontrar más rápido el error? Por la imagen que muestras no creo que sea problema de la tipografía. Estoy 99% seguro que es un problema con el overflow.
    – xWaZzo
    el 5 dic. 2016 a las 21:36
  • jsfiddle imposible por el momento. tengo la página hospedada en un "http" sin la "s", por lo que bloquea el request. Ahora mismo está subida una versión con la "M" en minúscula, y la página tiene un user/pass.
    – Zander
    el 5 dic. 2016 a las 21:41
  • @Cheshire necesitamos mayor información o no vamos a poder encontrar el problema exacto que está ocurriendo. Considera crear un ejemplo mínimo verificable
    – xWaZzo
    el 5 dic. 2016 a las 22:04
0

Utiliza el siguiente código css:

line-height: normal;
5
  • Acabo de probarlo, ahora actualizaré el post
    – Zander
    el 5 dic. 2016 a las 20:57
  • 1
    Buscando soluciones, mencionan que puede ser problema de la fuente, un valor de descender. Para lo que la única solución que dan es que se cambie ese valor en el archivo de la fuente.
    – Garrizano
    el 5 dic. 2016 a las 21:00
  • vaya, el único archivo que podía abrir era el .svg de la fuente, cambié ese valor tanto a mayor como a menor, pero no vi ningún cambio
    – Zander
    el 5 dic. 2016 a las 21:12
  • Según leí el que creo la fuente es el que debería hacer esos cambios, no sé si en el ttf o en cual archivo
    – Garrizano
    el 5 dic. 2016 a las 21:14
  • Ok, merci por la ayuda!
    – Zander
    el 5 dic. 2016 a las 21:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.