ОНОВЛЕННЯ Серпень 2020
Вам більше не потрібно націлювати Safari за допомогою медіа-запиту, щоб увімкнути згладжування субпіксельних шрифтів. За замовчуванням нормально.
Однак , хоча за замовчуванням воно використовує субпіксельне згладжування шрифту, мазь у згладжуванні шрифту Chrome має значну кількість для тих, хто шукає послідовний рендеринг тексту .
- Це візуалізація Chrome світлим текстом на темному тлі
- Це візуалізація темного тексту Chrome на світлому фоні
Подивіться на розмір цілого в букві е вище. Світлий текст на темному тлі відтворюється з помітно більшою вагою, ніж темний текст на світлому фоні (з однаковим стилем css шрифту).
Одним із рішень для сайтів, які поважають налаштування темної / світлої теми користувача, є націлювання Chrome за допомогою медіа-запиту, обмеженого темним режимом, і переключення його на несубпіксельне згладжування приблизно так:
@media screen
and (-webkit-min-device-pixel-ratio: 0)
and (min-resolution: 0.001dpcm)
and (prefers-color-scheme: dark) {
body {
-webkit-font-smoothing: antialiased;
}
}
Результат :
Набагато більш послідовна вага тексту незалежно від того, чи відображати світло на темному чи темне на світлі.
Перегляньте паралельне порівняння до і після:
-
ОНОВИТИ Травень 2018
-webkit-font-smoothing: subpixel-antialiasedзараз не має ефекту в Chrome, але в Safari все ще значно покращує ситуацію, АЛЕ ТІЛЬКИ НА RETINA. Без нього в Safari на сітківках сітківки текст тонкий і безглуздий, тоді як разом з ним текст має належну вагу. Але якщо ви використовуєте це на дисплеях Safari без сітківки, (особливо при незначних значеннях) текст - катастрофа. Настійно рекомендую використовувати медіа-запит:
@media screen and (-webkit-min-device-pixel-ratio: 2) {
body {
-webkit-font-smoothing: subpixel-antialiased;
}
}
Явне налаштування -webkit-font-smoothing: subpixel-antialiasedє найкращим поточним рішенням, якщо ви хочете хоча б частково уникати більш тонкого згладженого тексту.
--tl; dr--
І в Safari, і в Chrome, де за замовчуванням для рендерингу шрифтів використовується субпіксельне згладжування, будь-який CSS, який змушує рендерінг на основі графічного процесора, як, наприклад, наведені вище пропозиції щодо використання перетворення з використанням translateZ або навіть просто переходу в масштабі, призведе до того, що Safari та Chrome автоматично "відмовляться" "для згладжування субпіксельних згладжених шрифтів і замість цього перейдіть до просто згладженого тексту, який виглядає набагато легшим і тоншим, особливо в Safari.
Інші відповіді зосереджувались на підтримці постійного рендерингу, просто встановлюючи або примушуючи згладжувати шрифт до тоншого згладженого тексту. На мій погляд, використання translateZ або прихованого тла значно погіршує якість відтворення тексту, і найкраще рішення, якщо ви хочете, щоб текст залишався незмінним, і з вами все в порядку, якщо тонший текст просто використовується -webkit-font-smoothing: antialiased. Однак явне налаштування -webkit-font-smoothing: subpixel-antialiasedнасправді має певний ефект - текст все ще незначно змінюється і майже помітно тонший під час переходів, відтворених на графічному процесорі, але не такий тонкий, як це відбувається без цього налаштування. Отже, схоже, це принаймні частково перешкоджає переходу до прямого згладженого тексту.