¿Sangría consistente de la primera letra con CSS?

Question

Estoy intentando implementar una sangría de la primera letra del primer párrafo del cuerpo del texto.Donde estoy atascado es en conseguir un espacio coherente entre la primera letra y el resto del párrafo.

Por ejemplo, hay una gran diferencia en el espacio entre una "W" y una "I".

¿Alguien tiene alguna idea sobre cómo mitigar las diferencias?Preferiría una solución CSS pura, pero recurriré a JavaScript si es necesario.

PD:No necesito necesariamente compatibilidad en IE u Opera

Answer 1

Aplicar esto a p.outdent:first-letter:

margin-left: -800px;
padding-right: 460px;
float: right;

Esto colocará la primera letra en el borde derecho del párrafo, luego la empujará hacia la izquierda más o menos el ancho del párrafo, luego moverá tanto la letra como todo el relleno al margen negativo grande del flotante para que el párrafo encaje en el margen y no intenta ajustarse.

Answer 2

Intenté usar una fuente de ancho fijo como 'courier new' y como los caracteres tienen más o menos el mismo ancho, se notaba mucho menos.

Editar: esta fuente es decente pero puede que solo funcione para Windows

p.outdent:first-letter {
    font-family: ms mincho;
    font-size: 8em;
    line-height: 1;
    font-weight: normal;
    float: left;
    margin: -0.1em 0 0 -.55em;
    letter-spacing: 0.05em;
}