0

На сайте подключен шрифт "Avenir Next Cyr" Сделано это так:

@font-face {
    font-family: 'Avenir Next Cyr';
    src: url(/static/fonts/AvenirNextCyrMedium/AvenirNextCyr-Medium.eot);
    src: url(/static/fonts/AvenirNextCyrMedium/AvenirNextCyr-Medium.eot?#iefix) format("embedded-opentype"), url(/static/fonts/AvenirNextCyrMedium/AvenirNextCyr-Medium.woff2) format("woff2"), url(/static/fonts/AvenirNextCyrMedium/AvenirNextCyr-Medium.woff) format("woff"), url(/static/fonts/AvenirNextCyrMedium/AvenirNextCyr-Medium.ttf) format("truetype"), url(/static/fonts/AvenirNextCyrMedium/AvenirNextCyr-Medium.svg#AvenirNextCyr-Medium) format("svg");
    font-weight: 500;
    font-style: normal
}
@font-face {
    font-family: 'Avenir Next Cyr';
    src: url(/static/fonts/AvenirNextCyrBold/AvenirNextCyr-Bold.eot);
    src: url(/static/fonts/AvenirNextCyrBold/AvenirNextCyr-Bold.eot?#iefix) format("embedded-opentype"), url(/static/fonts/AvenirNextCyrBold/AvenirNextCyr-Bold.woff2) format("woff2"), url(/static/fonts/AvenirNextCyrBold/AvenirNextCyr-Bold.woff) format("woff"), url(/static/fonts/AvenirNextCyrBold/AvenirNextCyr-Bold.ttf) format("truetype"), url(/static/fonts/AvenirNextCyrBold/AvenirNextCyr-Bold.svg#AvenirNextCyr-Bold) format("svg");
    font-weight: 700;
    font-style: normal
}
@font-face {
    font-family: 'Avenir Next Cyr';
    src: url(/static/fonts/AvenirNextCyrRegular/AvenirNextCyr-Regular.eot);
    src: url(/static/fonts/AvenirNextCyrRegular/AvenirNextCyr-Regular.eot?#iefix) format("embedded-opentype"), url(/static/fonts/AvenirNextCyrRegular/AvenirNextCyr-Regular.woff2) format("woff2"), url(/static/fonts/AvenirNextCyrRegular/AvenirNextCyr-Regular.woff) format("woff"), url(/static/fonts/AvenirNextCyrRegular/AvenirNextCyr-Regular.ttf) format("truetype"), url(/static/fonts/AvenirNextCyrRegular/AvenirNextCyr-Regular.svg#AvenirNextCyr-Regular) format("svg");
    font-weight: 400;
    font-style: normal
}
@font-face {
    font-family: 'Avenir Next Cyr';
    src: url(/static/fonts/AvenirNextCyrDemi/AvenirNextCyr-Demi.eot);
    src: url(/static/fonts/AvenirNextCyrDemi/AvenirNextCyr-Demi.eot?#iefix) format("embedded-opentype"), url(/static/fonts/AvenirNextCyrDemi/AvenirNextCyr-Demi.woff2) format("woff2"), url(/static/fonts/AvenirNextCyrDemi/AvenirNextCyr-Demi.woff) format("woff"), url(/static/fonts/AvenirNextCyrDemi/AvenirNextCyr-Demi.ttf) format("truetype"), url(/static/fonts/AvenirNextCyrDemi/AvenirNextCyr-Demi.svg#AvenirNextCyr-Demi) format("svg");
    font-weight: 600;
    font-style: normal
}

И вот когда на сайте масштаб стандартный 100%, шрифт получается немного замыленным. введите сюда описание изображения

Но если я поставлю масштаб сайта 110%, всё становится нормально: введите сюда описание изображения

Лучше всего видно на кнопке "READMORE", где ярко выражен этот контраст "чёткости"

Проблема наблюдается во всех браузерах, точнее: Edge, Yandex, Chrome, Firefox, Opera. UPD: Проблема на ряде ПК. Не только у меня и не только на 1 из моих мониторов. Вариант с "НЕ ТА ОСЬ", "НЕ ТОТ МОНИТОР" и т.п. отпадает. На телефоне такой проблемы нет и все шрифты чётко выражены. С чем вообще могут быть связаны такие проблемы на сайте и как это исправить?

2
  • С тем, что у вашего монитора плотность пикселей слишком маленькая? А шрифты рисуются системой, поэтому проверять в разных браузерах бессмысленно — нужно проверять в разных операционных системах
    – andreymal
    21 авг 2021 в 1:31
  • 3
    У шрифтов может быть различный хинтинг (настройки попадания в пиксель) или вовсе не быть. Пробуйте создавать этот шрифт различными конвертерами онлайн или в программе, с разными настройками хинтинга, возможно найдёте приемлемый вариант. А на мобиле плотность пикселей большая, там даже вообще без хинтинга нормально выглядит.
    – user347472
    21 авг 2021 в 1:37

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.