Editar: aquí hay un Fiddle de la situación.

Bien, estoy construyendo una página web, pero me encuentro con una irritante peculiaridad de la fuente. Parece que las fuentes sans-serif se niegan a asentarse precisamente en el borde izquierdo de la caja en la que se encuentran.

Aquí hay algo de HTML experimental para demostrar el problema:

<html>
<head>
    <style>
        .box {
            margin: 30px 0px 0px 30px;
            border: 1px solid #f00;
        }
    </style>
</head>
<body style="font-size: 36px;">
    <!-- text beginning with 'M', which has serifs protruding from the left side in a serif font -->
    <div class="box" style="font-family: 'Segoe UI';">My text</div> <!-- sans-serif -->
    <div class="box" style="font-family: 'Times New Roman';">My text</div> <!-- serif -->
    <div class="box" style="font-family: 'Arial';">My text</div> <!-- sans-serif -->
    <div class="box" style="font-family: 'Garamond';">My text</div> <!-- serif -->

    <!-- text beginning with 'T', which has no left-protruding serifs in a serif font -->
    <div class="box" style="font-family: 'Segoe UI';">Text</div> <!-- sans-serif -->
    <div class="box" style="font-family: 'Times New Roman';">Text</div> <!-- serif -->
    <div class="box" style="font-family: 'Arial';">Text</div> <!-- sans-serif -->
    <div class="box" style="font-family: 'Garamond';">Text</div> <!-- serif -->
</body>
</html>

¿Alguna idea sobre los atributos de CSS que pueda configurar / modificar para que el texto se asiente en el borde izquierdo de su contenedor? Es decir, elegante, realmente no me gustaría una solución personaje por personaje.

6
stack 8 may. 2012 a las 23:24
Este es un problema específico del navegador y / o sistema operativo, porque no puedo reproducirlo en mi Mac usando Chrome. ¿Proporcionar una captura de pantalla? Sin embargo, probaría algo como text-indent: -1px;
 – 
Athoxx
8 may. 2012 a las 23:32
Lo reproduzco con éxito con 'Google Chrome' e 'Internet Explorer 8'. Creo que tiene algo que ver con la representación de la fuente, y tengo mucha curiosidad por saber por qué.
 – 
user1372494
8 may. 2012 a las 23:36
Lo estoy viendo en IE9 y Opera 11.62.
 – 
stack
8 may. 2012 a las 23:38
Aquí hay un jsfiddle
 – 
TLS
8 may. 2012 a las 23:40
1
Además, la sangría del texto no parece estar haciendo lo que quiero. El texto se mueve hacia la izquierda y fuera del contenedor de manera constante para cada letra; esto no funcionará para las letras que ya están en la posición correcta (por ejemplo, 'P').
 – 
stack
8 may. 2012 a las 23:54

1 respuesta

La mejor respuesta

No estoy seguro de si quiere decir eso, pero probablemente sea el "margen" de la M a su borde ...

Bueno, déjame explicarte las fuentes ...

Cada letra tiene un "recuadro" de tamaño fijo en el lugar en el que se encuentra. Por lo tanto, si el creador de la fuente no usa el espacio completo, ¡este efecto podría ocurrir! Significa que no puedes hacer nada en contra de esto, excepto editar la fuente.

Aquí hay un ejemplo (tutorial sobre cómo crear fuentes), de lo que quiero decir.

Imagen de ejemplo, donde ves la distancia de la M superior ... así que si no haces que el guión de la M izquierda sea curvo, hazlo recto, como en tu versión, ¡tendrás un "espacio" entre tu borde y la M! :)

Font Character Box

Puede ver que el carácter es correcto tal como está, si selecciona su texto. La selección "azul" le mostrará que va directamente con el borde y no tiene espacio, ¡qué no sucedería si hubiera un error de renderizado o css!

Espero poder ayudarte a responder esta pregunta.

2
creativeby 9 may. 2012 a las 01:07