CSS - белый текст на черном фоне, выглядит смелее

Ответ 1

Текст выделен жирным шрифтом из-за использования алгоритма сглаживания, используемого в вашем браузере. Легко проверить. Возьмите screengrabs в IE, Safari, Firefox и Chrome. Все они по-разному отличаются друг от друга. Некоторые делают текст более толстым, чем другие. Как правило, лучший текст выглядит белым на черном, толще он выглядит обратным.

Здесь есть полное объяснение: http://www.lighterra.com/articles/macosxtextaabug/

Это отключит сглаживание в большинстве браузеров:

body {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
}

Ответ 2

На самом деле это известный ошибка:

Я смог исправить это, используя:

-webkit-font-smoothing:antialiased

Источник: эта статья (cached on archive.org).

Поздно, но он может быть полезен для некоторых.

Просто помните это не рекомендуется. Если вы не используете MacOS и используете светлый текст на темном фоне.

Ответ 3

Это не оптическая иллюзия. Это проблема, связанная с ОС и браузером, которая все еще существует в 2018 году. Этот небольшой фрагмент демонстрирует проблему:

<div style="background-color: #000; font-size: 16px; position: relative;">
  <div style="color: #fff;">Hello World</div>
  <div style="color: #000; position: absolute; top:0;">Hello World</div>
</div>

Ответ 4

Я обнаружил, что комбинация font-smoothing: antialiased или font-smoothing: antialiased font-smoothing: grayscale (как упоминали другие) и text-rendering: optimizeLegibility может давать согласованные результаты для светлых и темных цветов, а также для разных браузеров. Вам необходимо выполнить правильное тестирование в каждом браузере, потому что вы не получаете одинаковые результаты с каждым шрифтом. Иногда только настройка font-smoothing делает свое дело, иногда только настройка text-rendering делает свое дело, а иногда вам нужно использовать оба варианта.

Ответ 5

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