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

StackOverflow https://stackoverflow.com/questions/293247

  •  08-07-2019
  •  | 
  •  

Вопрос

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

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

У кого-нибудь есть какие-нибудь советы?

Это было полезно?

Решение

Согласно CSS шрифта YUI ,

  

Всегда используйте проценты в качестве единиц   потому что они делают более последовательно   чем ЭМС, и потому что они позволяют   пользовательское изменение размера (в отличие от   пикселей).

Относительные размеры шрифтов работают очень хорошо, когда они являются частью такой инфраструктуры, как YUI. Тем более, что они нормализуют работу шрифтов в браузерах.

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

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

Другие советы

Как объяснено в этом Размер шрифта CSS статья:

В идеале?Самая лучшая единица измерения – ВООБЩЕ НИКАКОГО!Пусть пользовательский агент определяет отображение в соответствии с предпочтениями пользователя – НО!Мы также знаем, что для большинства проектов это не очень практичный подход.Лично?Я предпочитаю гибкость .em и .px по принципу «смешивай и сопоставляй». Поскольку пользовательские агенты становятся более «удобными для пользователя», размер дизайнеров НЕ будет таким потенциально проблематичным ИЛИ противоречивым, как сейчас.

Не забывайте, что относительный размер шрифта можно использовать не только для...размер шрифта!

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

Используйте «px» для текста, который должен соответствовать размерам с другими элементами на странице, которые имеют размеры в пикселях (например, изображения). Что касается прочего, '%'. Вопрос предполагает, что использование относительных размеров шрифта в некотором роде затруднительно; Я не думаю, что это так.

Обычно вы устанавливаете один размер шрифта в «%» для основного текста и несколько для других элементов страницы, которые более или менее важны, чем общий основной текст. У вас редко должно быть достаточно уровней вложенности и размеров шрифтов, чтобы их было сложно отследить.

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

Единственная реальная проблема с относительным состоянием - это когда вы сравните размер блока относительно, но вы хотите, чтобы размер внутри соответствовал исходному размеру. Вы можете вычислить процент, обратный проценту родителя, но, скорее всего, это будет уродливое число, и вы можете получить ошибки округления в 1px, если вы не можете / не можете указать это с полной точностью. В этом случае может быть хорошей идеей сделать шаг назад и посмотреть на селектор, посмотреть, не можете ли вы применить размер более избирательно, чтобы избежать необходимости отменять его.

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

OS X и Windows по-разному обрабатывают как минимум размеры шрифта pt , так что это, безусловно, полный запрет. С другой стороны, есть ли веская причина не использовать относительные размеры шрифта? Это не так, как будто это были взвешенные дебаты с хорошими аргументами с обеих сторон. Скорее, с одной стороны есть несколько преимуществ (которые могут быть не очевидны все время). Но с другой стороны, есть только очевидные преимущества, которые при малейшем исследовании оказываются бесполезными. 1

На самом деле я могу думать только об одном аргументе для абсолютных размеров шрифта, а именно о том, что он облегчает реализацию CSS для готового дизайна, копируя размеры шрифтов, используемых в программном обеспечении для проектирования. В действительности согласованный дизайн будет использовать только несколько разных размеров шрифта, которые являются простыми соотношениями друг друга (скажем, 80%) и, таким образом, могут тривиально выражаться в терминах em или % .

<Ч>

1) Вы сказали:

  

или хотите ли вы где-нибудь изменить размер шрифта, не затрагивая вложенные элементы

Что именно вы подразумеваете под этим? Весь смысл CSS состоит в том, что вы (как правило) изменяете атрибуты элемента относительно его родителей. Почему это должно быть проблемой?

Вся дискуссия немного напоминает дебаты «не используйте таблицы раскладок». Аргументы могут показаться непрофессионалам непрофессионалам 2 , но в любом случае просто нет причин не следовать им. Это не значит, что просить аргументы неправильно! Но есть много бессмысленных нарушений этого правила.

<Ч>

2) Кстати, я не профессионал веб-дизайна. Примите мои технические мнения здесь только с небольшим количеством соли. Но аргумент действительно не зависит от используемой технологии.

подумайте о ваших родителях, бабушках и дедушках, просматривающих вашу веб-страницу, с их бифокальными очками (или без них). Если они не могут прочитать это, потому что вы сделали все шрифты 8px, они, вероятно, пойдут куда-нибудь еще. Если они нажимают «Размер текста > > самый большой, и ничего не происходит, они, вероятно, пойдут куда-нибудь еще.

учитывая, что - по крайней мере в США - многие веб-серферы - это пожилые люди со временем, деньгами и плохим зрением, использование em для шрифтов для публичных веб-сайтов может принести большую пользу; -)

Единственная веская причина заключается в том, что многие люди все еще используют IE6.Просто это.Вероятно, было бы неплохо в конце 2008 года больше не уделять внимания IE6.Но IE6 сложно игнорировать.Я работаю веб-дизайнером/разработчиком в крупной компании в Италии, и многие из наших сотрудников или клиентов прямо сейчас на своих рабочих компьютерах просматривают Интернет с помощью IE6.

Почему?У них нет прав администратора, они не могут ничего установить на свои машины, а системные администраторы всегда слишком заняты, чтобы модернизировать компьютеры в каждом офисе.Возможно, эти люди перейдут на IE7 (что-то вроде Firefox — это мечта), когда их жесткие диски нужно будет заменить.

Возможно, такое происходит только в Италии.Но я бы не стал на это делать ставку.

Использование относительных единиц измерения для размера шрифта, высоты строки и верхнего / нижнего поля и отступов также сохранит типографский масштаб без изменений, поскольку пользователи увеличивают / уменьшают размер текста. Типография и дизайн люди это оценят =)

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top