Совместимый размер шрифта в браузерах (веб-разработка)

При создании веб-страниц мы достигаем согласованного размера шрифта в браузерах. Я использовал что-то вроде "font-size: 11pt; font-family: Helvetica,'Lucida Grande'" в моем CSS, но текст выглядит по-разному в Firefox, IE, Google Chrome и Safari (и это даже не на разных платформах). В основном на той же машине, которая работает под управлением Windows Vista, я получаю другой внешний вид в разных браузерах.

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

Ответ 1

Используйте пиксели (пиксели) вместо pt (точек) для единиц размера шрифта. Тогда вы будете иметь дело с размерами пикселей.

Остерегайтесь, однако, в зависимости от того, как используется ваш сайт. Были иски (в США) по вопросам доступности на веб-сайтах, которые являются результатом "жесткого кодирования" размера шрифта.

Ответ 2

Вы захотите использовать CSS Reset, чтобы попытаться добиться согласованного поведения во всех браузерах.

http://meyerweb.com/eric/tools/css/reset/

http://developer.yahoo.com/yui/reset/

Ответ 3

При создании веб-страниц мы достигаем согласованного размера шрифта в браузерах

Для основного текста основного текста вы этого не делаете. Некоторым людям нужен больший текст, чтобы они могли читать его легче; встать на свой страх и риск. Используйте относительные размеры шрифта в таких единицах, как "em" или "%".

Для небольшого количества презентационного текста, где вам нужен размер текста, чтобы соответствовать элементам на экране размером с пиксель, используйте блок "px". Не используйте 'pt - это имеет смысл только для печати, он будет изменяться более или менее случайным образом при просмотре на экране.

Вы все равно никогда не получите текст точно такого же размера, потому что шрифты различаются на разных платформах - и Lucida Grande и Helvetica выглядят совсем по-другому.

Ответ 4

С этими двумя настройками вы можете достичь такого же внешнего вида шрифта:

font-size: 70%; // better than px

line-height: 110%; // required to make line heights the same

Протестировано: IE9, Firefox, Google Chrome

Ответ 5

Это не ответ, так как есть способы добиться того, что вам нужно, но я не слишком хорошо разбираюсь в них. Начните с "reset", который обычно предоставляет и отходит от таких фреймворков, как blueprint.

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