Справочник по сглаживанию светлого текста на темном фоне и предотвращению излишней жирности шрифтов на экранах macOS.
Стандартный сниппет антиалиасинга
body, html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Значения свойств и поведение рендеринга
WebKit и Blink (-webkit-font-smoothing)
| Значение | Поведение рендеринга |
|---|---|
auto |
Стандартное субпиксельное сглаживание браузера |
none |
Полное отключение сглаживания (ступенчатые края) |
antialiased |
Отображает текст со сглаживанием в градациях серого вместо субпикселей |
Firefox на macOS (-moz-osx-font-smoothing)
| Значение | Поведение рендеринга |
|---|---|
auto |
Стандартный субпиксельный рендеринг |
grayscale |
Отображает текст со сглаживанием в градациях серого |
Лучшие практики
- Темная тема / Темный фон: Сглаживание в градациях серого особенно эффективно для светлого текста на темном фоне, предотвращая визуальное расплывание шрифтов на дисплеях Retina.
- Светлый фон: Для стандартного темного текста на белом фоне значение по умолчанию (auto / субпиксельное) обычно обеспечивает более четкую читаемость.