Является ли размер шрифтов с использованием "em" по-прежнему актуальным?

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

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

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

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

эта статья, опубликованная в "A List Apart" Ричардом Раттером, по-прежнему актуальна,

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

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

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

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

размер текста в ems-итерации 2

результаты показывают, что во всех браузеры, текст в среднем браузере настройка отображается идентично набор текста в пикселях. Это также демонстрирует, что размер текста в ems может быть изменен во всех браузерах. Однако IE6 и IE7 неприемлемо утрирую малость и величие измененных текст.

размер тела в процентах-итерация 3

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

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

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

установка высоты линии в ems-итерации 5

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

проблема сафари моноширинный – итерация 6

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

хотя эта статья датирована 2007 годом, она все еще очень актуальна. Установка размеров шрифта-это больше, чем просто установка em (или px).

Не используйте их, когда вы действительно имею в виду %. Единственная причина ЭМ работает потому, что в CSS 1em, который, как предполагается, представляет размер буквы "M" (ЭМ происходит от "М") на самом деле эквивалентно размеру шрифта. Поэтому, когда вы пишете 1em, вы на самом деле пишете "100% унаследованного размера шрифта". Em предназначен для использования при указании размеров коробки относительно размера шрифта (что редко, действительно действительно редкий.)

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

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

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

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

другая проблема - " некоторые браузеры не увеличивайте", из этих IE6 является единственным актуальным, потому что он по-прежнему занимает небольшую долю в интернете. Если вы думаете иначе, вы, вероятно, читали некоторые статьи с 2002 года или около того (т. е. Через 1 год после его введения), просыпайтесь к реальности:

• ваша аудитория использует IE6 и не знает ничего лучше? Если у вас нет какой-либо статистической поддержки, предположим: нет. Кроме того, вы должны сначала разработать для IE6? Ответ всегда один: нет. Дизайн в большинстве технически продвинутый, всеобъемлющий и совместимый со стандартами браузер вы можете найти. Обычно перетягивание каната происходит между сафари и оперой. Firefox на самом деле не так далеко позади, но обычно реализует их как-moz - правила и медленно преобразуется в не-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 для стилей экрана потому что браузер должен будет угадать; и многие браузеры действительно ужасны в угадывании! А пайка - это 12 пунктов.

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

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

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

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

• ЭМ (как в "М") относится к размеру буквы M и является типографским измерением (например,точка), но в CSS он просто равен размеру шрифта,при работе с экраном. Если вы имеете дело с печатью, бог знает, не вернется ли она просто к типографически правильному "размеру M" вместо "размера шрифта" (помните, что CSS не только для экрана). Наиболее целесообразно использовать em при указании размера для заключающего поля относительно текста. Используйте его только тогда, когда вы не можете используйте %, в процентах более четкий и лучший код в целом.

• названы размеры: XX-маленький, х-маленький, маленький, нормальный, большой и т. д. следует избегать! Вы можете заметить, хотя эксперименты, что "маленький" практически 12px или 75%, но намного четче. Тем не менее, они несовместимы кросс-браузер. Маленький в Firefox меньше, чем маленький в Safari, поэтому никогда не используйте их.

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

---

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

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

вы хотите, чтобы ваши пользователи могли изменять размер текста, который они хотят прочитать. И рекомендация состоит в том, чтобы предложить простой A/A (2-й "A" должен быть меньше; дополняя его текстом, таким как "нормальный", "2x больше" и т. д., полезно). Поместите это где-то видно, наиболее распространенное положение находится в правом верхнем углу контент пользователь хочет читать. Контекст "содержания" очень важен:

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

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

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

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

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

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

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

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

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

хотя это разрешено, я всегда чувствовал, что это немного бессмысленно, чтобы размер ваших шрифтов с помощью em. При использовании для размера шрифта это относительная мера, и я думаю, что это просто добавляет путаницы в ваш CSS. Если вы действительно хотите дать своему шрифту размер относительно его родительского размера шрифта, используйте проценты. (font-size: 0.8em эквивалентно font-size: 80%, но процент более чувственный.)

в противном случае используйте одну из абсолютных единицах. Браузеры обрабатывают и масштабируют их отлично.

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

проценты и Ems не являются взаимозаменяемыми - в то время как может быть или не быть предпочтительным указать размер шрифта относительно родителя как 80%, а не 0,8 em, например, то же самое не выполняется нигде. Если я хочу 1em поле вокруг элемента, которое полностью отличается от указания 100%, которое в этом случае было бы относительно объема пространства, занимаемого элементом.

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

Я также не вижу заслуга в определении шрифта тела-размер 62,5% - в то время как это может сделать измерения проще, потому что 1em = 10px, есть несколько проблем. Во-первых, вы все еще технически работаете в пикселях, а во-вторых, предполагается, что размер шрифта пользователя по умолчанию составляет 16 пикселей. Если вы полагаетесь на это соотношение в любом месте вашего макета (например, соответствующие размеры изображения), ваш дизайн может пострадать, если пользователь имеет другой размер шрифта по умолчанию, и если вы не полагаетесь на него, и все относительно, то размер шрифта не зависит дело в том, что все будет масштабироваться в соответствии.

Так что да, ems все еще стоит.

калибровка шрифты в ems на самом деле не имеет большого смысла, потому что 1 em - размер шрифта по определению.

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

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

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