Калибровка шрифтов использует «их» все еще релевантных?

Эта статья, размещенная в разделе «Список друг от друга» Richard Rutter по-прежнему актуальна,

Как разместить текст в CSS http://www.alistapart.com/articles/howtosizetextincss/

Если вы посмотрите на итерации, вы увидите это,

размер текста в пикселях - Итерация 1

В результате это Safari и Firefox по-прежнему изменить размер текста, тогда как IE6 и IE7 нет. Текст может быть изменен в Opera и IE7, используя страницу Zoom Инструмент, который увеличивает макет страницы, текст и изображения внутри.

Размер текста в EMS - Итерация 2

Результаты показывают, что по всему Браузеры, текст в среднем браузере настройка отображается идентично Текст набор в пикселях. Это также демонстрирует этот текст размером в EMS Может быть изменен во всех браузерах. Однако IE6 и IE7 недопустимо преувеличивать малость и восьмальность из измененного изменения текста.

ОБСЛУЖИВАНИЕ ОБСЛУЖИВАНИЯ В процентах - итерация 3

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

Установка высоты линии в пикселях - Итерация 4

Результаты показывают, что 18px Высота линии унаследована всем текстом на странице .... к сожалению Результаты показывают, что высота линии 18px не масштабируется на IE6 и IE7 при тексте изменяется, что означает самый большой Настройка появляется для сквоша текста.

Установка высоты линии в EMS - итерации 5

Результаты показывают точные, последовательно изменяемый текст и Высота линии во всех браузерах. Идеально. Или почти так.

Проблема моноспоса Safari - итерация 6

Результаты показывают последовательно измененные Текст и высота линии по всему браузеры, в том числе моноспортированные Текст в сафари 2.

Даже если эта статья устарела 2007 год, она все еще очень актуальна. Настройка размеров шрифта - это больше, чем просто настройка EM (или PX).

Я никогда не использую размеры пикселей для шрифтов в любой программе (кроме Photoshop, который я полагаю, поскольку он только что имел его в пикселях по умолчанию). Я всегда использовал размер точки (например, в Word) и с тех пор переехал на масштабирование относительно в CSS с EM . Я устанавливаю тело размер шрифта , затем масштабируется с использованием EM .

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

Раньше я создавал сайты с масштабированием в полном объеме. Фактически, каждое измерение на сайте моей компании ( http://kingdesk.com ) основано на em. Во всей моей недавней работе я отказался от такой практики по четырем причинам:

1. EM Maintenance - это херня. Одно дело - правильно вычислить вложенные элементы во время первоначального проектирования, но переориентация через некоторое время обременительна - вплоть до простого ввода фиксированных единиц за счет нарушения эффекта электронного масштабирования.
2. За последние 2 года браузеры прошли долгий путь. Текущая версия всех основных браузеров изначально поддерживает масштабирование страниц.
3. Это правда, что эти сайты менее доступны для слабовидящих пользователей в IE6, но для них есть множество бесплатных инструментов, которые решают эту проблему. Если нет разумной альтернативы, у меня есть моральное обязательство облегчить их нужду. Если у моей входной двери есть 4 пандуса, доступные ADA, я не собираюсь демонстрировать ступеньки и заменять их пятой.
4. Я считаю, что это экономит мне 20% времени на разработку.

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

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

Не используйте их, когда вы действительно имеете в виду%. Единственная причина, по которой em работает, заключается в том, что в CSS 1em, который, как предполагается, представляет размер буквы «M» ( em происходит от «M») на самом деле ] эквивалентный размеру шрифта. Итак, когда вы пишете 1em, вы фактически пишете «100% унаследованного font-size ». Em предназначен для использования при указании размеров блока относительно размера шрифта (что бывает редко, действительно очень редко).

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

Не сломается ли мой макет каким-то волшебным образом, если я воспользуюсь ems? Конечно, нет, это просто принятие желаемого за действительное!

Предлагают ли современные браузеры масштабирование текста?

Короче говоря: не по умолчанию. Браузеры по умолчанию предлагают масштабирование страницы, и это скрыто глубоко внутри строки меню, обычно просматриваемой. Вы можете ожидать, что некоторые из ваших пользователей знают сочетание клавиш Ctrl + MouseWheel, но фактическое масштабирование текста сложнее. В связи с современной тенденцией отказа от панели меню (примечание: на момент написания этой статьи бета-версия FF4 также покончила с ней по умолчанию), вы должны учитывать пользователей, которым требуется масштабирование текста, это те , которые действительно в этом нуждаются . Я говорю это, потому что тенденция учебников / советов в сети состоит в том, чтобы просто прославлять эластичный макет и иметь возможность изменять размер текста, но на самом деле это не проблема.К сожалению, слишком многие «профессионалы» в макетах с эластичной / эластичной / текучей средой полностью упускают из виду суть: сайт должен выглядеть нормально, если я увеличиваю масштаб до 300% или выше! Если это просто хорошо смотрится на таких вещах, как 130% или 170%, это совершенно бессмысленно и пустая трата усилий и действительно полезно только тогда, когда они были достаточно глупы, чтобы установить свой базовый шрифт примерно на 10 пикселей или ниже (слишком маленький для больших объемов текста) .

Другая проблема заключается в том, что «некоторые браузеры не увеличивают масштаб», из них IE6 является единственным актуальным, поскольку он все еще занимает небольшую долю Интернета. Если вы думаете иначе, вы, вероятно, читали статьи 2002 года или около того (т.е. через год после его появления), просыпайтесь и осознайте реальность:

• Ваша аудитория использует IE6 и не знает ничего лучшего? Если у вас нет статистических данных, предположите: НЕТ. Кроме того, следует ли сначала разрабатывать для IE6? Ответ всегда: черт возьми, НЕТ. Создавайте дизайн в самом технически совершенном, всеобъемлющем и совместимом со стандартами браузере, который вы только можете найти. Обычно перетягивание каната идет между Safari и Opera. Firefox на самом деле не так уж и сильно отстает, но обычно реализует их как правила -moz- и медленно конвертирует в правила, отличные от -moz-.

• Каковы шансы того, что кто-то, использующий IE6, действительно знает об инструментах размера шрифта? Если есть сомнения, используйте Zero. Каковы шансы того, что люди, действительно использующие IE6 (в наши дни), заботятся о размере шрифта всего? Если есть сомнения, используйте Zero.

• Если у вас действительно есть пользователи IE6, вы можете сделать одну невинную вещь - дать им информативный толчок в правильном направлении, дискретно.Пример: «Ваш браузер Internet Explorer 6, содержит многочисленные недостатки безопасности . Для вашей безопасности и безопасности активов вашей компании вам рекомендуется обновить (или попросить администратора обновить) до более новой версии : http://www.microsoft.com/nz/windows/internet-explorer/default.aspx (это абсолютно бесплатно!) "

Также может быть полезно знать текущую тенденцию (поскольку на такие сайты, как Google) убить IE6 как можно скорее! Вы ни в коем случае не являетесь профессионалом, поддерживая этот проклятый браузер почти десятилетней давности вместе с другими чудовищами, такими как IE5.5. Прежде чем читать советы по веб-дизайну, проверьте дату.

Как использовать различные размеры шрифта

• pt («точки») - это размер для печати, а только для печати ! Точка определяется как 1/72 дюйма и примерно 0,3527 мм. Никогда не используйте pt для стилей экрана , потому что браузеру придется угадывать; и многие браузеры ужасно не умеют угадывать! pica - 12pt.

  Хотелось бы, чтобы это было вежливо, но всякий раз, когда вы видите точки, используемые для стиля экрана (будь то онлайн-скрипт сброса, ванильный скрипт и т. Д.), Автор был идиотом. Даже один простой контрольный просмотр должен был показать, что точечное измерение отключено.

• ex (сокращение от «x-height») - это причудливая единица CSS, которую, если вам повезет, вы никогда не сможете использовать.

• px («пиксель») - это более точная кроссбраузерная И кроссплатформенная согласованная единица.Хотя ваш браузер не может точно определить высоту экрана (в мм / дюймах), точность пикселей довольно проста. Пользовательские пиксели при установке (базового) размера шрифта для отображения на экране различных ключевых элементов, в частности, когда эти элементы сами по себе являются идеальными по пикселям. Простой пример: текст на изображении. Даже если вы используете только значения em или% во всем коде, вы все равно полагаетесь на базу 16 пикселей, установленную браузером (при отображении для экрана).

• % - относительный размер. Используйте% всякий раз, когда вы просто хотите сказать:это во много раз больше / меньше, чем у родителя. Его можно использовать в качестве основы, и, таким образом, этот стиль теоретически можно использовать как для экрана, так и для печати и других средств массовой информации. Но (и это только мое собственное мнение) вы, вероятно, захотите создать отдельный стиль для каждого носителя, где, по крайней мере, вы установите наиболее подходящий базовый размер шрифта и семейство для этого конкретного носителя. Вряд ли это «слишком много работы».

