Text rendering css: text-rendering ⚡️ HTML и CSS с примерами кода

Содержание

text-rendering — CSS — Дока

Кратко
Пример
Как понять
Как пишется
1. auto
2. optimizeSpeed
3. optimizeLegibility
4. geometricPrecision
Подсказки

Кратко

Секция статьи «Кратко»

Свойство text-rendering позволяет указывать браузеру, какие оптимизации нужно производить с текстом во время рендера.

Пример

Секция статьи «Пример»

<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-rendering уместно не для каждого дизайна.

Рендеринг текста — сложный процесс, и браузеру приходится решать, как именно оптимизировать вывод символов: где-то скорректировать кернинг, где-то собрать символы в лигатуры, а где-то обеспечить геометрическую точность отрисовки символа. Свойство text-rendering указывает, что именно должен оптимизировать браузер во время рендеринга.

Открыть демо в новой вкладке

В примере показаны различные шрифты для понимания терминов лигатура и кернинговая пара.

Как пишется

Секция статьи «Как пишется»

Ключевые слова:

.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 Секция статьи «auto»

Значение по умолчанию. Браузер пытается самостоятельно угадать, в какой момент отрисовки важна скорость вывода символов, в какой — читаемость, а в какой — геометрическая точность.

optimizeSpeed Секция статьи «optimizeSpeed»

При отрисовке текста браузер будет ставить в приоритет именно скорость отрисовки, поэтому лигатуры и кернинг будут отключены.

optimizeLegibility Секция статьи «optimizeLegibility»

Используется в случае, когда важна не скорость отрисовки, а удобочитаемость текста и визуальная красота сочетаний символов. При таком значении браузер активно использует лигатуры и корректирует кернинг.

Открыть демо в новой вкладке

geometricPrecision Секция статьи «geometricPrecision»

Основной приоритет при рендеринге текста — геометрическая точность. В некоторых шрифтах кернинг изменяется не пропорционально изменению размера шрифта. Это может приводить к не самому лучшему внешнему виду текста. При установке text-rendering: geometricPrecision браузер начинает вычислять кернинг, основываясь на геометрической точности в положении символов, благодаря чему в некоторых случаях внешний вид текста может существенно улучшиться.

Когда мы масштабируем текст, браузер вычисляет итоговый размер символа, опираясь на размер шрифта и текущий масштаб, после чего запрашивает шрифт вычисленного размера у операционной системы. Иногда сочетание размера и масштаба может выдать дробное итоговое значение (например, размер шрифта 12 при масштабе 110% даст в итоге 13,2), которого просто не существует в системе. Тогда браузер округляет размер до ближайшего целого (13) и запрашивает его в системе. Это приводит к ступенчатому изменению размера шрифта.

Использование значения geometricPrecision позволяет избежать округления и отрисовывать текст именно такого размера, как задумано. Тут мы получаем плавное масштабирование и точность отрисовки. Но при одном условии — это должно полностью поддерживаться движком рендеринга.

Подсказки

Секция статьи «Подсказки»

💡 Нужно понимать, что использование кернинга и лигатур требует от браузера дополнительных вычислений может существенно замедлить рендеринг больших объёмов текста, так что использовать значение optimizeLegibility следует с осторожностью.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

text-decoration-skip-ink

alt + ←

→

text-shadow

alt + →

Разврат и декаданс text-rendering: optimizeLegibility

Слушайте, я возлюбил типографику как ближнего своего, может быть, даже немного больше. Когда появилось CSS-свойство, которое обещало решить задачи, связанные с лигатурами и аккуратно рассчитанным кернингом, не каким-то дешёвым подобием — настоящим кернингом — я сразу же на него набросился. Я добавил

text-rendering: optimizeLegibility в заголовки, в тексты статей, в ссылки. Даже изображениям добавил — просто на всякий случай, например, если лигатура окажется на фоне фотографии, размытая, как неприлично довольное привидение.

