ОБНОВЛЕНИЕ Август 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 на экранах Retina текст будет тонким и безвкусным, тогда как с ним текст имеет надлежащий вес. Но если вы используете это на дисплеях без сетчатки в 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 или backface hidden значительно ухудшает качество рендеринга текста, и лучшее решение, если вы хотите, чтобы текст оставался последовательным, и вы в порядке с более тонким текстом, просто использовать -webkit-font-smoothing: antialiased. Однако явная настройка -webkit-font-smoothing: subpixel-antialiasedдействительно имеет некоторый эффект - текст по-прежнему немного меняется и становится заметно тоньше во время переходов, отображаемых на графическом процессоре, но не таким тонким, как без этого параметра. Так что, похоже, это хотя бы частично препятствует переходу на прямой сглаженный текст.