• em (как в «M») относится к размеру буквы M и является мерой типографики (например, point ), но в CSS это просто равно font- size, при работе с экраном . Если вы имеете дело с печатью, бог знает, не вернется ли она просто к типографически правильному «размеру M» вместо «размеру шрифта» (помните, что CSS не только для экрана). Лучше всего использовать em при указании размера охватывающей рамки относительно текста. Используйте его только тогда, когда вы не можете использовать%, так как процентное соотношение более четкий и лучший код в целом.

• именованных размеров: xx-small, x-small, small, normal, large и т. Д. Следует избегать! Вы могли заметить, хотя экспериментируя, что «маленький» - это практически 12 пикселей или 75%, но он намного четче. Однако они несовместимы с кроссбраузерностью. Small в Firefox меньше, чем small в Safari, поэтому никогда не используйте их.

Практическое правило: всегда записывайте то, что вы имеете в виду, в контексте, используя максимально сжатый синтаксис.

Настоящий вопрос: как дать моим пользователям возможность изменять размер текста.

Пользователи, которым нужен более крупный текст, - это пользователи с плохим зрением. Не следует путать плохое зрение с полной слепотой, когда текст имеет определенный размер.Учитывая, насколько широки типы проблем со зрением, обычно небольшое увеличение размера, например, на 130% или 160% или около того, просто недостаточно. Вы просто пытаетесь выглядеть нарядно, а это вообще не работает !

Вы хотите дать пользователям возможность изменять размер текста, который они хотят прочитать. И рекомендуется предлагать простой A / A (2-й «A» должен быть меньше; полезно дополнить его текстом, например, «нормальный», «в 2 раза больше» и т. Д.). Разместите это где-нибудь на виду, чаще всего в правом верхнем углу контента , который пользователь желает прочитать. Контекст «контента» очень важен:

• Пользователи заботятся только о том, что они хотят прочитать. Они не совсем слепые, и увеличение базового размера шрифта не совсем «излечивает слепоту». Если у вас заголовок 50 пикселей, да, они, вероятно, его видят нормально, нет необходимости делать его 150 пикселей! Вы можете очень легко установить переключатель размера шрифта на статью, и он будет влиять только на тело, и это отлично сработает!

• Сделайте навигацию по сайту удобной для пользователей; если вам нужен волшебный переключатель, чтобы увеличить этот текст, чтобы некоторые из ваших пользователей могли его прочитать, вам, вероятно, нужно увеличить его по умолчанию! Примечание: интерфейс, который предназначен для многократного использования, например, панель управления, подвергается меньшему влиянию, поскольку вашим пользователям нужно всего лишь надеть очки и прочитать этот мелкий шрифт один раз, но он все равно должен быть легко доступен для всех.(Я имею в виду методы предотвращения случайного нажатия деструктивных действий, которые имеют приоритет над такими проблемами)

Если вы должны сделать весь свой сайт «эластичным» (то есть динамическим на основе размера шрифта)

• сначала и, прежде всего, убедитесь, что если пользователь использовал одну из функций браузера «Без стиля» или «Стиль доступности» (см. Opera), ваш сайт выглядит как минимум прилично. Пользователи с реальными проблемами (а не просто дурачиться) с большей вероятностью воспользуются ими, чем сразу попытаются изменить размер.

• Затем убедитесь, что у вас есть видимый переключатель для изменения размера текста. Современные браузеры не изменяют размер текста по умолчанию, не думайте, что ваши пользователи собираются изменить эти значения по умолчанию.

• Когда пользователи используют переключатель, убедитесь, что на разных уровнях настраиваются заголовки и различные другие элементы. Убедитесь, что все становится больше, но пусть такие вещи, как заголовки, только немного увеличиваются, чтобы они не заполняли весь экран (предположим, что окна пользователей не развернуты).

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

• Хотя все это анализирует высоту строки и обязательно выбирает значение, которое изящно масштабируется для вашего приращения и шрифта.

Примечание: очень большие размеры шрифта - не редкость, все наоборот. Как правило, предпочтительные размеры составляют 12 пикселей (никогда не делайте ничего меньше для базы!), 16 пикселей и просто monster large .