Нет, правда — это были мои золотые деньки в веб-типографике. Эра, напичканная лигатурами fi, fft и покорившей моё сердце st. Буквы слова «нож» подгонялись друг к другу так плотно, что между ними нельзя было бы протиснуть и лезвия этого ножа, и я отчаянно искал повод написать AVAST в верхнем регистре, как будто чтобы позлить слово с самым жутким кернингом из мне известных.

Разница между text-rendering: optimizeLegibility (слева) и text-rendering: auto (справа) незначительна, даже если у вас изрядно наметан глаз.

Однако подсознательно я понимал, что мои новообретённые крылья сделаны из воска. Вся эта типографская сила не дается бесплатно: text-rendering: optimizeLegibility — медленное свойство, и под «медленное» я подразумеваю, что оно способно «положить» всю страницу, начиная от времени первоначального рендеринга и заканчивая перерисовками. Более того, оно ещё и глючное: в частности, в Android серьезные проблемы при рендеринге страниц, на которых активно используется свойство optimizeLegibility, особенно в его старых версиях, которые, к сожалению, всё ещё широко распространены.

Но глюки не играют большой роли, а вот проблемы со скоростью — играют. При расчёте кернинга для больших объёмов текста могут возникать тысячи мелких вычислительных процессов, и это создает серьёзную нагрузку на процессор. В современном десктопном браузере, например, в Chrome, ну, всё не очень хорошо, а на мобильных с их ограниченными ресурсами это становится настоящим кошмаром, особенно когда в дело вступает

@font-face.

При использовании свойства 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. Я почти всегда предпочитаю оставлять значение по умолчанию text-rendering: auto, но если вы работаете со страницей, на которой присутствует значительный объем текста со значением font-size больше 20px, возможно, стоит попробовать text-rendering: optimizeSpeed.

Текстовый рендеринг CSS — GeeksforGeeks

Улучшить статью

Сохранить статью

Последнее обновление: 29 авг, 2022

Читать

Обсудить

Улучшить статью

Сохранить статью

Text-rendering — это свойство, которое позволяет вам выбирать, что оптимизировать при рендеринге текста. Он отправляет механизму рендеринга информацию о том, что оптимизировать при рендеринге текста.

На самом деле это не свойство CSS и не определено ни в одном стандарте CSS. Это свойство SVG, но браузеры Gecko и Webkit позволяют применять это свойство к элементам HTML. При этом идет на компромисс среди других аспектов, таких как скорость, разборчивость (четкость) и геометрическая точность.

Синтаксис:

 рендеринг текста: авто | оптимизироватьСкорость |
                 оптимизироватьУдобочитаемость | геометрическая точность;

Значения свойств:

авто: Браузер прогнозирует, когда можно настроить скорость, удобочитаемость и геометрическую точность при рисовании текста. Разные браузеры отвечают разными значениями.
OptimizeSpeed: Браузер отдает больший приоритет скорости рендеринга по сравнению с разборчивостью и геометрической точностью при рисовании текста. Он отключает кернинг и лигатуры.
Оптимизация разборчивости:

Браузер отдает предпочтение большей удобочитаемости по сравнению со скоростью рендеринга и геометрической точностью при рисовании текста. Он позволяет использовать кернинг и дополнительные лигатуры.
геометрическая точность: Браузер отдает предпочтение большей геометрической точности по сравнению со скоростью рендеринга и разборчивостью при рисовании текста. Некоторые аспекты шрифтов, такие как кернинг, не масштабируются линейно, поэтому текст с использованием этих шрифтов может выглядеть еще лучше.

Пример:

HTML

< html >

< head >

< title

 >Гики для гиков  название   > 
           <   стиль   >

0063 . auto {

text-rendering: auto;

}

.Optimizepeed {

Текстовое Рендовое: Optimizepest;

}

.Optimizelegibility {

Текстовое растворивание: Optimizelegability;

}

