Из-за чего может прыгать шрифт?

Question

[ksurill]

Добрый день, столкнулся с проблемой прыгающего шрифта.

Был выбран шрифт в google fonts - ProstoOne, но оказалось что на разных размерах шрифта он прыгает, т.е. на 19px буквы одного размера, а на 21 уже разного.



Понятно, что самый простой способ решения проблемы - выбрать другой шрифт.

Но интересно существует ли какое-то решение, которое может исправить эту проблему?

Comments

[Andrew]

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

[Евгений]

Почему не сделать размер чисел чётными?

[ksurill]

Andrew, я прикрепил ссылку на шрифт и скриншот, чтобы было видно. В googlefont можете "поиграть" с размерами шрифта, там это тоже хорошо видно.

Продублирую ссылку на шрифт: Ссылка

[ksurill]

Евгений, страницы уже готовы, некоторые элементы имеют размер шрифта заданный в em, который тоже не всегда кратен 1

А так, конечно этот вариант тоже может быть применим, но он не решает саму проблему

[Алекс Глебов]

Переоптимизирован, заменить только

[Евгений]

Хром, MacOS шрифт не прыгает

[ksurill]

Евгений, действительно проверил на MacOS - там все отображается корректно.

[Евгений]

ksurill, можно посмотреть в firefox, edge - там я думаю будет так же, сталкивался с такой проблемой в хроме. Рендер шрифта там так себе)

Answer 1

[Павел Чесноков]

Это не шрифт прыгает, это ваш браузер неправильно его масштабирует и неправильно сглаживает. Поиграйтесь с CSS стилями, например такими:

text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;

Answer 2

[Shamil_324]

Сторонние шрифты браузер воспринимает во в вторую очередь, поэтому в heag нужно прописать тег

<link rel="preload" href="/fonts/shrift.woff2" as="font">