В WordPress 6.1 появилась возможность использовать “Fluid font sizes”. Это позволяет шрифтам адаптироваться к изменениям размера экрана, например, расти по мере увеличения ширины окна просмотра или уменьшаться по мере сокращения.
Fluid Typography был протестирован через theme.json с выпусками плагина Gutenberg 13.8 и 13.9.
Как использовать fluid font size в своей теме
Fluid font sizes могут быть активированы для тем на основе блоков и классических тем через файл theme.json.
Новый булевый settings.typography.fluid действует как переключатель, который, когда установлен на true, преобразует следующие значения в функцию clamp():
- значения предустановленного размера шрифта в
settings.typography.fontSizes - настраиваемые размеры шрифта, определенные в theme.json или редакторе.
Функция clamp() содержит верхний, нижний и предпочтительный размер шрифта. Последний будет настраиваться в соответствии с шириной окна просмотра.
Для предустановленных значений индивидуальные размеры шрифта могут быть определены их минимальным и максимальным значениями, которые определяют наименьшие и наибольшие значения размера шрифта. Кроме того, отдельные предустановленные размеры шрифта могут отказаться от установки settings.typography.fontSizes[].fluid: false`.
В отсутствие явных минимальных и максимальных значений редактор будет масштабировать существующее значение size вверх и вниз, чтобы вычислить наименьшие и наибольшие значения автоматически, используя вычисленные нижние и верхние значения размера шрифта на основе одного значения.
Рассмотрим следующий пример theme.json:
{
"version": 2,
"settings": {
"typography": {
"fluid": true,
"fontSizes": [
{
"size": ".9rem",
"fluid": {
"min": "0.9rem",
"max": "1.2rem"
},
"slug": "piccolino",
"name": "Piccolino"
},
{
"size": "2rem",
"fluid": {
"min": "1.8rem",
"max": "3.3rem"
},
"slug": "in-mezzo",
"name": "In Mezzo"
},
{
"size": "2.8rem",
"fluid": false,
"slug": "neutrale",
"name": "Neutrale"
},
{
"size": "4.75rem",
"slug": "grandone",
"name": "Grandone"
}
]
}
},
"styles": {
"typography": {
"fontSize": "16px"
},
"elements": {
"h1": {
"typography": {
"fontSize": "4rem"
}
}
},
"blocks": {
"core/post-date": {
"typography": {
"fontSize": "14px"
}
}
}
}
}
Вышеуказанное определение theme.json генерирует следующие предустановленные размеры шрифта, которые вы можете использовать в своей теме:
--wp--preset--font-size--piccolino: clamp(0.9rem, 0.9rem + ((1vw - 0.48rem) * 0.577), 1.2rem);
--wp--preset--font-size--in-mezzo: clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3.3rem);
--wp--preset--font-size--neutrale: 2.8rem;
--wp--preset--font-size--grandone: clamp(3.5625rem, 3.5625rem + ((1vw - 0.48rem) * 6.851), 7.125rem);
Когда включена fluid typography, настраиваемые размеры шрифта в стилях также будут преобразованы в значения fluid font sizes, что приведет к следующему CSS:
.wp-block-post-date{font-size: clamp(10.5px, 0.65625rem + ((1vw - 7.68px) * 1.262), 21px); ...}
h1{font-size: clamp(3rem, 3rem + ((1vw - 0.48rem) * 5.769), 6rem); ...}
body{font-size: clamp(12px, 0.75rem + ((1vw - 7.68px) * 1.442), 24px); ... }
Темы, которые не включают улучшение fluid font size, не увидят никакой разницы в работе шрифтов. Все еще возможно создать свой собственный clamp() или другую формулу, похожую на fluid, в значениях свойств size и fontSize.
Применение fluid font sizes в редакторе
Ничего не изменится в работе или внешнем виде интерфейса типографики в редакторе.
Если в theme.json определены предустановленные значения fluid font size, пользователи могут применять эти значения, используя выбор размера шрифта:
Выбор управления пользовательским интерфейсом размера шрифта с предустановленными значениями
Любое пользовательское значение, установленное в редакторе, также будет преобразовано и сохранено как значение clamp():
Текущие проблемы и ограничения
Fluid font sizes будут работать только там, где размер шрифта определен в единицах px, em или rem. Для расчета «предпочтительного размера шрифта» алгоритм будет преобразовывать размеры шрифта в px в rem, предполагая базовый размер 16px, что эквивалентно 1em или 1rem.
Это не только упрощает задачу расчета формулы clamp, но и способствует использованию относительных размеров: установка размера шрифта, который будет масштабироваться пропорционально любому базовому размеру, установленному браузером, поможет сохранить доступность.
В первой итерации также были сделаны некоторые базовые предположения относительно:
- Минимальные и максимальные ширины окна просмотра (1600px и 768px).
- Расчет минимального и максимального размеров шрифта в отсутствие конкретных значений.
- Скорость масштабирования между минимальными и максимальными границами размера шрифта.
В настоящее время для целей генерации формул clamp существуют статические значения. В запросе на дополнение рассматривается способ сделать эти параметры настраиваемыми.
Будущие улучшения
Будущие итерации fluid typography могут рассмотреть новые возможности:
- Сделать формулу clamp более настраиваемой.
- Исследовать потенциал фильтров, чтобы позволить темам или плагинам настраивать вывод размера шрифта, используя доступные значения clamp.
- Проектирование элементов управления UI для fluid typography.
- Введение fluidity для других свойств типографики, таких как межбуквенный интервал.
- Разрешение настраиваемых верхних и нижних пределов размера шрифта, чтобы размеры шрифта никогда не были слишком малыми или слишком большими.
Связанные материалы
- Make WordPress core post: Block Font Sizes and Fluid typography (предложение)
- Fluid Typography Option #24480
- Block supports: add fluid typography #39529
- Make WordPress core post: Testing and Feedback for the Fluid Typography Feature
- Block supports: add configurable fluid typography settings to theme.json #42489
- Open issues and feature enhancement requests
- Typography Tools: Tracking #34345 (общая проблема отслеживания инструментов типографики)
- Testing and Feedback for the Fluid Typography Feature
- Converting custom font sizes to fluid values #44758
Перевод https://make.wordpress.org/core/2022/10/03/fluid-font-sizes-in-wordpress-6-1/
