В Windows и, в некоторой степени, в Mac OS, с различными браузерами (Firefox, Chrome, Safari) наша строка меню имеет довольно пикселизированную/размытую отрисовку шрифта. Это на сайте ASP.NET Core 2.1, который использует Bootstrap 4.1.3, но его достаточно легко воспроизвести с помощью простого HTML: https://jsfiddle.net/2tgc9r84/
<html>
<body style="background-color:#e72c87;">
<p style="font-size:20pt;">
This is some text that looks terrible.
</p>
</body>
</html>
Интересно, что тот же шрифт прекрасно отображается в других частях сайта. Я заметил это на мониторе 4K с активированным масштабированием 150%, но проблема также проявляется при 100%. Я также пробовал это с разными шрифтами, так что, видимо, это не проблема со шрифтом.
Первоначально я думал, что это проблема с прозрачностью или преобразованиями, но, в конце концов, я попытался просто изменить цвет фона - и оказалось, что это размытие очень очевидно с красным и темно-синим (и, конечно, их комбинациями, такими как пурпурный), и почти незаметен с большинством других цветов. Кроме того, изменив основной цвет фона, я могу воспроизвести проблему для других областей.
Вы можете напрямую посмотреть на сайт, где это происходит, здесь: https://beat-the-rhythm-vr.com/Home/Social (навигация с размытым текстом появляется после принятия файлов cookie).
Вот изображение, демонстрирующее эффект с разным фоном, а также отрендеренное в Mac OS (скриншоты Mac OS на изображении меньше):
Насколько я могу судить, на iOS этого вообще не происходит. На Mac я не совсем вижу проблему на экране, но она становится очевидной при создании снимка экрана. Однако это также может быть артефактом из-за масштабирования на снимке экрана.
Вот как это выглядит на iOS (я получаю такое же размытие в Windows, когда делаю окно достаточно маленьким, чтобы получить тот же макет, что и на мобильном устройстве, так что это также не проблема, вызывающая это/исправление):
Очевидный вопрос: можно ли это как-то исправить, и если да, то как?
РЕДАКТИРОВАТЬ: это в дополнение к комментарию к ответу Портера (я не могу добавлять скриншоты в комментарии, поэтому публикую это здесь):
РЕДАКТИРОВАТЬ 2: Хотя эта статья посвящена немного другой проблеме, я предполагаю, что то, что я вижу, на самом деле является просто ограничением ClearType, которое связано с тем, что описано в статье: ClearType с учетом цвета требует доступа к фиксированным фоновым пикселям, что является проблемой, если вы не знаете, что такое фоновые пиксели, или если они не исправлены
ClearType, по-видимому, не работает, когда цвет фона неизвестен, и, судя по тому, что я вижу, он предназначен в первую очередь для черного текста на белом фоне, также хорошо работает со светлыми цветами на темном фоне, но не так сильно. для красного/синего/пурпурного фона (и любого цвета шрифта).
