Css: Как горизонтально выравнивать шрифты разных размеров

первый вопрос о SO!

Im, пытающийся "идеально подобрать пиксель", выравнивает две строки текста, каждая строка с другим размером шрифта.

<style type="text/css">
    *   { font-family: sans-serif;}
    div { float: left;}
    h1  { font-size: 150px;  margin-bottom:-30px; }
</style>

        <div>
            <h1> B </h1>
            <h6> B-L.align </h6>
        </div>
        <div>
            <h1> L </h1>
            <h6> L.align </h6>
        </div>

здесь: http://jsfiddle.net/jgYBD/1/

Если вы посмотрите на образец, вы заметите, что у более крупного шрифта больше "? padding?" чем меньший шрифт. делая их смещенными на несколько пикселей.

Im ищет способ или формулу, чтобы полностью выровнять их, без использования проб и ошибок на левом краю!

Все идеи приветствуются, спасибо.

Ответ 1

То, что вы видите, это не дополнение, а какой-то "кернинг" шрифта. Не совсем так, но вроде. Большая большая проблема заключается в том, что он отличается для каждого шрифта и даже для каждой буквы. попробуйте заменить

<h1>B</h1>

<h1>J</h1>

теперь пространство намного меньше!

это пространство зависит от шрифта, размера и буквы. Итак, я не думаю, что вы можете управлять этим

Ответ 2

как я понял, что вы хотите этого?:

h6 {
    float: left;
position: relative;
left: 11px;
}

здесь: http://jsfiddle.net/jgYBD/4/

Ответ 3

Потенциальный трюк: Добавить :first-letter { margin-left: -0.08em; }. Их необходимо скорректировать для вашего шрифта, но вы можете применить его глобально, если хотите. Это приводит к небольшому сдвигу влево, но вы можете безнаказанно изменять размер шрифта H1 и выравниваться.

Смотрите это обновление в jsFiddle.

Он не исправляет проблему "J", хотя это может быть спорным моментом для вас.

Ответ 4

Попробуйте это

h6 { padding: 0 10px; }