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

Question

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

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

Answer 1

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

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

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

Answer 2

Как при создании веб-страниц добиться одинакового размера шрифта в браузерах

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

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

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

Answer 3

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

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

Answer 4

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

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

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

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

Answer 5

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

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