В Firefox шрифт более узкий, в сравнении с другими браузерами

Question

[adev]

Столкнулся с неожиданной проблемой при верстке сайта. Firefox почему-то отображает шрифт в блоке более узко, чем во всех остальных браузерах. В IE, Safari, Chrome, Opera шрифт выглядит одинаково, а в Firefox, как будто интервал между буквами меньше. Никаких свойств типа word-spacing или letter-spacing не указано. Пробовал указать специально для Firefox любой из этих параметров — идеально выровнять все равно не получается.



На скриншоте сверху Firefox, снизу Chrome. И четко видно, что строчка в Лисе заканчивается на несколько пикселей раньше.
Если кто сталкивался с подобной проблемой, пожалуйста, подскажите, где искать ответ))

Comments

[Игорь Алексеенко]

А перед вами стоит задача сверстать текст именно так чтобы он выглядел одинаково во всех браузерах? Просто дело в том, что разные браузеры по разному рендерят шрифты и тут скорее всего не получится сверстать пиксель в пиксель.

Текст в браузере — это самая гибкая часть, которая редко верстается пиксель в пиксель, потому что нужно оставлять пространство для маневра, ведь текст — самая меняюащяся часть на сайте.

[adev]

Да, задача чтобы был одинаковым, от этого зависит высота блоков и стабильность верстки. Понимаю, что рендерит Firefox где-то не так, как другие. Но удивительно, что проблема наблюдается только с ним. Вот и пытаюсь привести к общему «знаменателю»…

Answer 1

[Роман]

Если шрифт не важен, то можно поиграться со шрифтами.
Например при font-family: times; расхождение как на примере, а при font-family: sans; расхождение не больше пикселя.

Comments

[adev]

Да, расхождение меньше. Шрифт не так важен. Спасибо, как вариант )

[adev]

В общем, получается если брать sans-serif и задавать word-spacing -0.6 специально для firefox. Тогда изменения заметны только в строке длинной больше 200 символов… Вот такое решение
Спасибо

Answer 2

[message]

когда смотрел скринкаст от Paul Irish по Boilerplate он говорил что эта строка делает шрифт одинаковым во всех браузерах. Не знаю на сколько правда, но можете проверить. Хотя возможно на letter spacing это не влияет.

Comments

[adev]

Sans-serif в принципе отображается на большинстве платформ наиболее корректно. Отсюда решение — все же выбрать этот тип шрифта

[Konstantin Coocheenin]

Вот эта строка? Переехал репозиторий
https://github.com/h5bp/html5-boilerplate/blob/mas...

Answer 3

[Сергей]

А может дело не в верстке? Зажмите ctrl и покрутите колесом мыши.

Comments

[adev]

ммм… в смысле масштабировать или посмотреть вблизи?

[Сергей]

Может масштаб отличается от других браузеров., поэтому строчки разные?

[adev]

Нет, по умолчанию. Шаг масштабирования, к тому же, заметно больше. Здесь разница в несколько пикселей.

[Сергей]

Тогда можно попробовать поэксперементировать с nbsp; и
но это все равно костыли

[adev]

Увы, в моем случае nbsp; не вариант

Answer 4

[Марк]

Попробуйте изменять вот этот параметр текста: developer.mozilla.org/en/CSS/text-rendering

нравоучения mode on
Опираться на одинаковость рендеринга все равно нельзя. Возьмите любой браузер на Андроиде или iPhone / iPad, Opera Mini, тот же Firefox в линуксе или макоси — результат всегда будет отличаться.

Comments

[adev]

text-rendering я уже смотрел, он немного за другие параметры отвечает. Здесь же, судя по всему, как уже отметил WNeZRoS особенность отрисовки разных шрифтов мозилой (сглаживание).
Насчет нравоучения согласен, но условия верстки такие, что изначально глобальная гибкость невозможна. Однако отображение должно быть одинаковым при работе браузеров с настройками «по умолчанию». Понятно, что при масштабировании верстка немного плывет, но кстати, не так критично, как с разницей Firefox–все остальные браузеры.
И еще, как раз с iOS и Opera Mini почему-то таких проблем нет. Шутит исключительно Лиса )))

Answer 5

[Денис Доманский]

Попробуйте в about:config поставить значение true значение параметру gfx.direct2d.disabled.