Какова стоимость единицы "экс" css?

(Не путать с Xunit, популярной библиотекой модульного тестирования.Net.)

Сегодня в приступе скуки я начал проверять DOM в Gmail (да, мне было очень скучно).

Все выглядело довольно просто, пока я не заметил интересную спецификацию по ширине определенных элементов. Прославленные гуглиты указали несколько столбцов таблицы, используя редкую "бывшую" единицу.

width: 22ex;

Сначала я был в замешательстве ("что такое" бывший "?"), Затем он вернулся ко мне: я, кажется, кое-что вспомнил много лет назад, когда я впервые узнал о CSS. Из спецификации CSS3:

[ Единица ex ] равна используемой высоте x первого доступного шрифта. Высота x называется так, потому что она часто равна высоте строчной буквы "x". Тем не менее, "ex" определено даже для шрифтов, которые не содержат "x".

Ну и хорошо. Но я никогда не видел, чтобы он использовался раньше (а тем более использовал его сам). Я использую ems довольно часто и ценю их ценность, но почему "бывшие"? Измерение кажется гораздо менее стандартным, чем их, и гораздо менее полезным.

Одна из немногих страниц, на которых я нашел обсуждение этой темы, - это http://www.xs4all.nl/~sbpoley/webmatters/emex.html Стивена Поули. Стивен делает хорошие замечания, однако его обсуждение кажется мне неубедительным.

Итак, мой вопрос: какую ценность "бывшая" единица придает веб-дизайну?

(Этот вопрос может быть помечен как субъективный, но я оставлю это решение более опытным SO, чем мне.)

6 ответов

Решение

Это полезно, когда вы хотите изменить размер относительно высоты строчных букв вашего текста. Например, представьте, что работаете над дизайном, например, так:

альтернативный текст


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

Как отметил Джонатан в комментариях, ex - это просто версия em (width) по высоте.

Чтобы ответить на вопрос, одно использование с верхним и нижним индексом. Пример:

sup {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    bottom: 1ex;
}

Еще одна вещь, которую стоит рассмотреть, это то, как ваша страница масштабируется, когда пользователь увеличивает или уменьшает размер шрифта (возможно, с помощью ctrl+ колесико мыши (окна)).

Я использовал их с.. padding-left: 2 em; padding-right: 2 em;

и бывший с отступом-дном: 2 бывший; padding-top: 2 отл.;

Таким образом, используется вертикальная единица измерения для свойства вертикального масштабирования и горизонтальная единица измерения для свойства горизонтального масштабирования.

Обратите внимание, что такие термины, как "одинарный / двойной интервал между строками", на самом деле означают смещение между двумя смежными строками, измеренное em. Таким образом, "двойной межстрочный интервал" означает, что каждая строка имеет высоту 2 em.

Поэтому, если вы хотите указать вертикальное расстояние, пропорциональное "линиям", используйте em. Используйте ex только в том случае, если вам нужна фактическая высота строчной буквы, что, я бы сказал, является более редким случаем.

Значение наличия этого в спецификации CSS, если это то, что вы действительно спрашиваете, точно такое же, как значение наличия модуля em.

Это позволяет вам устанавливать шрифты в относительных размерах.

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

Для фактического значения в пикселяхgetComputedStyleесть на помощь.

Например, на моей обработке,

(Chrome на macOs — шрифт по умолчанию)1ex == 7.2px

(Chrome на macOs — шрифт «system-ui»)1ex == 8.4px

Другие вопросы по тегам