Эта статья была рецензирована Томом Ходжинсом . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!
CSS предоставляет разработчикам множество модулей для определения длины различных свойств, таких как margin , padding , line-height или font-size . Причина, по которой у нас много устройств, заключается в том, что они предназначены для разных целей. Даже если вы можете использовать эти единицы для указания одного и того же значения для данного свойства CSS, фактическая величина этого значения рассчитывается по-разному. Это может сделать некоторые юниты полезными в ситуациях, когда другие юниты могут делать это не очень хорошо. Например, если вы хотите, чтобы свойства width или height элемента зависели от ширины или высоты области просмотра, то единственные заслуживающие доверия единицы измерения — это vh , vw , vmin и vmax .
В этой статье вы узнаете о различных единицах длины и о том, как они влияют на размер шрифта элементов, к которым они применяются.
Пиксельная единица измерения (px)
Пиксели — это фиксированные размеры. Они обычно называются одной точкой на экране пользователя. Однако в настоящее время устройства могут иметь разную плотность пикселей. Это означает, что размер этой точки, которую мы обычно называем пикселем, будет примерно 1/4 на устройстве, плотность пикселей которого в 4 раза больше, чем у стандартного устройства. Эта проблема решается путем вычисления размера пикселей CSS с использованием опорного пикселя . Опорный пиксель определяется как угол обзора одного пикселя на устройстве с плотностью пикселей 96 точек на дюйм и расстоянием от считывающего устройства до длины руки (равной 28 дюймам). Это делает размер пикселя равным примерно 0,26 мм.
Задание font-size для различных текстовых элементов на веб-странице в пикселях не является ни легким в обслуживании, ни удобным для пользователя. Если вы изменяете дизайн очень большого сайта, изменение шрифтов всех элементов может превратиться в настоящий кошмар. Вам также нужно будет настроить font-size для множества элементов в разных точках останова, чтобы приспособиться к разным размерам экрана. Более того, любой пользователь, желающий уменьшить или уменьшить размер текста, используя настройки размера шрифта в браузере, не сможет этого сделать.
Давайте посмотрим, как размер шрифта, заданный в пикселях, влияет на вычисленное значение font-size для разных элементов. Вот разметка, которую мы будем использовать в качестве ссылки для следующих нескольких разделов.
<div class="container-box"> This text is directly inside the parent div element. <p>This is the first paragraph of our container.</p> <p>The second paragraph contains a link to <a href="http://en.wikipedia.org/">WikiPedia</a>, the free encyclopedia.</p> <p>I have also included a link to SitePoint as a direct child of the containing div element.</p> <a href="https://www.sitepoint.com/">A link to SitePoint.</a> </div>
Вот CSS, чтобы установить свойство font-size для всех элементов в пикселях.
div { font-size: 20px; } code { font-size: 18px; } p, a { font-size: 22px; }
Как вы можете видеть в демонстрации, font-size каждого элемента равен предоставленному вами значению пикселя. Это не имеет отношения к вложенности этого элемента. Например, font-size для обеих ссылок составляет 22 пикселя. Вы также можете попробовать изменить размер текста в своих браузерах, но это не повлияет на размер шрифта этих элементов.
Короче говоря, это отсутствие гибкости является хорошей причиной, почему вы должны избегать использования пикселей при настройке font-size элемента.
Em Unit (em)
Использование модуля em для установки размера шрифта может помочь вам избежать проблем, связанных с переопределением пользовательских настроек. Значение 1em будет зависеть от значения font-size по умолчанию в браузере. Если не изменено вами или пользователем, по умолчанию это значение равно 16px.
Значение этой единицы для элемента определяется вычисленным font-size унаследованным этим элементом. Это означает, что если элемент наследует font-size 25px, значение 2em для этого элемента будет вычислено как 50px.
Следующий CSS устанавливает font-size всех элементов из нашего предыдущего примера в единицах em:
div { font-size: 1.2em; } code { font-size: 0.9em; } p, a { font-size: 1em; }
Второй div в вышеприведенной демонстрации вложен в другой элемент div . Мы также установили font-size для элементов div равным 1.2em. Это означает, что размер шрифта всех элементов во втором div будет в 1,2 раза больше, чем соответствующий элемент в первом div . Например, вычисленный font-size ссылки WikiPedia в первом div равен 19.2px, а вычисленный font-size ссылки WikiPedia во втором div равен 23.04px. Соотношение точно равно 1,2.
Если вы хотите увеличить или уменьшить font-size различных элементов адаптивного веб-сайта в определенных точках останова, вы можете просто сделать это, указав другой font-size из элементов html и body в этой точке останова. Размер шрифта всех остальных элементов будет соответственно масштабироваться.
Поскольку значение этого модуля зависит от унаследованного font-size данного элемента, этот модуль особенно полезен, если вы хотите установить размеры шрифта для связанных элементов внутри независимых разделов веб-сайта, например, элементов внутри независимых модулей.
Рем Блок (рем)
Единственная проблема с модулями em заключается в том, что вы не всегда хотите, чтобы font-size дочерних элементов масштабировался в соответствии с font-size их родителя. Это наследование font-size может сделать процесс вычисления правильного значения em намного более сложным, чем должно быть.
Вы можете преодолеть этот недостаток блока em, используя блок rem. Значение 1rem всегда равно значению font-size для корневого элемента. Таким образом, вы не столкнетесь с проблемой наследования font-size .
Следующий CSS устанавливает font-size нашего содержащегося элемента div в rem . Остальные элементы по-прежнему имеют font-size в единицах em .
div { font-size: 1.2rem; } code { font-size: 0.9em; } p, a { font-size: 1em; }
Установка font-size контейнера div в единицах rem помогает нам избежать проблемы с унаследованным font-size .
Как видно из примера, вы можете использовать этот модуль для установки значения font-size для родительского контейнера различных независимых модулей. Таким образом, font-size всех элементов внутри модуля может быть основан на их родительском элементе и в то же время не зависеть от других модулей.
Процентов (%)
Проценты ведут себя как их единицы. Они обычно используются для установки font-size для корневых элементов на разных точках останова, чтобы упростить вычисления в адаптивном веб-дизайне. Вот пример:
html { font-size: 62.5%; } div { font-size: 2rem; } code { font-size: 0.9em; } p, a { font-size: 1em; }
Так как значение по умолчанию для font-size в браузерах составляет 16 пикселей, установка font-size для элемента html равного 62,5%, вычисляется точно до 10 пикселей. Это делает расчет размеров шрифта для всех остальных элементов очень простым. Например, теперь вы можете просто установить font-size элемента 3rem, чтобы он был 30px, 4.2rem, чтобы он был 42px, и так далее.
Единицы просмотра (vw, vh, vmin, vmax)
Единицы просмотра очень интересные. Они позволяют вам устанавливать font-size для разных элементов в зависимости от размеров области просмотра. Если все сделано правильно, это может устранить необходимость установки другого значения font-size в нескольких точках останова. Это связано с тем, что значение этих единиц будет постоянно изменяться в зависимости от ширины или высоты области просмотра. Например, 1vw будет равен 4px, когда область просмотра имеет ширину 400px, и будет 10px, если область просмотра имеет ширину 1000px. В SitePoint уже есть статья, в которой обсуждаются единицы просмотра и их приложения . Иди и проверь, если ты хочешь узнать больше.
Единственная проблема с этими единицами состоит в том, что вычисленный font-size может затруднить чтение текста при очень маленьких и очень больших размерах области просмотра. Хитрость заключается в том, чтобы использовать эти единицы в сочетании с другими единицами, чтобы текст не становился слишком маленьким или слишком большим. Этот метод более подробно обсуждался в этой статье о типографии на основе видового экрана .
Другие Абсолютные Единицы
CSS также определил много абсолютных единиц, которые мало используются на экранах, но играют важную роль в печатных СМИ. Вы можете использовать точки (pt) и picas (pc), чтобы установить font-size в таблицах стилей печати. Оба эти устройства имеют фиксированное значение 0,0138 дюймов и 0,1666 дюймов соответственно. Точно так же вы можете использовать дюймы (дюймы), сантиметры (см) и миллиметры (мм), чтобы задать поля страницы в таблицах стилей печати.
Использование ключевых слов для установки размера шрифта
Другой вариант установки font-size — использование ключевых слов. Эти ключевые слова бывают двух видов: абсолютные и относительные. Абсолютные ключевые слова, которые используются для указания font-size относятся к таблице размеров шрифта, рассчитанной различными пользовательскими агентами. Эти абсолютные ключевые слова: xx-small , x-small , small , medium , large , x-large и xx-large .
Если вы решите использовать относительные ключевые слова, font-size будет рассчитываться на основе значений в таблице размеров шрифта и вычисленного font-size родительского элемента. Есть два относительных ключевых слова: larger и smaller . Если родительский элемент имеет значение font-size близкое к x-small , то значение font-size larger установит font-size нашего элемента на small . Вот пример:
div { font-size: larger; } code { font-size: smaller; } p, a { font-size: small; }
Второй контейнер div в нашей демонстрации вложен в другой div . Так как мы установили font-size в div larger , вложение увеличивает размер шрифта нашего второго контейнера. Также обратите внимание, что вложение не влияет на текст внутри абзацев. Это потому, что их font-size был установлен с использованием абсолютного ключевого слова.
Поддержка браузера
Прежде чем принять решение об использовании любого из этих модулей в работе, вы также должны убедиться, что ваши целевые браузеры имеют достойную поддержку.
Абсолютные единицы измерения, такие как px, pt, pc, in, cm и mm, поддерживаются во всех браузерах. Аналогично, модуль em поддерживается во всех основных браузерах, включая более старые версии IE.
Тем не менее, rem модуль не поддерживается в IE8 и ниже. Даже в IE9 и IE10 использование rem со свойством сокращенного font сделает всю декларацию недействительной. Эти два браузера не поддерживают модули rem для псевдоэлементов.
Из всех блоков, обсуждаемых в этой статье, блоки просмотра имеют наименьшую поддержку браузера. Также обратите внимание, что IE11 и Edge не поддерживают модуль vmax .
Вывод
В этой статье мы обсудили различные единицы длины в CSS и их влияние на font-size элемента. В общем, вы должны избегать использования абсолютных единиц, когда это возможно, и пытаться использовать относительные единицы. Среди относительных единиц вы должны использовать em для установки размеров шрифта дочерних элементов в модуле и rem для установки размеров шрифта независимых элементов, например корневого родительского элемента в модуле. Вы также можете использовать единицы просмотра в сочетании с другими единицами, чтобы убедиться, что типография хорошо масштабируется при любых изменениях ширины или высоты области просмотра.
Чтобы узнать больше о веб-типографике, посмотрите наше видео о AtoZ CSS: текст и типография .