Ширина шрифта Arial в разных браузерах. С чем это связано, как бороться?

Question

[p7161]

Есть код.
CSS

 .block {
padding:20px;
background:red;
float:left;
font-family:Arial;
font-size:14px;
}

HTML

<div class="block">
текст текст
</div>

В итоге мы получаем красный блок. Как он выглядит в разных браузерах:


Вопрос! Как бороться с лишними двумя пикселями в ширине блока (их может быть и больше и меньше, в зависимости от длинны текста). Я так понимаю проблема в рендеринге шрифтов в разных браузерах. Фиксированный width для .block не предлагать.

Answer 1

[dom1n1k]

Если «фиксировать width не предлагать», то практически никак.
То, что шрифты рендерятся по-разному на различных ОС — известный факт и ничего с этим не поделать.
Если вам критичны размеры блоков до пикселя, то и управлять нужно ими (размерами блоков) напрямую. А если вы управляете ими косвенно (через размеры текста) — погрешности неизбежны.

Если бы был известен контекст задачи, то возможно, можно было бы подсказать какие-то половинчатые решения-костыли. Но именно в такой постановке — никак.

Comments

[p7161]

Спасибо, костыли и сам могу придумать.

Answer 2

[Александр Борисович]

так такое всегда будет. Не стоит заморачиваться а стоит искать универсальные варианты

Answer 3

[Алексей]

Шрифты в пикселях… однако…

Comments

[dom1n1k]

А в чем они должны быть?

[Сергей Протько]

em хотя-бы

[dom1n1k]

А не хотя бы? В идеале что должно быть? :)

[jj_killer]

pt

[dom1n1k]

Поясню.
Многочисленные статьи, предписывающие использовать только относительные единицы для размера шрифта, были актуальны и справедливы 3+ года назад. Когда браузеры не умели корректно масштабировать страницы целиком. И увеличение шрифта в настройках нередко приводило к поломке лейаута. Сегодня эти рекомендации потеряли актуальность.
На текущий момент пиксели, em-ы и проценты — абсолютно рабочие варианты при верстке. В некоторых ситуациях могут быть несколько более предпочтительны em-ы, в некоторых — px. Но в абстрактном-усредненном случае все три перечисленных варианта равноправны и нормальны.

[dom1n1k]

pt — чисто «бумажная» единица. На экране её применение не оправдано ничем.

[jj_killer]

Компьютерный пункт равен 0,353 мм, а полиграфический пункт — 0,376 мм.

[dom1n1k]

Замечательно, но какое отношение миллиметры имеют к экрану? :) Там только пиксели есть. И эта конвертация отнюдь не однозначна.
Не существует никакой формулы, которая позволила бы совершенно однозначно предсказать, как будет выглядеть шрифт, заданный в pt, на всех системах/ос/браузерах/етц. Её в принципе не может быть.

[jj_killer]

Именно тут вы правы. Шрифты совершенно по разному растягиваются до нужных px в разных ОС и броузерах. Зачастую консервативно указанный размер в pt выглядит лучше в старых ОС, нежели пиксели. Совсем недавно столкнулся с этим когда верстал в для xp, особенно заметно для заголовков. В принципе я не заморачивался и подобрал приемлемый результат в px.