.Geometricprecision {

Текстовое растворивание: geometricprecision;

}

. 0064 >

< h3 style = "color:#3FBF3F" >text-rendering h3 >

< P

   Класс   =   «Авто»  > Добро пожаловать в GFG   P  > 
 9003    < 9003 P
    < 9003 P
   .0064  =   "Optimizespeed"  > Добро пожаловать в GFG   P  > 
    <  P     <  P     <  P  . GFG   P  > 
    <  P   Класс   =   "Геометрический0064 
  p   > 
  
          body   > 
    html   >

Output:

Поддерживаемые браузеры:

Google Chrome 4
Edge 79
Firefox 1
Opera 15
Safari 5

rendering — CSS: каскадные таблицы стилей

Свойство CSS text-rendering предоставляет механизму рендеринга информацию о том, что следует оптимизировать при рендеринге текста.

Браузер идет на компромисс между скоростью, удобочитаемостью и геометрической точностью.

 /* Значения ключевых слов */
рендеринг текста: авто;
рендеринг текста: optimiseSpeed;
рендеринг текста: оптимизация разборчивости;
рендеринг текста: геометрическая точность;
/* Глобальные значения */
рендеринг текста: наследовать;
рендеринг текста: начальный;
рендеринг текста: не установлен;

Примечание: Свойство text-rendering — это свойство SVG, которое не определено ни в одном стандарте CSS. Однако браузеры Gecko и WebKit позволяют применять это свойство к содержимому HTML и XML в Windows, macOS и Linux.

Одним из очень заметных эффектов является optimLegibility , который включает лигатуры (ff, fi, fl и т. д.) в тексте размером менее 20 пикселей для некоторых шрифтов (например, Microsoft Calibri , Candara , Constantia и ). Corbel или семейство шрифтов DejaVu ).

Синтаксис

Значения

авто

Браузер делает обоснованные предположения о том, когда следует оптимизировать скорость, удобочитаемость и геометрическую точность при рисовании текста. Различия в интерпретации этого значения браузером см. в таблице совместимости.

оптимизация скорости

При рисовании текста браузер делает упор на скорость рендеринга, а не на четкость и геометрическую точность. Он отключает кернинг и лигатуры.

оптимизация разборчивости

Браузер делает упор на удобочитаемость, а не на скорость рендеринга и геометрическую точность. Это позволяет использовать кернинг и дополнительные лигатуры.

геометрическая точность

Браузер отдает предпочтение геометрической точности, а не скорости рендеринга и удобочитаемости. Некоторые аспекты шрифтов, такие как кернинг, не масштабируются линейно. Таким образом, это значение может сделать текст, использующий эти шрифты, хорошо выглядящим.

В SVG, когда текст масштабируется вверх или вниз, браузеры вычисляют окончательный размер текста (который определяется указанным размером шрифта и примененным масштабом) и запрашивают шрифт этого вычисленного размера из системы шрифтов платформы. Но если вы запрашиваете размер шрифта, скажем, 9 с масштабом 140%, результирующий размер шрифта 12,6 явно не существует в системе шрифтов, поэтому вместо этого браузер округляет размер шрифта до 12. Это приводит к ступенчатому масштабированию текста.

Но 9Свойство 0063 GeometryPrecision — при полной поддержке механизма рендеринга — позволяет плавно масштабировать текст. Для больших коэффициентов масштабирования вы можете увидеть менее чем красивую визуализацию текста, но размер соответствует ожидаемому — ни в большую, ни в меньшую сторону до ближайшего размера шрифта, поддерживаемого Windows или Linux.

Примечание : WebKit точно применяет указанное значение, но Gecko обрабатывает это значение так же, как optimLegibility .

Формальное определение

Initial value	`auto`
Applies to	text elements
Inherited	yes
Computed value	as specified
Animation type	discrete

