Отрисовка текста и её обновки в браузерах
22.02.2026 • css
Вступление
Браузеры активно внедряют целую пачку новых возможностей по отрисовке текста. Если раньше мы могли порадоваться кастомным шрифтам, и это уже было выше мечтаний ряда разработчиков, то сейчас свойства для кастомизации отрисовки текста исчисляются десятками.
Давайте посмотрим, что нового происходило за последнее время, над чем работают браузеры и чего нам (оказывается) не хватало все эти годы.
Обновления @font-face
@font-face позволяет определять кастомные шрифты. Дескрипторы внутри него (не свойства!) позволяют настраивать этот шрифт. И если раньше мы настраивали доступные значения по типу font-weight, то теперь потихоньку начинаем настраивать “предустановки”. CSS свойства протекают в @font-face.
Это полезно, так как определённые настройки мы можем применить именно к кастомному шрифту, а обычные свойства работают на все шрифты сразу.
В частности, за недавнее время в Хроме появились дескрипторы font-feature-settings и font-variation-settings:
@font-face {
font-family: 'Sample';
src: ...;
font-feature-settings: 'tnum';
font-variation-settings: 'wdth' 150;
}font-feature-settings позволяет настраивать фичи OpenType, такие, как лигатуры, варианты отрисовки цифр, использование определённого стиля символов и многое другое.
font-variation-settings позволяет настраивать определённые вариационные оси шрифта, например, ширину (возможности сильно разнятся от конкретных шрифтов).
Помимо перечисленного, не так давно реализовали дескриптор size-adjust, который работает аналогично свойству font-size-adjust. Они позволяют настраивать метрики шрифта, чтобы можно было выровнять разные шрифты между собой. Это бывает полезно, если шрифт может меняться на глазах у пользователя во время загрузки, либо если несколько шрифтов сопутствуют рядом друг с другом.
Масштабирование шрифтов
Говоря про изменения размеров шрифтов, стоит упомянуть и про системные настройки размера текста.
Новый мета-тег из Хрома 146 (выходит на днях) text-scale позволяет сказать браузеру, что страница учитывает пользовательские настройки размера текста:
<meta name="text-scale" content="scale">Используя данный мета-тег, вы говорите браузеру, что уже учитываете пользовательские настройки по масштабированию шрифтов, и что браузеру не нужно использовать свои механизмы.
Для этой же цели служит и новое значение env(preferred-text-scale), которое как раз и будет возвращать значение масштабирования, избранное пользователем. Однако в большинстве случаев оно не нужно – достаточно правильно объявить размер шрифта на <html> и реагировать на него в странице (например, через rem).
Балансировка длины строк
Свойство text-wrap: balance – не новое, а вот значение pretty появилось чуть позже. Учитывайте это при написании стилей! pretty сейчас поддерживается в Safari 26, но не поддерживается в Файерфоксе, поэтому имеет смысл писать значение с фолбеком в balance.
Выравнивание текста
Говоря про балансировку длины строк, нельзя не вспомнить и про свойства для выравнивания слов вдоль строки.
Свойство text-justify появилось относительно давно в Файерфоксе, однако в Хроме существует только со 145й версии. Оно позволяет включить конкретный режим распределения свободного места с text-align: justify (да, оказывается, вариантов несколько). В частности, можно включить вариант с отступами между буквами (не работает в Сафари):
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil amet repellendus ducimus ipsum soluta beatae debitis itaque ratione at quasi consectetur alias, consequuntur officia minus porro vitae eius illo nemo.
Обновление ожидает и само свойство text-align. Уже давно значение match-parent было реализовано, однако и по сей день в Хромиумах используется вариант с префиксом. Подозреваю, что в будущем нас ждёт беспрефиксный вариант везде.
Кастомная обрезка текста многоточием
Говоря про старые свойства, которые давно реализованы в Файерфоксе и которые застряли во времени, можно вспомнить и про text-overflow: '<строка>'. Значение позволяет задать произвольную строку вместо стандартного троеточия, и входит в обновлённую спеку CSS Overflow Module Level 4.
Дополнительные настройки красной строки
Обычно отступ первой строки в абзаце (красная строка) используется в вебе не часто, а тут подвезли дополнительную кастомизацию для него (и теперь она доступна во всех браузерах):
.p1 {
text-indent: 3em each-line;
}
.p2 {
text-indent: 3em hanging;
}Значение each-line позволяет задать отступ не только для начала абзаца, но и для каждой строки (не визуальной, а в терминах явного переноса в тексте). Значение hanging позволяет настраивать отступ не для первой строки абзаца, а для всех остальных. Более того, оба новых значения можно комбинировать:
.p3 {
text-indent: 3em hanging each-line;
}Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nihil amet repellendus ducimus ipsum soluta beatae debitis itaque ratione at quasi consectetur alias, consequuntur officia minus porro vitae eius illo nemo.
Не уверен, как часто эти значения будут использоваться, но в прошлом я видел изобретательные варианты использования text-indent.
Висящая пунктуация
Ещё одно свойство с hanging, но теперь уже в названии, а не в значении – hanging-punctuation. Свойство позволяет вынести символы пунктуации за пределы лайнбокса. Это может быть полезно, например, для стилизации цитат:
«Lorem ipsum dolor sit amet consectetur adipisicing elit.»
Свойство есть в спеке CSS Text Module Level 3, которая в статусе “кандидат к рекомендации”, однако реализовано только в Сафари, и уже достаточно давно. Возможно, текущая активность – признак того, что браузеры хотят вернуться к свойству?
letter-spacing и word-spacing в процентах
Представьте ситуацию: вы хотите сделать отступ между букв для всех элементов, и чтобы этот отступ зависел от размера шрифта. Вполне представимая задача, и сперва она звучит, как очень простая. В CSS есть наследование, остаётся один раз написать нужное свойство. Фиксированные значения не подходят, но у нас ведь есть единицы измерения, зависящие от размера текста. Ни слова больше:
html {
letter-spacing: .1em;
}И… Это работает не так, как нам бы хотелось для решения такой задачи. Итоговое значение будет сначала вычислено, а потом отнаследовано! Итого получим просто фиксированное значение.
Проблему решают процентные значения, которые, как ни странно, будут отнаследованы, и только затем вычислены на элементе:
32px text
20px text
12px text
Этот код наконец-то работает во всех браузерах, и Хром догнал остальных в 145й версии. Аналогичная история произошла и с word-spacing.
Подчёркивания и прочие text-decoration
Иногда люди делают собственные поля ввода, а с ними встаёт задача и подсветки грамматических и прочих ошибок. Вопрос особенно интересен в связи с внедрением Highlight API. И долгое время реализовать волнистое красное подчёркивание было можно, но это было неприятно и бажно.
С выходом Сафари 26.2 мы наконец-то можем использовать значения spelling-error / grammar-error для ошибок во всех браузерах:
Lorem ipsum dolor sit amet consectetur adipisicing elit.
В Файерфоксе 146 реализовали другой интересный вариант настройки подчёркивания: text-decoration-inset. Свойство позволяет сместить начало и/или конец подчёркивания. Мне видится, что с помощью этого свойства можно будет получить какие-то интересные декоративные решения. Также можно подумать и про эффекты с ховером или просто анимированное выделение текста:
Hello world Hello world
Математический шрифт
Долгое время в браузерах были встроенные “семейства шрифтов”, по типу всем известных serif / monospace / sans-serif и некоторых других. Новое значение в списке – “математический” шрифт.
Шрифт в первую очередь нужен для использования в MathML.
Переопределение языковых настроек шрифта
В шрифтах есть глифы, специфичные для конкретных языков. Обычно браузеры используют атрибут lang в HTML для определения языка, и задействуют эти специальные глифы. Однако со свойством font-language-override можно разделить эти настройки: lang оставить для реального значения языка, а CSS свойством font-language-override поменять визуальное представление.
Это может быть использовано для глифов, которые есть в шрифте для одного языка, и нет для другого. Возможно, задача не очень характерная для русскоязычных сайтов, и вообще похоже на очень точную настройку, но всё равно звучит очень интересно) Лишь бы нужный шрифт нашёлся.
Ах да, Хром догоняет Файерфокс, а Сафари всё ещё ждём.
Варианты отображения эмодзи
Эмодзи – вполне валидная часть юникода, и встречаются на сайтах. Браузеры сделали доработки и тут.
В 145м Хроме в режиме высокой контрастности теперь используются чёрно-белый вариант эмодзи, что вполне логично.
Также появился способ выбирать вариант отображения эмодзи с помощью свойства font-variant-emoji. Такого же эффекта можно было достичь с помощью управляющих последовательностей юникода, а теперь всё проще.
☎
Настройки переноса текста
Несмотря на давнюю реализацию переносов слов в браузерах, использований этой возможности не так много. И дело тут во всевозможных нюансах, начиная от того, что для реализации требуются наличие словарей для конкретного языка на устройстве. Дело было ещё и в том, что текст с переносами получался не очень красивым. Для решения этой задачи сделали новое свойство hyphenate-limit-chars, которое доступно с Хрома 109 и с Файерфокса 137.
Длинный текст с очень длинными программисткими длиннющими словами.
Получается, ждём Сафари? Хотя Сафари идёт своим путём и вкладывает силы в красоту текста в text-wrap: pretty.
Отображение иероглифов и арабской вязи
Немного затронем языки, которые редко встречаются на русскоязычных сайтах.
В Сафари 26.2 реализовали слитную отрисовку символов, которые расположены в разных DOM-элементах. Это особенно характерно для арабской вязи, когда символы рисуются не отдельно, а объединяются вместе друг с другом.
Китайский, корейский, японский языки также регулярно получают обновления от браузеров. Новые значения для text-transform, text-decoration-skip-ink, новые свойства text-autospace, ruby-align, ruby-overhang, text-spacing-trim появились в браузерах и я не буду подробно на этом останавливаться.
Что не появилось в браузерах
Несмотря на обширнейший список нововведений, несколько очень ожидаемых вещей в браузерах так и не появилось.
line-clamp без префиксов
Свойство -webkit-line-clamp с нами уже очень давно и так часто используется, что его поддержали во всех актуальных браузерах вместе с префиксом -webkit. Некоторое время назад была попытка сделать беспрефиксный вариант свойства, да ещё и с интересным значением auto, но ни один браузер так и не реализовал его.
Хочется верить, что в какой-то момент свойство доделают, а пока что продолжаем ждать и использовать -webkit-line-clamp.
Размер текста по ширине контейнера
Старая задача с отображением текста под размер контейнера решается годами, если не десятилетиями.
Есть прототип свойства text-grow, который даже был реализован одним из разработчиков на базе Хрома 145, и есть объяснение этого свойства в виде доки. Ждём свойство в скором будущем?
Привет, мир
Уменьшение ширины контейнера под многострочный текст
Ещё одна очень старая задача. В случае, если текст многострочный, он всё равно займёт всю доступную ширину, даже если место будет не нужно. Минимальная ширина вычисляется по ширине максимального слова. Максимальная – по ширине текста в одну строку. Итого у нас нет “реальной” ширины многострочного текста. Особенно ярко проблему видно в вёрстке всевозможных чатов, которые так часто встречаются в последнее время:
Ходили слухи о том, что есть желание реализовать такую возможность в браузерах, но последнее время я ничего про это не слышал. Возможно, пропустил? Напишите в комментариях, пожалуйста.
Подведём итоги
Мне страшно. Все эти обновки проходили где-то рядом со мной, и когда я думал о написании статьи, ожидал, что их в 2-3 раза меньше. С одной стороны, нерешённых задач с текстом всё ещё хватает, с другой – настроек уже столько, что я сомневаюсь, что есть хоть один человек, который знает про все из них.
Приятно, что у нас появляется всё больше возможностей для более тонкой настройки отображения текста, ведь текст – один из основных видов контента на сайтах, за которым приходят пользователи. Мы смотрим на него ежедневно, и хочется, чтобы он выглядел идеально в целой куче условий.
Будут ли пользоваться этими свойствами разработчики или просто банально не знать об их существовании, потому что их слишком много? Вот как раз эту проблему и пытается решить статья)
Обсудить в Telegram
