Крошечные шрифты на веб-сайтах
Мои основные браузеры (FF и Chrome) настроены для 12-пиксельного шрифта. В обоих браузерах средство выбора шрифта показывает предварительный просмотр шрифта, и в обоих они одинакового размера и удобного размера для чтения веб-сайтов. Мой IE не позволяет мне устанавливать размер шрифта, но, похоже, по умолчанию он немного больше, чем Chrome.
На моем личном веб-сайте я использую XHTML и CSS и обозначил шрифт страницы как «средний» и использую этот размер шрифта для всего основного текста (текста «содержимого»). Когда я просматриваю сайт в IE 7, FF 3 и Chrome 0.4, шрифт отображается должным образом и соответствует средствам выбора шрифтов (кроме IE, где он немного больше).
НО, я захожу практически на любой другой веб-сайт (Google, StackOverflow, The DailyWTF, CodingHorror, Microsoft, Sourceforge, даже W3C и т.д.), и они все отображаются крошечными микроскопическими шрифтами - то, что я оцениваю, составляет 5-7 пикселей.
Это верно для 3 разных компьютеров, с 2 разными ОС (Vista и XP) и 4 разными мониторами (ноутбук, ЭЛТ и новый WS LCD).
Что с этим? Могу ли я упустить из виду что-то фундаментальное в дизайне веб-сайтов, которое мне нужно знать? Или все эти веб-сайты делают глупые вещи вроде установки шрифта на 50%, или 0,5 em, или x-small ??? Почему дизайнеры веб-сайтов не могут соблюдать мой выбор шрифта для текста содержимого (я понимаю, что боковые панели, нижние колонтитулы и тому подобное могут быть небольшими или очень маленькими).
Я был бы склонен думать, что это просто неосведомленные дизайнеры веб-сайтов, но, черт возьми, это несколько известных сайтов !!
Обновлено: Чтобы быть ясным, я не говорю, что использование em или% глупо, мне интересно, почему многие сайты, похоже, используют около 50% моего настроенного размера. Конечно, мой настроенный размер - это размер, в котором я хотел бы видеть текст.
Обновлено: Из спецификации CSS W3C: «В следующей таблице приведены рекомендации для пользовательского агента для отображения абсолютного размера в заголовок HTML и абсолютных размеров шрифта. «Среднее» значение - это предпочтительный размер шрифта пользователя и используется в качестве эталонного среднего значения.» - выделено мной.
Все пришли к единому мнению, что относительные размеры шрифтов на веб-сайтах основываются на типичном для браузера значении по умолчанию 16 пикселей, что, к сожалению, «такова жизнь». Но как насчет других систем - можем ли мы ожидать, что все браузеры будут работать по умолчанию?
По крайней мере, теперь я понимаю проблему.
Прежде чем выбрать окончательный ответ, я хочу оставить этот вопрос открытым на некоторое время, чтобы узнать, расходятся ли другие мнения.
Заключение: я сбросил все свои браузеры до 16 пикселей (18 пикселей на моих машинах с 125 DPI) и установил для моего веб-сайта размер шрифта: 90%. Это дает хороший размер экрана, и, конечно же, все мои любимые сайты теперь доступны для чтения. Спасибо за конструктивные ответы и живую поездку.
Это отличное сообщество.
Ответы 9
Установка шрифта в% или em - это глупость нет, на самом деле это рекомендуется W3C!
Прочтите мой пост - я не говорю, что использовать em или% - это плохо.
Прочтите мой ответ, а затем прочтите свой пост еще раз. Вы подразумевали, что использовать их было глупо: p
Шрифт слишком мелкий ... они устанавливают 50% ... это кажется тупым. Ergo,% не тупой, скорее 50% моего размера предпочтительный тупо.
Большинство браузеров - если не все - устанавливают размер шрифта по умолчанию на 16 пикселей. Многие веб-сайты также используют относительный размер шрифта. Это вызовет проблему, если размер шрифта в вашем браузере меньше этого.
Рассмотрим случай, когда в вашем браузере установлен размер шрифта по умолчанию 16 пикселей. Если шрифт веб-сайта 1.0em, он будет отображаться как 16 пикселей. Другой текст может быть 0,7em, так что он будет меньше. Однако, если размер шрифта вашего браузера по умолчанию составляет 12 пикселей, 1.0em будет 12 пикселей, а 0.7em будет нечитаемым, потому что он будет таким маленьким.
Решение состоит в том, чтобы оставить размер шрифта браузера по умолчанию равным 16 пикселей, что даст вам реалистичное представление о том, что видят другие, просматривая ваш сайт. Да, и использование относительного размера шрифта - это лучшая практика, а не ошибка.
Разве разработчик веб-сайта не должен предположить, что средний - это мой размер шрифта предпочтительный? В спецификации CSS определенно сказано, что это так.
Добро пожаловать в прихоти художника, дизайнеры не инженеры, они не думают о прагматизме в большинстве случаев, если только они не являются промышленными дизайнерами, и в этом случае они могут даже не понимать масштабирование шрифтов и просто использовать px. вместо pt,% или em.
+1. Но вы должны помнить, что может быть хорошо, что художники не инженеры. Иногда хорошо иметь красивый дизайн, но при этом менее удобен. Вам будет легче пользоваться им, как бы им ни было труднее пользоваться. Так устроен человеческий мозг: баланс между тем, что он представляет, и тем, что он любит делать.
@Monkey - разработчик не должен предполагать, что любой размер шрифта является предпочтительным размером пользователя. Вот почему ваша таблица стилей должна установить базовый шрифт на 100% или 1em (это будет то, что пользователь установил в своем браузере - или 16 пикселей по умолчанию, как упомянул Филип).
В большинстве современных браузеров% age позволяет выполнять динамический рендеринг. Ctrl- и Ctrl + - ваши друзья.
По крайней мере, большинство разработчиков осознали, что установка шрифта фиксированного размера - это плохо.
Я знаю о CTL + и CTL-, но раздражает необходимость делать это почти на каждой открываемой вкладке. И как сказать моему браузеру, что нужно отображать текст главной страницы с размером 50% от выбранного мной размера, - это хорошо?
- Используйте css для управления размером шрифта
- Укажите размер шрифта в em
- Используйте чит-коды (например, #, _) для разные браузеры, если шрифты отображаются в разных размерах на разных браузеры.
У меня была эта проблема с Chrome, но не в той степени, о которой вы говорите. Однако на некоторых страницах отображаются действительно крошечные шрифты, которые нормально выглядят в других браузерах. На некоторых форумах шрифт действительно становится меньше для каждого сообщения - поэтому я обычно могу прочитать первый пост и, возможно, второй, но все остальное - это просто пиксели :)
Я подозреваю, что проблема с уменьшением шрифта в блоге связана с тем, что они включают ответы на стороне сервера со стилем font: 80% в блоках вложенный, не понимая, что 80% относятся к размеру шрифта родителя.
Чтобы ответить на ваш EDIT: причина очевидна. Дизайнер страницы должен передать набор информации с различными свойствами, и изменение реальных размеров шрифтов является одним из (самых ранних) доступных ему инструментов типографики и верстки.
Вам, как зрителю, разрешено определять для себя удобный исходный уровень, но если дизайнер желает подчеркнуть или исключить важность части текста, это зависит от него, и это для вашего блага. Вы не должны больше завидовать ему высотой 50%, чем вы должны # 999 или курсив.
Все это зависит от дизайнера, который стоит своей соли и не злоупотребляет этим, что, к сожалению, может случиться.
Да, но зачем устанавливать размер содержимого вашей страницы на 1/2 размера, в котором я бы предпочитать видел содержимое любой данной страницы.
Если вы говорите, что размер шрифта в корне вроде "body" установлен на 50%, да, это звучит немного оскорбительно. Существуют эстетические аргументы в пользу ~ 80% или> 100%, но, как описано, это звучит необоснованно.
Приложение: базовый шрифт SO - "100%", Google - "средний" или "маленький", W3 - "наследуемый" - все это вы можете увидеть в firebug. Проблема может быть вашей.
@annakata - спасибо, посмотрю с помощью firebug. FTR, я не знаю, что это размер шрифта "корневого" элемента; Я скорее подозреваю, что уменьшился размер шрифта для основного текста (например, для <p> в вопросах SO).
@annakata - SO устанавливает шрифт основного текста на 80%, поэтому разве это не означает, что с этого момента базовый шрифт страницы становится 80% от того, что настроил браузер, или 9,6 пункта с моих настроенных 12 пунктов? Фактически, SO решила отображать все в 80% от моего предпочтительного размера, который крошечный ??
Меня не волнует размер шрифта, пока я могу это изменить. Это самая большая причина, по которой я ненавижу флеш-сайты. Не так давно я просматривал страницу вакансий для одной крупной компании, и шрифт был КРОШЕЧНЫМ. Моя инстинктивная реакция - нажать Ctrl- + (в firefox), но размер текста, отображаемого во флэш-памяти, изменить нельзя! Я сразу покинул сайт. У меня не лучшее зрение, поэтому мне нужно уметь увеличивать мелкий текст.
Еще одна проблема, с которой я часто сталкиваюсь, - это веб-сайты фиксированной ширины. Я использую мониторы с высоким разрешением (1600x1200, 1280x800 или выше), и нет ничего, что я ненавижу больше, чем то, что на моем экране больше половины пустого пространства. Что еще хуже, на некоторых веб-сайтах фиксированная ширина не увеличивается, когда я увеличиваю шрифты! Однажды я пытался прочитать статью после того, как увеличил текст, и в ней было ТРИ СЛОВА НА СТРОКУ и ЗАГРУЗКА пустого места на экране справа ...
Да, я тоже постоянно с этим сталкиваюсь. Бесит меня. Больше всего меня бесит, когда у меня остается по 3 слова в строке, а остальную часть недвижимости занимает реклама.
Software Monkey отправился воевать со всем миром. Он полностью не согласен с тем, как браузеры отображают размеры шрифтов, основные веб-сайты и то, как они устанавливают свои размеры шрифтов, и пытается вступить в горячие споры с каждым постером этой ветки.
У меня есть простой ориентир в жизни. Когда вы думаете, что все ошибаются, возможно, вы ошибаетесь.
Более того, даже если вы правы, зачастую разумнее идти вместе с окружающим миром, а не сражаться со всеми до единого.
Вот такая мысль. Если вы веб-дизайнер и знаете, что более 99% посетителей не собираются возиться со своими размерами браузера по умолчанию, тогда вы, безусловно, захотите, чтобы ваш сайт выглядел хорошо для этого большинства. Этот прагматизм объясняет нынешнюю ситуацию.
В любом случае удачи в твоих поисках.
Мой «квест» - добраться до корня того, что мне нужно делать на моем веб-сайте. Должен ли я придерживаться задокументированного и специфицированного определения предпочтительного размера или я должен использовать браузер по умолчанию (чего мне не приходило в голову, когда я публиковал).
W3C не указал, что относительные размеры шрифта относятся к 16pt, они указали, что они относятся к предпочтительному размеру пользователя - я действительно понимаю, что для большинства пользователей это браузер по умолчанию - и, к сожалению, браузеры по умолчанию слишком большой размер (а не 12-14)
@Monkey smashingmagazine.com/2011/10/07/…
Я бы сказал, что, поскольку для каждого браузера существуют разные стандарты, будут разные режимы рендеринга для шрифтов.
Кстати, Firefox и Opera (и, возможно, другие браузеры) допускают размер шрифта минимум для всех веб-страниц, поэтому, если 10 пикселей слишком малы для вас или вашего монитора, вы можете увеличить его, скажем, до 13 пикселей минимум, сохраняя при этом все остальное. тоже самое.