Как сделать масштабируемый шрифт
Добавил пользователь Алексей Ф. Обновлено: 05.10.2024
Применение атрибута font-size для масштабирования текста является одним из самых сложных аспектов стилевого оформления в CSS. CSS предлагает четыре единицы для измерения размера текста, отображаемого в веб-браузере. Какая из этих четырех единиц наиболее подходит для веб-документов? Этот вопрос вызвал множество обсуждений и споров. Дать однозначный ответ на такой вопрос сложно.
Знакомимся с единицами
Эм (em): em это масштабируемая единица, которая используется для веб-документов. Один em равняется текущему размеру шрифта. Например, если размер шрифта документа 12pt , то 1em равняется 12pt . Поскольку em масштабируется, то 2em равняется 24pt , .5em равняется 6pt и т.д. Благодаря своей масштабируемости и высокой совместимости с мобильными устройствами, em все чаще используется в веб-документах.
Пиксели (px): Пиксели это единицы фиксированного размера, которые используются для всего, что читается на компьютерном экране. Один пиксель равняется одной точке на компьютерном экране (это наименьшее деление разрешения вашего экрана). Многие веб-дизайнеры используют в веб-документах пиксели, чтобы при отображении в браузере вебсайт выглядел идеально с точки зрения пикселей. Единственная проблема заключается в том, что пиксели нельзя увеличить для удобства читателей со слабым зрением или уменьшить для удобства чтения на мобильных устройствах.
Точки (pt): Точки традиционно используются в печатных изданиях (т.е. для всего, что печатается на бумаге). Одна точка равняется 1/72 дюйма. Точки очень похожи на пиксели тем, что они имеют фиксированный размер и их нельзя увеличить/уменьшить.
В чем же различие?
Разницу между этими единицами легко понять на конкретных примерах. Вот как они соотносятся друг с другом: 1em = 12pt = 16px = 100%. Давайте посмотрим, что произойдет, когда мы увеличим основной размер шрифта (используя CSS-селектор body) с 100% до 120%.
Как видите, Эм и Процент увеличиваются по мере увеличения основного размера шрифта, а Пиксели и Точки – нет. Легко использовать абсолютный размер для вашего текста, но намного легче использовать масштабируемый текст, который отображается на любом устройстве. Поэтому для текста веб-документа предпочтительнее использовать единицы Эм и Проценты.
EM или Процент?
Мы выяснили что Точка и Пиксель не лучшие единицы для веб-документов. Итак, у нас остались Эм и Процент. Теоретически, Эм и Процент – одинаковые единицы, но на практике между ними есть мелкие различия, которые нельзя не учитывать.
Вывод
В теории единица Эм является новым стандартом для размеров шрифтов веб-документов, но на практике оказывается, что единица Процент более удобна для пользователей. При изменении клиентских настроек текст, для которого используется единица Процент, масштабируется должным образом, позволяя дизайнерам поддерживать читаемость, доступность и визуальный дизайн.
Победитель: процент (%).
Обычно когда я создаю новый дизайн, то для элемента body я использую проценты ( body < font-size: 62.5%; >), а затем использую em для дальнейшего масштабирования. Пока в настройках для body используется единица Процент, вы можете использовать либо Процент, или Эм для любых других правил и селекторов CSS и при этом пользоваться преимуществами, которые дает использование Процента в качестве основного размера шрифта.
Продолжаем говорить о размерах в CSS. Мы уже разбирали пиксели, проценты и зависимость от окна браузера, а теперь посмотрим на особенности размеров шрифтов.
Коротко о том, что уже было: пиксели и высота экрана
Самый простой способ задать размер чего-нибудь на веб-странице — указать его в пикселях:
Также можно указать размер в виде пропорций от ширины или высоты браузера. Например, чтобы размер шрифта был 1/10 от высоты окна. Необычно, но может быть интересно:
Проценты и шрифты
Ещё есть проценты, но с ними сложнее: нужно знать размеры родительского элемента, чтобы процентам было от чего отталкиваться. Например, если мы просто напишем font-size: 50%;, то браузер сделает так:
- Поищет в стилях, есть ли где-то точное указание размеров шрифта для этого или родительского элемента.
- Если есть — возьмёт 50 процентов от них.
- Если нет — возьмёт стандартный размер шрифта для этого элемента из своих настроек и уже от них посчитает 50%.
Теперь добавим отдельный стиль для абзаца и в нём укажем, что размер текста должен быть 50%:
А вот что будет, если мы удалим размер в пикселях из стиля body<> и дадим браузеру самому разобраться с размером:
Так как мы не задали точные размеры, то браузер взял какой-то свой размер абзаца по умолчанию и посчитал 50% от этого стандартного размера. Получилось мелко и нечитаемо.
Em — относительный размер шрифта
Если неохота считать проценты или нужно, чтобы шрифт точно был в 2 раза больше или в 0,7 раз меньше обычного шрифта, используют em. Это то же самое, что проценты: font-size: 100% — это как font-size:1em .
Так же, как и с процентами, em — это относительные значения. Всё зависит от родительского элемента. В этом примере родительским элементом был общий размер для всей страницы, заданный в body<>. Но что, если мы вложим с помощью блоков абзацы друг в друга?
Размеры в эмах удобно использовать для вёрстки разных иерархических элементов, где каждый вложенный уровень должен по размеру быть меньше предыдущего. Чтобы каждый раз не считать размеры вручную, можно использовать одно и то же значение в em — а браузер сам уменьшит шрифт пропорционально вложенности.
👉 Em считается относительно текущего размера шрифта и пересчитывается при изменении размеров родительского шрифта. Это можно использовать для адаптивной вёрстки.
Кроме em есть ещё rem — она считает размеры шрифта только относительно тех, которые заданы в блоке стилей html<>. Если этого блока нет или в нём ничего не написано — rem посчитает размер шрифта от стандартного значения в браузере. Отличие от em в том, что даже при вложенности друг в друга все значения будут считаться не относительно предыдущего блока, а относительно значения в html<>.
Межстрочный интервал
Помимо размера самих букв у текста есть параметр межстрочного интервала — это расстояние между нижними краями текста на каждой строке.
Стандартное значение межстрочного интервала — normal. Это значит, что браузер спросит у шрифта, какое межстрочное расстояние тот предпочитает. Вам ни о чём думать не нужно:
Иногда мы используем нестандартные шрифты, в которых браузер не знает стандартного межстрочного интервала. Или он его знает, но нас этот интервал не устраивает. Тогда интервал можно задать во всех тех же единицах: пикселях, емах, процентах.
Как адаптировать размер текста под размер экрана
Допустим, дизайнер поручил нам сделать так, чтобы заголовки на странице меняли размер в зависимости от ширины экрана. Если экран широкий, то и заголовок должен быть большим. Если экран узкий — пусть будет компактным.
Самый прямолинейный способ это сделать — задать размер в единицах vw. Например, 1vw — это 1% ширины экрана; 10vw — 10% ширины экрана. Если экран шириной 1000 пикселей, то 20vw — это 200 пикселей.
Звучит неплохо, но может плохо выглядеть: смартфоны обычно очень узкие, а экраны компьютеров очень широкие, и разница в размере шрифта будет в 5–6 раз. И если, например, основной текст фиксированного размера, а заголовки должны менять размер, то на широких экранах заголовки будут мельче, чем основной текст.
Тогда мы можем просто задать размеры стандартных экранов смартфонов и прописать нужные размеры текста для каждого, и всё будет выглядеть идеально.
@media screen and (min-width: 601px) < h2 > @media screen and (max-width: 600px) < h2 >
Текст можно поворачивать, зеркально отражать, масштабировать и наклонять так же, как и другие объекты. Однако результаты трансформирования зависят от способа выделения текста.
Поворот контура текста (слева) и поворот текста и контура (справа)
Можно задать пропорцию между высотой и шириной текста относительно исходной ширины и высоты символов. Для немасштабированных символов эта величина имеет значение 100%. Некоторые гарнитуры включают настоящий широкий шрифт, символы которого специально разработаны с большей шириной, чем в обычном шрифте. Масштабирование приводит к визуальному искажению символов текста, поэтому обычно предпочтительнее использовать шрифты, специально разработанные как узкие или широкие, если они доступны.
Выделите символы или текстовые объекты для изменения. Если текст не выделен, масштабирование применяется к вновь создаваемому тексту.
В настоящее время у меня есть этот сайт с телом font-size из 100%. 100% чего хотя? Это, кажется, вычислить в 16px.
У меня сложилось впечатление, что 100% будет как-то относиться к размеру окна браузера, но, очевидно, не потому, что это всегда 16px, независимо от того, уменьшено ли окно до ширины мобильного устройства или полноэкранного рабочего стола.
Как сделать так, чтобы текст на моем сайте масштабировался относительно его контейнера? Я пытался использовать em , но это также не масштабируется.
Я считаю, что такие вещи, как мое меню, уменьшаются при изменении размера, поэтому мне нужно уменьшить px font-size of .menuItem среди других элементов по отношению к ширине контейнера. (Например, в меню на большом рабочем столе 22px работает отлично. Перейдите к ширине планшета, и 16px более уместен.)
Я знаю, что могу добавить точки останова, но я действительно хочу, чтобы текст масштабировался как ХОРОШО, чтобы иметь дополнительные точки останова, в противном случае я получу сотни точек останова на каждые 100px уменьшение ширины для управления текстом.
Если контейнер является телом, то, что вы ищете, это Длина в процентах от Viewport :
Длина viewport-процентной длины указана относительно размера исходного содержащего блока . Когда высота или ширина исходного содержащего блока изменяется, они масштабируются соответственно. Однако когда значение переполнения для корневого элемента равно auto, предполагается, что любые полосы прокрутки не существуют.
- vw (% от ширины области просмотра)
- vh (% высоты окна просмотра)
- vi (1% от размера области просмотра в направлении встроенной оси корневого элемента)
- vb (1% от размера области просмотра в направлении оси блока корневого элемента)
- vmin (меньшее из vw или vh )
- vmax (больше или vw или vh )
1 v * равно 1% исходного содержащего блока.
используя это выглядит так:
Как вы можете видеть, когда ширина области просмотра увеличивается, увеличивается и размер шрифта, без необходимости использовать медиа-запросы.
Эти значения являются единицами размера, как и px или em , поэтому их можно использовать для измерения других элементов, таких как width, margin или padding.
Поддержка браузеров довольно хорошая, но вам, вероятно, понадобится запасной вариант, такой как:
Но что, если контейнер не является областью просмотра (телом)?
Этот вопрос задает в комментариях Алексей под принятым ответом.
Пример 1
Однако, с контейнером с гибкой шириной, нужно понимать, что каким-то образом контейнер имеет размер размер которого по-прежнему находится вне области просмотра. Таким образом, это вопрос настройки параметра vw на основе этой разницы в процентах по размеру для области просмотра, что означает учет размеров родительских оболочек. Возьмите этот пример :
Пример 2
Вы можете помочь в определении размера области просмотра, форсируя вычисления, основанные на этом. Рассмотрим этот пример :
Размер по-прежнему зависит от области просмотра, но по сути настраивается исходя из самого размера контейнера.
Должен ли размер контейнера меняться динамически .
Вызов
При использовании функции CSS3 calc() стало бы трудно динамически настраиваться, поскольку в настоящее время эта функция не работает для целей font-size . Таким образом, вы не можете выполнить чистую настройку CSS3, если ваша ширина меняется на calc() . Конечно, небольшая корректировка ширины полей может быть недостаточной, чтобы гарантировать изменение font-size , поэтому это может не иметь значения.
Я знаю, что это не отвечает на вопрос оператора, но, возможно, это может быть решением для кого-либо еще.
Читайте также: