Не используйте em, когда вы действительно имеете в виду%.Единственная причина, по которой em работает, заключается в том, что в CSS 1em, который должен представлять размер буквы «M» ( em происходит от «M») на самом деле эквивалентно размеру шрифта.Поэтому, когда вы пишете 1em, вы на самом деле пишете «100% от унаследованного размера шрифта ».Em предназначен для использования при указании размеров блока относительно размера шрифта (что редко, действительно очень редко).
Это отверстие "вы не можете изменить его размер в браузере" составляет современный дневной миф , который восходит к каменному веку, когда изменение размера текста браузерами было функцией внешнего интерфейса, и поэтому в нем все еще была доля правды.
Не сломается ли мой макет магическим образом, если я использую ems? Конечно, нет, это просто желаемое за действительное!
Предусматривают ли современные браузеры масштабирование текста?
Короче: не по умолчанию.Браузеры предлагают масштабирование страницы по умолчанию, и это скрыто глубоко в строке меню, обычно видимой.Вы можете ожидать, что некоторые из ваших пользователей будут знать сочетание клавиш Ctrl + MouseWheel, но реальное увеличение текста сложнее.С современной тенденцией к отказу от строки меню (примечание: по состоянию на момент написания бета-версия FF4 по умолчанию также покончила с ней), вы должны учитывать, что пользователям, которым требуется масштабирование текста, действительно нужны .Я говорю это потому, что тенденция обучающих программ / советов в сети заключается в том, чтобы просто прославлять эластичный макет и возможность изменять размер текста, но на самом деле это не проблема.К сожалению, слишком много «профессионалов» в макетах упругих / их / жидких полностью упускают из виду: сайт должен выглядеть хорошо, если я увеличу до 300% или выше!Если это выглядит просто хорошо для таких вещей, как 130% или 170%, то это совершенно бессмысленно и бесполезная трата усилий, и только действительно полезно, когда они были достаточно глупы, чтобы установить базовый шрифт примерно на 10px или ниже (слишком мал для больших текстовых текстов).
Другая проблема заключается в том, что «некоторые браузеры не масштабируют», из них IE6 является единственным релевантным, потому что он все еще занимает небольшую долю в Интернете.Если вы думаете иначе, вы, вероятно, читали некоторые статьи 2002 года или около того (т. Е. Через 1 год после его появления), осознав реальность:
Ваша аудитория использует IE6 илучше не знает?Если у вас нет статистической поддержки, предположим: НЕТ.Кроме того, вы должны сначала разработать для IE6?Ответ всегда: ада НЕТ.Разработайте в самом технически продвинутом, всеобъемлющем и совместимом со стандартами браузере, который вы можете найти.Обычно перетягивание каната происходит между Safari и Opera.Firefox не сильно отстает, но обычно реализует их как -moz- rules и медленно конвертирует в не -moz- правила.
Каковы шансы того, кто использует IE6?на самом деле знать инструменты размера шрифта?Если сомневаетесь, примите Ноль.Каковы шансы того, что люди на самом деле используют IE6 (в наше время) заботятся о размере шрифта всех вещей?Если вы сомневаетесь, принимайте ноль.
Если у вас действительно есть пользователи IE6, то одна невинная вещь, которую вы можете сделать, это дать им информативный толчок в правильном направлении, дискретно.Пример: "Ваш браузер, Internet Explorer 6, содержит множество недостатков безопасности . Для вашей безопасности и безопасности активов вашей компании рекомендуется обновить (или попросить администратора обновить) до более новой версии.: http://www.microsoft.com/nz/windows/internet-explorer/default.aspx (это абсолютно бесплатно!) "
Также может быть полезно знать, что текущая тенденция (для таких сайтов, как Google) составляет убей IE6 как можно скорее! Ты ни в коем случае не профессионал, поддерживая этот проклятый браузер почти десять лет назад вместе с другими чудовищами, такими как IE5.5.Прежде чем читать советы по веб-дизайну, проверьте дату.
Как использовать шрифты разных размеров
pt («точки») - размер для печати, а только для печати !Точка определяется как 1/72 дюйма и примерно 0,3527 мм. Никогда не используйте pt для стилей экрана , потому что браузер должен будет угадать;и многие браузеры действительно ужасно угадывают!A pica составляет 12 пт.
Хотелось бы, чтобы был вежливый способ сказать это, но всякий раз, когда вы видите точки, используемые для стиля экрана (будь то сценарий сброса в режиме онлайн, сценарий ванили и т. Д.), Автор был идиотом.Даже одно простое пробное представление должно показывать, что измерение точки отключено.
ex (сокращение от x-height) - это причудливая единица CSS, которая, есливам повезло, что вы никогда не сможете использовать.
px ("пиксель") - более точная кросс-браузер И кросс-платформенная единица измерения тамявляется.В то время как ваш браузер не может точно знать, какой у экрана (в мм / дюймах) экран, точность pixel perfect довольно проста.Пользовательские пиксели в настройках (базовых) размеров шрифта для отображения на экране различных ключевых элементов, в частности, когда эти элементы сами по себе являются идеальными.Простой пример: текст на изображении.Даже если вы используете только значения em или% во всем коде, вы все равно полагаетесь на базу 16 пикселей, установленную браузером (при отображении на экране).
% - относительный размер.Используйте% всякий раз, когда вы просто хотите сказать: это во много раз больше / меньше, чем родитель.Он может быть использован в качестве основы, и, таким образом, теоретический стиль может быть использован как для экрана, так и для печати и других средств массовой информации.Но (и это только мое личное мнение) вы, вероятно, захотите создать отдельный стиль для каждого носителя, где по крайней мере вы устанавливаете наиболее подходящий базовый размер шрифта и семейство для этого конкретного носителя.Это вряд ли "слишком много работы".
em (как в "M") относится к размеру буквы M и является типографским измерением (как point ), но в CSS он просто равен размеру шрифта, при работе с экраном .Если вы имеете дело с печатью, бог знает, не вернется ли она к типографски правильному «размеру М» вместо «размера гарнитуры» (помните, что CSS не только для экрана).Наиболее целесообразно использовать em при указании размера для вмещающего блока относительно текста.Используйте его только тогда, когда вы не можете использовать%, так как процент более понятен и лучше код в целом.
именованные размеры: xx-small, x-small, small, normal,больших и т. д. следует избегать!Вы можете заметить, хотя экспериментирование, что «маленький» составляет практически 12px или 75%, но намного четче.Тем не менее, они противоречивы кросс-браузер.Small в Firefox меньше, чем small в Safari, поэтому никогда не используйте их.
Правило большого пальца: всегда пишите то, что вы имеете в виду, в контексте с кратким синтаксисом.
Реальный вопрос: как я могу дать своим пользователям возможность изменять размер текста
Пользователи, которым нужен крупный текст, - это пользователи с плохим зрением.Плохое зрение не следует путать с полной слепотой, когда текст имеет определенный размер.Учитывая, насколько широки типы глазных проблем, обычно предлагая небольшое увеличение размера, например, 130% или 160% или около того, просто не достаточно близко.Вы просто пытаетесь проявить фантазию, и это совсем не работает !
То, что вы хотите, - это дать вашим пользователям возможность изменять размер текста, который они хотят прочитать.И рекомендация состоит в том, чтобы предложить простой A / A (второе «A» должно быть меньше; полезно дополнить его текстом «нормальный», «в 2 раза больше» и т. Д.).Поместите это где-нибудь видимым, наиболее распространенная позиция находится в правом верхнем углу содержимого , которое пользователь хочет прочитать.Контекст «контента» очень важен:
Пользователи заботятся только о том, что они хотят, они хотят прочитать.Они не являются полностью слепыми, и вы увеличиваете базовый размер шрифта - это не совсем "излечение слепоты".Если у вас есть заголовок в 50px, да, они, вероятно, могут видеть это хорошо, нет необходимости делать это в 150px!Вы можете очень легко включить переключатель размера шрифта в статье, чтобы он влиял только на текст, и это сработает замечательно!
Сделайте ваш сайт удобным для пользователя;если вам нужен волшебный переключатель, чтобы сделать этот текст больше, чтобы некоторые из ваших пользователей могли его прочитать, то вам, вероятно, нужно сделать его больше по умолчанию!Примечание. Интерфейс, предназначенный для многократного использования, такой как панель управления, менее подвержен влиянию, поскольку вашим пользователям нужно только надеть очки и прочитать этот мелкий шрифт один раз, но все же он должен быть в значительной степени легкодоступным для всех.(Я имею в виду приемы, по которым трудно совершать деструктивные действия, чтобы случайно нажать на них, которые имеют приоритет над такими проблемами)на размер шрифта)
в первую очередь убедитесь, что пользователь должен использовать один из браузеров с функциями «Нет стиля» или «Стиль доступности» (см. Opera): ваш сайт выглядит хотя бы несколько прилично,Пользователи с реальными проблемами (а не просто дурачиться) с большей вероятностью используют их, а затем сразу же пытаются изменить их размер.
Далее убедитесь, что у вас есть видимый переключатель для изменения размера текста.Современные браузеры не изменяют размер текста по умолчанию, не думайте, что ваши пользователи собираются изменить эти значения по умолчанию.
Когда пользователи используют переключатель, убедитесь, что различные уровни изменяют названия и различные другиеэлементы.Убедитесь, что все становится больше, но заставляйте такие вещи, как заголовки, только немного увеличиваться, чтобы они не просто заполняли весь экран (предположим, что окна пользователей не развернуты).
Тогда вы можетебеспокоиться о любой другой головной боли, связанной с упругой компоновкой.
Хотя все это анализирует высоту строки и обязательно выбирайте значение, которое изящно масштабируется для ваших приращений и гарнитуры.
Примечание:очень большие размеры шрифтов не редкость, наоборот.Как правило, предпочтительными размерами являются 12px (у вас нет ничего ниже базового, никогда!), 16px и просто monster large .