Что происходит, когда пользователь устанавливает размер шрифта в браузере?
Многие веб-сайты пишут код, который лишает пользователей возможности устанавливать собственный размер шрифта (в настройках браузера / мобильного устройства). Что именно происходит на техническом уровне, чтобы этого избежать, когда пользователь изменяет размер шрифта по умолчанию? На что это влияет?
- корневой элемент
htmlfont-size, указанный в CSS? Масштабирует или отменяет это? - единицы
em,px,rem,%? - как насчет других модулей, таких как
vh,vw,vmin,vmax, для тех, кто пытается делать плавную типографику? - как это повлияет на
calc()? - такое же поведение для мобильных устройств?
Примечания, которые еще не дают полного ответа:
Однако ни одно из нижеприведенных не относится к спецификациям, а является просто набором определенных поведений.
- Из моих собственных экспериментов, установка
font-sizeдляhtmlс% действительно масштабируется, когда пользователь изменяет размер шрифта браузера. - Этот ответ имеет некоторую информацию, которая, по-видимому, говорит о том, что когда установлен
html,pxне настраивается, аem,rem,% настраивается. - У Этот сайт есть действительно хорошая информация, но ей уже десять лет, и неизвестно, вызвано ли упомянутое поведение только ошибками браузера или оно спроектировано таким образом.
- Люди часто говорят об этом неаккуратно. Например, люди будут говорить о «базовом размере шрифта», но не указывать, является ли это шрифтом, указанным в корневом элементе /
html, настройках браузера или их комбинации. Я уверен, что это ясно для тех, кто уже знаком с взаимодействиями, но для меня концепции все еще остаются неясными.
Ответы 1
Определяемый пользователем размер шрифта определяет базовый размер шрифта корневого элемента html. Начальное значение font-size, указанное в CSS, - medium, которое во всех настольных браузерах соответствует этому определяемому пользователем размеру (за исключением Microsoft Edge, который следует настройкам DPI и специальных возможностей Windows, а не своим собственным). К сожалению, мобильные браузеры не соблюдают общесистемные предпочтения, типичные для мобильных устройств. По крайней мере, ни один из Safari в iOS, Internet Explorer в Windows Phone 8.1 или Microsoft Edge в Windows 10 Mobile не работает.
Все другие значения ключевых слов свойства font-size, определенного здесь, масштабируются до этого размера, поэтому, если размер, определенный пользователем, составляет 20 пикселей, medium соответствует 20 пикселей, а small почти наверняка будет соответствовать размеру меньше 20 пикселей.
Rems и ems медиа-запросов вычисляются непосредственно из этого определяемого пользователем размера, независимо от указанного свойства font-size корневого элемента. Каждое из следующих медиа-выражений:
(max-width: 30rem)
(max-width: 30em)
эквивалентно (max-width: 480px), когда пользовательский размер составляет 16 пикселей, и (max-width: 600px), когда пользовательский размер составляет 20 пикселей.
Rems правил стиля, с другой стороны, рассчитываются на основе указанного font-size корневого элемента. Следующее правило:
:root { font-size: 50%; }
делает 1rem в правиле стиля эквивалентным 8px, когда определяемый пользователем размер равен 16px, и 10px, когда определяемый пользователем размер равен 20px.
Ems правил стиля и проценты всегда рассчитываются относительно элементов-предков, поэтому их поведение не меняется. Если размер шрифта body объявлен в ems или процентах, то он будет основан, например, на любом размере шрифта html (его родительского элемента). И так далее и тому подобное для всех его потомков, которые не указывают какой-либо другой размер.
Единица px соответствует пикселю CSS, поэтому на его метрики никогда не влияет размер шрифта, определяемый пользователем.
Поведение единиц просмотра и calc() не меняется, поскольку все это не зависит от размера шрифта элемента. Как следует из их названия, единицы видового экрана масштабируются по размеру видового экрана.
Наиболее заметный общий эффект, который это может оказать на макет с размерами все (включая ширину и высоту ящиков) в rem и em, заключается в том, что пользователь может масштабировать весь макет, просто изменив свой предпочтительный размер шрифта. Я не знаю, насколько это полезно, особенно когда нужен зум.
Итак, чтобы гарантировать, что ваша копия может соответствовать предпочтительному размеру шрифта пользователя, не заставляя его увеличивать масштаб, укажите все размеры шрифта в rem или ems, где это возможно. Особенно не указывайте размер шрифта в пикселях на html, так как это полностью переопределит предпочтение. Вам не обязательно указывать ширину и высоту в rem или ems - это действительно зависит от вашего макета. Не все гибкие макеты хорошо масштабируются с разными размерами. На самом деле, наиболее важным аспектом является размер текста, поскольку эта функция предназначена для масштабирования текста для улучшения читабельности.
Если вам интересно, вот как я определил размер шрифта корневого элемента: 1em ниже 312px, в min-width: 312px он установлен на calc(1em + 0.71vw - 2.21px) и calc(1em + 8px) на min-width: 1440px.
@eedrah: Да, проценты и em ведут себя одинаково в свойстве font-size.
Я считаю, что приведенное выше определение является компромиссом между соблюдением размера шрифта пользователя по умолчанию и масштабированием в зависимости от ширины экрана, но вы бы сами так сказали?
Отличный ответ! Подтверждает ли это мое подозрение, что% и ems - одно и то же при установке размера шрифта? (с коэффициентом 100)