Почему шрифт на моей странице выглядит пиксельным, хотя в Google Fonts он отображается безупречно?

Я пытаюсь использовать Merriweather и Source Sans Pro для своего сайта. Эти шрифты выглядят безупречно на веб-сайте Google Fonts. Однако, когда я пытаюсь использовать их на своих веб-страницах, они выглядят пикселизированными. Даже в том же браузере, который отлично отображает их на сайте Google Fonts. Например

введите описание изображения здесь

Обе линии выглядят пикселизированными. Особенно первый aв шапке.

Любые указатели на то, что может быть проблемой?

Не уверен о чем ты. Шрифты отображаются в пикселях... ваше изображение имеет сглаживание. Может быть, показать сравнение со шрифтом того же размера и цвета, что и в Google Fonts?

Ответы (2)

Я не вижу ничего, что я бы назвал «пиксельным». Скорее, это больше похоже на проблему рендеринга. Я проверил это на сайте Google Fonts и с простым документом HTML, просматриваемым как в Firefox, так и в Chrome (Windows 10), с текстом одинакового размера, и рендеринг выглядит одинаково для меня.

Однако я заметил, что буква «а» не так хорошо отображается при некоторых размерах шрифта.

На 36px кривая верхнего этажа буквы «а» утолщена. Принимая во внимание, что на 35px это выглядит намного лучше. Что касается источника проблемы, я не уверен. Возможно, это проблема Win10, проблема с рендерингом браузера или, возможно, сам дизайн шрифта.

введите описание изображения здесь

Вот HTML, если кто-то хочет его протестировать:

 <!DOCTYPE html>
<html>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap" rel="stylesheet"> 
<body>

<h1 style="font-family: 'Merriweather', serif; font-size: 36px; font-weight: 700;">Leader election in Go</h1>
<h1 style="font-family: 'Merriweather', serif; font-size: 35px; font-weight: 700;">Leader election in Go</h1>

</body>
</html>

Это распространенная проблема со шрифтами, отображаемыми в Интернете. Существует старое CSS-решение, которое сглаживает внешний вид, еще больше смешивая субпиксельный рендеринг.

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
Почему шрифт на моей странице выглядит пиксельным, хотя в Google Fonts он отображается безупречно?
СпросиСетьПолитика конфиденциальности1y, 0v