Формальный синтаксис

 авто | оптимизироватьСкорость | оптимизироватьУдобочитаемость | геометрическая точность

Примеры

Автоматическое применение оптимизации разборчивости

Это демонстрирует, как optimizeLegibility используется браузерами автоматически, когда размер шрифта меньше, чем 20px .

HTML

ЛЁВАТ - ff fi fl ffl

УСБ

 .small { шрифт: 19,9px "Constantia", "Times New Roman", "Georgia", "Palatino", с засечками; }
. big { шрифт: 20px "Constantia", "Times New Roman", "Georgia", "Palatino", serif; }

Результат

Оптимизация скорости и оптимизация разборчивости

В этом примере показана разница между внешним видом optimSpeed и optimLegibility (в вашем браузере; другие браузеры могут отличаться).

HTML

ЛЁВАТ - ff fi fl ffl

УСБ

 p { шрифт: 1.5em "Constantia", "Times New Roman", "Georgia", "Palatino", serif }
.speed { рендеринг текста: оптимизируем скорость; }
.legibility { рендеринг текста: оптимизируем разборчивость; }

Результат

Технические характеристики

Спецификация	Статус	Комментарий
Масштабируемая векторная графика (SVG) 2 Определение «рендеринга текста» в этой спецификации.	Кандидат в рекомендации	Без изменений
Масштабируемая векторная графика (SVG) 1.1 (Вторая редакция) Определение «рендеринга текста» в этой спецификации.	Рекомендация	Исходное определение

Совместимость с браузером

