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

Ответ 1

Не указывайте размер шрифта в единицах абсолютной длины для таблиц стилей экрана. Они несовместимы между платформами и не могут быть изменены пользователем User Agent (например, браузером). Сохраняйте использование таких устройств для стилизации на носителях с фиксированными и известными физическими свойствами (например, печать)

Если вы будете использовать этот метод, не нужно вычислять

Вы можете установить размер шрифта для тела 62,5% (то есть 62,5% от значения по умолчанию 16 пикселей), что соответствует 10 пикселям или 0,625 МЭ. Теперь вы можете установить размер шрифта в EM с легко запоминаемым преобразованием, разделите px на 10.

* 12px = 1.2EMs
* 13px = 1.3EMs
* 16px = 1.6EMs
* 8px = 0.8EMs
* etc…

Это делает все, что СУПЕР легко запомнить и устраняет необходимость в таблицах преобразования. Конечно, вам все равно придется использовать таблицу преобразования для вложенных элементов при использовании EM, если вы не являетесь конкретными в своем CSS, что является отдельной проблемой.

Но 76% намного лучше, и вы можете использовать это для вычисления http://pxtoem.com/

Да, это все еще актуально:

IE6 по-прежнему широко используется и не может изменять размеры шрифтов, определенных в px. = > Вопросы юзабилити. Это само по себе не-нет.

и

IE 7 и 8 на самом деле не изменяют размер текста с пикселями. У них есть увеличение страницы, но некоторые люди предпочитают только размер текста.

Вот краткое описание того, что хорошо и плохо о размерах шрифтов в целом.

Размер шрифта в css http://easycaptures.com/fs/uploaded/213/2470522253.png

Мне лично нравится ems. Другие, такие как Крис Койер на CSS-Tricks.com, любят пиксели. (У Криса отличная статья о разных единицах шрифта).

Это действительно сводится к личным предпочтениям.

Почти похожие или связанные с ним вопросы о SO

Должны ли мы использовать em и% для определения размера шрифта элементов веб-сайта?

Есть ли смысл использовать относительный размер шрифта в CSS?

Почему em вместо px?

Размер шрифта в CSS -% или em?

Размер шрифта CSS: относительные или абсолютные значения. Что использовать?

Проблема с EM

Использование относительного вместо фиксированного размера в CSS

Полезный онлайн-инструмент для px в em

http://pxtoem.com/

http://riddle.pl/emcalc/

http://convert-to.com/pixels-px-to-em-conversion.html

Преобразование всего сайта из px в em (этот инструмент все еще находится в разработке)

http://converter.elementagency.com/

Приложение EM Calculator AIR (будет работать на всех ОС)

http://jameswhittaker.com/journal/em-based-layouts-vertical-rhythm-calculator/

http://jameswhittaker.com/projects/apps/em-calculator-air-application/

Приложения для Windows

http://www.thebrightlines.com/2009/11/16/pixem-pixel-to-em-converter/

http://www.storkas.com/Projects.aspx(go внизу)

Пиксели для таблицы преобразования Ems для CSS

http://jontangerine.com/silo/css/pixels-to-ems/

http://reeddesign.co.uk/test/points-pixels.html

emchart

http://aloestudios.com/tools/emchart/

http://aloestudios.com/code/emchart/

Другие статьи по этой теме

http://www.d.umn.edu/itss/support/Training/Online/webdesign/type.html

Ответ 2

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

• Обслуживание EM - это b * tch. Одно дело - получить математику прямо на вложенных элементах во время первоначального проектирования, но переориентация через некоторое время является обременительной - до такой степени, что она просто фиксирует фиксированные единицы за счет нарушения эффекта em-масштабирования.
• Браузеры прошли долгий путь за последние 2 года. Текущая версия каждого основного браузера поддерживает масштабирование страницы изначально.
• Верно, что эти сайты менее доступны для пользователей с ослабленным зрением в IE6, но для них существует множество свободно доступных инструментов, которые разрешают эту проблему. Если нет разумной альтернативы, у меня есть моральное обязательство содействовать их потребностям. Если к моей входной двери есть 4 ADA, я не буду демонтировать шаги и заменить их на 5-й.
• Я полагаю, что это экономит мне 20% в мое время разработки.

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

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

Ответ 3

Эта статья, размещенная в "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 line-height наследуется всем текстом на странице.... К сожалению, результаты показывают, что высота линии 18px не масштабируется IE6 и IE7, когда текст изменяется, что означает наибольший настройка, похоже, выдавливает текст.

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

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

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

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

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

Ответ 4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ответ 5

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

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

Ответ 6

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

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

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

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

Итак, ems все еще стоит.

Ответ 7

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

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

Ответ 8

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

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