первый вопрос о 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 ищет способ или формулу, чтобы полностью выровнять их, без использования проб и ошибок на левом краю!
Все идеи приветствуются, спасибо.
То, что вы видите, это не дополнение, а какой-то "кернинг" шрифта. Не совсем так, но вроде. Большая большая проблема заключается в том, что он отличается для каждого шрифта и даже для каждой буквы. попробуйте заменить
<h1>B</h1>
<h1>J</h1>
теперь пространство намного меньше!
это пространство зависит от шрифта, размера и буквы. Итак, я не думаю, что вы можете управлять этим
как я понял, что вы хотите этого?:
h6 {
float: left;
position: relative;
left: 11px;
}
здесь: http://jsfiddle.net/jgYBD/4/
Потенциальный трюк: Добавить :first-letter { margin-left: -0.08em; }. Их необходимо скорректировать для вашего шрифта, но вы можете применить его глобально, если хотите. Это приводит к небольшому сдвигу влево, но вы можете безнаказанно изменять размер шрифта H1 и выравниваться.
Смотрите это обновление в jsFiddle.
Он не исправляет проблему "J", хотя это может быть спорным моментом для вас.
Попробуйте это
h6 { padding: 0 10px; }