Таблица совместимости на этой странице создана из структурированных данных. Если вы хотите внести свой вклад в данные, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос на включение.

	Настольный						Мобильный
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`text-rendering` Нестандартный	Хром Полная поддержка 4 Примечания Полная поддержка 4 Примечания Примечания Это свойство поддерживается только в Windows и Linux. Примечания Первоначальные версии содержали ошибки в Windows и Linux, которые нарушали подстановку шрифтов, капители, интервалы между буквами или приводили к перекрытию текста.	Край Полная поддержка 79 Примечания Полная поддержка 79 Примечания Примечания Это свойство поддерживается только в Windows и Linux. Примечания Первоначальные версии содержали ошибки в Windows и Linux, которые нарушали подстановку шрифтов, капители, интервалы между буквами или приводили к перекрытию текста.	Firefox Полная поддержка 1 Примечания Полная поддержка 1 Примечания Примечания Это свойство поддерживается только в Windows и Linux. Примечания Параметр `optimiseSpeed` не влияет на Firefox 4, поскольку стандартный код для рендеринга текста уже работает быстро, а более быстрого пути кода в настоящее время нет. См. ошибку 595688 для подробностей.	ИЭ Без поддержки №	Опера Полная поддержка 15	Сафари Полная поддержка 5	Веб-просмотр Android Полная поддержка 3 Примечания Полная поддержка 3 Notes Notes В версиях с 3 по 4.3 существует серьезная ошибка, из-за которой `text-rendering: optimizeLegibility` приводит к тому, что пользовательские веб-шрифты не отображаются. Это было исправлено в версии 4.4.	Хром Android Полная поддержка 18 Примечания Полная поддержка 18 Примечания Примечания Это свойство поддерживается только в Windows и Linux. Примечания Первоначальные версии содержали ошибки в Windows и Linux, которые нарушали подстановку шрифтов, капители, интервалы между буквами или приводили к перекрытию текста.	Firefox Android Полная поддержка 46	Opera Android Полная поддержка 14	Сафари iOS Полная поддержка 4.2	Самсунг Интернет Android Без поддержки № Примечания Без поддержки № Примечания Примечания Это свойство поддерживается только в Windows и Linux. Самсунг интернета нет на винде или линуксе.
`авто` Нестандартный	Хром Полная поддержка 4 Примечания Полная поддержка 4 Notes Notes Chrome обрабатывает `auto` как `optimSpeed` .	Край Полная поддержка 79 Примечания Полная поддержка 79 Примечания Примечания Edge обрабатывает `auto` как `optimSpeed` .	Firefox Полная поддержка 1 Примечания Полная поддержка 1 Примечания Примечания Если размер шрифта составляет 20 пикселей или больше, Firefox обрабатывает `auto` как `optimLegibility` . Для меньшего текста Firefox обрабатывает `auto` как `optimSpeed` . Пороговое значение в 20 пикселей можно изменить с помощью настройки `browser.display.auto_quality_min_font_size` .	ИЭ Без поддержки №	Опера Полная поддержка 15 Примечания Полная поддержка .	Сафари Полная поддержка 5 Примечания Полная поддержка 5 Notes Notes Safari обрабатывает `auto` как `optimSpeed` . См. ошибку WebKit 41363.	WebView Android Полная поддержка ≤37 Примечания Полная поддержка ≤37 Notes Notes WebView обрабатывает `auto` как `optimSpeed` .	Хром Android Полная поддержка 18 Примечания Полная поддержка 18 Примечания Примечания Хромированные украшения `авто` как `оптимизировать скорость` .	Firefox Android Полная поддержка 46 Примечания Полная поддержка 46 Примечания Примечания Если размер шрифта составляет 20 пикселей или больше, Firefox обрабатывает `auto` как `optimLegibility` . Для меньшего текста Firefox обрабатывает `авто` как `оптимизировать скорость` . Пороговое значение в 20 пикселей можно изменить с помощью настройки `browser. display.auto_quality_min_font_size` .	Опера Android Полная поддержка 14 Примечания Полная поддержка 14 Заметки Заметки Оперные сладости `авто` как `оптимизировать скорость` .	Сафари iOS Полная поддержка 4.2 Примечания Полная поддержка 4.2 Notes Notes Safari обрабатывает `auto` как `optimSpeed` . См. ошибку WebKit 41363.	Samsung Internet Android Без поддержки №
`GeometryPrecision` Нестандартный	Хром Полная поддержка 13 Примечания Полная поддержка 13 Примечания Примечания Поддерживает истинную геометрическую точность без округления вверх или вниз до ближайшего поддерживаемого размера шрифта в операционной системе.	Край Полная поддержка 79 Примечания Полная поддержка 79 Notes Notes Поддерживает истинную геометрическую точность без округления вверх или вниз до ближайшего поддерживаемого размера шрифта в операционной системе.	Firefox Полная поддержка 1 Примечания Полная поддержка 1 Примечания Примечания Firefox обрабатывает `GeometryPrecision` так же, как `OptimizeLegibility` .	ИЭ Без поддержки №	Опера Полная поддержка 15 Примечания Полная поддержка 15 Notes Notes Поддерживает истинную геометрическую точность без округления вверх или вниз до ближайшего поддерживаемого размера шрифта в операционной системе.	Сафари Полная поддержка 6	Веб-просмотр Android Полная поддержка 37 Примечания Полная поддержка 37 Notes Notes Поддерживает истинную геометрическую точность без округления вверх или вниз до ближайшего поддерживаемого размера шрифта в операционной системе.	Хром Android Полная поддержка 18 Примечания Полная поддержка 18 Notes Notes Поддерживает истинную геометрическую точность без округления вверх или вниз до ближайшего поддерживаемого размера шрифта в операционной системе.	Firefox Android Полная поддержка 46 Примечания Полная поддержка 46 Notes Notes Firefox обрабатывает `GeometryPrecision` так же, как `OptimizedLegibility` .	Опера Android Полная поддержка 14 Примечания Полная поддержка 14 Примечания Примечания Поддерживает истинную геометрическую точность без округления вверх или вниз до ближайшего поддерживаемого размера шрифта в операционной системе.	Сафари iOS Полная поддержка 6	Samsung Интернет Android Без поддержки №