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

StackOverflow https://stackoverflow.com/questions/521832

  •  22-08-2019
  •  | 
  •  

Вопрос

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

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

Это было полезно?

Решение

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

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

Другие советы

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

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

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

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

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

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

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

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

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

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

Проверенный:IE9, Firefox, Google Chrome

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top