text-rendering — CSS — Дока
- Кратко
- Пример
- Как понять
- Как пишется
- auto
- optimizeSpeed
- optimizeLegibility
- geometricPrecision
- Подсказки
Кратко
Скопировано
Свойство text позволяет указывать браузеру, какие оптимизации нужно производить с текстом во время рендера.
Пример
Скопировано
<p>I’m filling this page</p>
<p>I’m filling this page</p>
.legible { text-rendering: optimizeLegibility;}
.legible {
text-rendering: optimizeLegibility;
}
Как понять
Скопировано
Чтобы символ шрифта мог менять свой размер в любых пределах, сохраняя при этом читаемость и гладкость, он представляет собой не растровую картинку, состоящую из пикселей, а набор математических формул, описывающих кривые и прямые, из которых состоит символ.
Это позволяет браузеру отрисовывать символ любого размера.
Когда браузер «рассчитал» внешний вид символа, он должен корректно отрисовать символ в пиксельной сетке экрана монитора. Процесс заполнения пикселей после расчётов для видимой отрисовки чего угодно называется рендеринг.
Рендеринг текста — это процесс отрисовки символов шрифта в пиксельной сетке. При этом для обеспечения более естественного вида текста браузер может выполнять дополнительные вычисления и модификации символов: изменять кернинг (межсимвольное расстояние), объединять пары и даже тройки символов в лигатуры.
Яркий пример кернинговых пар — сочетания символов AV или VA. Яркий пример лигатур — сочетания символов fi, fl, at.Не все шрифты имеют богатый набор кернинговых пар или лигатуры, поэтому употребление свойства text уместно не для каждого дизайна.
Рендеринг текста — сложный процесс, и браузеру приходится решать, как именно оптимизировать вывод символов: где-то скорректировать кернинг, где-то собрать символы в лигатуры, а где-то обеспечить геометрическую точность отрисовки символа. Свойство text указывает, что именно должен оптимизировать браузер во время рендеринга.
В примере показаны различные шрифты для понимания терминов лигатура и кернинговая пара.
Как пишется
Скопировано
Ключевые слова:
.seelctor { text-rendering: auto; /* По умолчанию */ text-rendering: optimizeSpeed; text-rendering: optimizeLegibility; text-rendering: geometricPrecision;}
.seelctor {
text-rendering: auto; /* По умолчанию */
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
}
autoСкопировано
Значение по умолчанию.
Браузер пытается самостоятельно угадать, в какой момент отрисовки важна скорость вывода символов, в какой — читаемость, а в какой — геометрическая точность.
optimizeSpeed Скопировано
При отрисовке текста браузер будет ставить в приоритет именно скорость отрисовки, поэтому лигатуры и кернинг будут отключены.
optimizeLegibility Скопировано
Используется в случае, когда важна не скорость отрисовки, а удобочитаемость текста и визуальная красота сочетаний символов. При таком значении браузер активно использует лигатуры и корректирует кернинг.
Открыть демо в новой вкладкеgeometricPrecision Скопировано
Основной приоритет при рендеринге текста — геометрическая точность. В некоторых шрифтах кернинг изменяется не пропорционально изменению размера шрифта. Это может приводить к не самому лучшему внешнему виду текста.
При установке text браузер начинает вычислять кернинг, основываясь на геометрической точности в положении символов, благодаря чему в некоторых случаях внешний вид текста может существенно улучшиться.
Когда мы масштабируем текст, браузер вычисляет итоговый размер символа, опираясь на размер шрифта и текущий масштаб, после чего запрашивает шрифт вычисленного размера у операционной системы. Иногда сочетание размера и масштаба может выдать дробное итоговое значение (например, размер шрифта 12 при масштабе 110% даст в итоге 13,2), которого просто не существует в системе. Тогда браузер округляет размер до ближайшего целого (13) и запрашивает его в системе. Это приводит к ступенчатому изменению размера шрифта.
Использование значения geometric позволяет избежать округления и отрисовывать текст именно такого размера, как задумано. Тут мы получаем плавное масштабирование и точность отрисовки.
Но при одном условии — это должно полностью поддерживаться движком рендеринга.
Подсказки
Скопировано
💡 Нужно понимать, что использование кернинга и лигатур требует от браузера дополнительных вычислений может существенно замедлить рендеринг больших объёмов текста, так что использовать значение optimize следует с осторожностью.
Если вы нашли ошибку, отправьте нам пул-реквест!
Во время отправки формы что-то пошло не так. Попробуйте ещё раз?
←
text
alt + ←
→
text
alt + →
Разврат и декаданс text-rendering: optimizeLegibility
Слушайте, я возлюбил типографику как ближнего своего, может быть, даже немного
больше.
Когда появилось CSS-свойство, которое обещало решить задачи,
связанные с лигатурами и аккуратно рассчитанным кернингом,
не каким-то дешёвым подобием — настоящим кернингом — я сразу же на него набросился.
Я добавил
Нет, правда — это были мои золотые деньки в веб-типографике. Эра, напичканная лигатурами fi, fft и покорившей моё сердце st. Буквы слова «нож» подгонялись друг к другу так плотно, что между ними нельзя было бы протиснуть и лезвия этого ножа, и я отчаянно искал повод написать AVAST в верхнем регистре, как будто чтобы позлить слово с самым жутким кернингом из мне известных.
Разница между text-rendering: optimizeLegibility (слева) и text-rendering: auto (справа) незначительна, даже если у вас изрядно наметан глаз.
Однако подсознательно я понимал, что мои новообретённые крылья сделаны из воска.
Вся эта типографская сила не дается бесплатно: text-rendering: optimizeLegibility — медленное свойство, и под «медленное»
я подразумеваю, что оно способно «положить» всю страницу,
начиная от времени первоначального рендеринга и заканчивая перерисовками. Более
того, оно ещё и глючное: в частности, в Android серьезные проблемы при
рендеринге страниц, на которых активно используется свойство optimizeLegibility,
особенно в его старых версиях, которые, к сожалению, всё ещё широко
распространены.
Но глюки не играют большой роли, а вот проблемы со скоростью — играют. При расчёте
кернинга для больших объёмов текста могут возникать тысячи мелких вычислительных
процессов, и это создает серьёзную нагрузку на процессор. В современном
десктопном браузере, например, в Chrome, ну, всё не очень хорошо,
а на мобильных с их ограниченными ресурсами это становится настоящим кошмаром,
особенно когда в дело вступает 
При использовании свойства optimizeLegibility вся работа происходит
ещё до того, как шрифт вообще можно отрендерить,
что выливается в чудовищно длительную задержку при отрисовке текста или
затягивающееся отображение текста шрифтом, предназначенным для мягкой деградации,
в зависимости от способа, которым подгружаются шрифты.
Таймлайн отображения страницы при
медленном соединении, созданный с помощью WebPageTest.org. Единственное отличие между страницами — p { text-rendering: optimizeLegibility; } и p { text-rendering: optimizeSpeed; }
Ключевым моментом, как вы, наверное, уже догадались, является умеренность. Использование этих свойств на подзаголовках не нанесет серьёзного ущерба производительности. По крайней мере, заметного ущерба.
На самом деле, даже значение по умолчанию — text-rendering: auto — не оставит
нас совсем уж без лигатур и с конским расстоянием между буквами.
В Firefox (и, возможно, в скором времени WebKit с Blink), optimizeLegibility включается для любого шрифта c
размером кегля font-size: 20px и более.
На таких крупных надписях эффект
намного заметнее, и пара коротких строк текста не так уж сильно повредит
производительности, чтобы это можно было ощутить.
Конечно, если мы хотим полностью отключить это свойство, всегда есть значение text-rendering: optimizeSpeed, которое сработает вне зависимости от кегля
шрифта и полностью исключит любую нагрузку, которая связана с использованием text-rendering: auto, но если вы работаете со страницей, на которой
присутствует значительный объем текста со значением font-size больше 20px, возможно, стоит попробовать text-rendering: optimizeSpeed.
text-rendering — CSS: Каскадные таблицы стилей
Свойство CSS text-rendering предоставляет механизму рендеринга информацию о том, что следует оптимизировать при рендеринге текста.
Браузер идет на компромисс между скоростью, разборчивостью и геометрической точностью.
/* Значения ключевых слов */ рендеринг текста: авто; рендеринг текста: optimiseSpeed; рендеринг текста: оптимизация разборчивости; рендеринг текста: геометрическая точность; /* Глобальные значения */ рендеринг текста: наследовать; рендеринг текста: начальный; рендеринг текста: вернуться; рендеринг текста: обратный слой; рендеринг текста: не установлен;
Примечание: Свойство text-rendering — это свойство SVG, которое не определено ни в одном стандарте CSS. Однако браузеры Gecko и WebKit позволяют применять это свойство к содержимому HTML и XML в Windows, macOS и Linux.
Одним из очень заметных эффектов является OptimizeLegibility , который включает лигатуры (ff, fi, fl и т. д.) в тексте размером менее 20 пикселей для некоторых шрифтов (например, Microsoft Calibri , Candara , Constantia и Corbel или семейство шрифтов DejaVu ).
Значения
-
авто
Check cross-browser support before using.»>
Нестандартный Браузер делает обоснованные предположения о том, когда оптимизировать скорость, разборчивость и геометрическую точность при рисовании текста. Различия в интерпретации этого значения браузером см. в таблице совместимости.
-
оптимизация скорости При рисовании текста браузер делает упор на скорость рендеринга, а не на четкость и геометрическую точность. Он отключает кернинг и лигатуры.
-
оптимизация разборчивости Браузер делает упор на удобочитаемость, а не на скорость рендеринга и геометрическую точность. Это позволяет использовать кернинг и дополнительные лигатуры.
-
геометрическая точностьНестандартный Браузер отдает предпочтение геометрической точности, а не скорости рендеринга и удобочитаемости.
Некоторые аспекты шрифтов, такие как кернинг, не масштабируются линейно. Таким образом, это значение может сделать текст, использующий эти шрифты, хорошо выглядящим.
В SVG, когда текст масштабируется вверх или вниз, браузеры вычисляют окончательный размер текста (который определяется указанным размером шрифта и примененным масштабом) и запрашивают шрифт этого вычисленного размера из системы шрифтов платформы. Но если вы запрашиваете размер шрифта, скажем, 9 с масштабом 140%, результирующий размер шрифта 12,6 явно не существует в системе шрифтов, поэтому вместо этого браузер округляет размер шрифта до 12. Это приводит к ступенчатому масштабированию текста.
Но 9Свойство 0004 GeometryPrecision — при полной поддержке механизма рендеринга — позволяет плавно масштабировать текст. Для больших коэффициентов масштабирования вы можете увидеть менее чем красивую визуализацию текста, но размер соответствует ожидаемому — ни в большую, ни в меньшую сторону до ближайшего размера шрифта, поддерживаемого Windows или Linux.
Примечание: WebKit точно применяет указанное значение, но Gecko обрабатывает это значение так же, как
optimizeLegibility.
| Initial value | auto |
|---|---|
| Applies to | text elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |
рендеринг текста =
авто |
оптимизировать скорость |
оптимизацияУдобочитаемость |
геометрическая точность
Автоматическое применение оптимизации разборчивости
Это демонстрирует, как optimizeLegibility используется браузерами автоматически, когда размер шрифта меньше, чем 20px .
HTML
LYoWAT - ff fi fl ffl
ЛЁВАТ - ff fi fl ffl
CSS
.
маленький {
шрифт: 19.9px "Constantia", "Times New Roman", "Georgia", "Palatino", с засечками;
}
.большой {
шрифт: 20px "Constantia", "Times New Roman", "Georgia", "Palatino", с засечками;
}
Результат
optimiseSpeed и optimizeLegibility
В этом примере показана разница между внешним видом optimiseSpeed и optimizeLegibility (в вашем браузере; другие браузеры могут отличаться).
HTML
LYoWAT - ff fi fl ffl
ЛЁВАТ - ff fi fl ffl
УСБ
р {
шрифт: 1.5em "Constantia", "Times New Roman", "Georgia", "Palatino", с засечками;
}
.скорость {
рендеринг текста: optimiseSpeed;
}
.разборчивость {
рендеринг текста: оптимизация разборчивости;
}
Результат
| Спецификация |
|---|
| Масштабируемая векторная графика (SVG) 2 # TextrenderingProperty | 9093 # TextrenderingProperty
Включите JavaScript для просмотра данных.
На самом деле это свойство SVG. Однако браузеры Gecko/WebKit/Blink позволяют применять это свойство к элементам HTML.
(например, Calibri или DéjàVu) Это пороговое значение в 20 пикселей можно изменить в Gecko с помощью пользовательских настроек 
Применяйте его, только если вы знаете, какой будет максимальная длина текста. (Кроме того, избегайте использования его для клиентов Android, по крайней мере, в более старых версиях, которые все еще используют: его средство визуализации шрифтов часто имеет очень странные ошибки, когда этот режим включен.)