Как сгладить подключенные шрифты через файлы в css?

Question

[PressOff]

Доброго времени суток!

Задача настроить сглаживание шрифтов, или сделать так же как на макете.

особенность: шрифты подключены через локальную папку.

подключены шрифты следующим образом:

/** 400 **/
@font-face {
    font-family: montserrat;
    src: url('fonts/Montserrat/Montserrat-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

/** 800 **/
@font-face {
    font-family: montserrat;
    src: url('fonts/Montserrat/Montserrat-ExtraBold.ttf');
    font-weight: 800;
    font-style: normal;
}

/** 600 **/
@font-face {
    font-family: montserrat;
    src: url('fonts/Montserrat/Montserrat-SemiBold.ttf');
    font-weight: 600;
    font-style: normal;
}

/** 500 **/
@font-face {
    font-family: montserrat;
    src: url('fonts/Montserrat/Montserrat-Medium.ttf');
    font-weight: 500;
    font-style: normal;
}

сейчас:


на макете:


код html:

<div class="block_two">
            <div class="block_two_info">
                <div class="block_two_info_description">
                    <p  class="helicopter_photo_shoot">Фотосессия в вертолете</p>
                </div>
                <div class="block_two_info_description">
                    <p class="helicopter_flight">Полет на вертолете это прекрасная возможность получить новые ощущения! А наш замечательный фотограф запечатлит лучшие моменты</p>
                </div>
                <div class="block_two_info_description_text">
                    <img src="/svg/time.svg" alt="">
                    <p class="block_two_text">3 часа съемки</p>
                </div>
                <div class="block_two_info_description_text">
                   <img src="/svg/camera.svg" alt="">
                    <p class="block_two_text">Более 50 фотографий</p>
                </div>
                <div class="block_two_info_description_text">
                   <img src="/svg/location.svg" alt="">
                    <p class="block_two_text">Москва</p>
                </div>
                <div class="block_two_info_description_text">
                   <img src="/svg/speech-bubble.svg" alt="">
                    <p class="block_two_text">Готовы ответить на любые вопросы</p>
                </div>
                <div class="block_two_info_description">
                   <img src="/svg/Groupcup.svg" alt="">
                    <p class="block_two_text_groupcup">Более 50 отзывов с оценкой </p>
                    <div class="vector_star"><img src="/png/Vectorstar.png" alt=""></div>
                    <div class="vector_star"><img src="/png/Vectorstar.png" alt=""></div>
                    <div class="vector_star"><img src="/png/Vectorstar.png" alt=""></div>
                    <div class="vector_star"><img src="/png/Vectorstar.png" alt=""></div>
                    <div class="vector_star"><img src="/png/Vectorstar.png" alt=""></div>
                </div>
            </div>
        </div>

/***********************
BLOCK TWO
************************/

.block_two{
    position: absolute;
    width: 900px;
    height: 500px;
    border: 1px solid black;
    top: 750px;
    margin-left: 20%;
}
.block_two_info{
    width: 450px;
    height: 499px;
    border: 1px solid black;
}

.block_two_info_description{
    width: 450px;
    height: 70px;
    display: flex;
}
.block_two_info_description_text{
    width: 450px;
    height: 40px;
    display: flex;
}

.helicopter_photo_shoot{
    font-family: montserrat;
    font-style: normal;
    font-weight: 500;
    color: #37373F;
    font-size: 30px;
    padding-right: 240px;
    letter-spacing:0.5px;
}

.helicopter_flight{
    font-family: Montserrat;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    color: #37373F;
    padding-right: 50px;
}

.block_two_text{
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    color: #37373F;
    padding-top: 10px;
    padding-left: 10px;
}

.block_two_text_groupcup{
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #37373F;
    padding-top: 24px;
    padding-left: 10px;
}

.vector_star{
    padding-top: 24px;
    padding-left: 5px;
}

Answer 1

[Максим Морев]

Здравствуйте.
У нас в вебе немного инструментов для сглаживания.
Всего один: font-smooth, предложенный давно-давно, да так и не внедрённый толком в браузерах.
Оно внедрено за префиксами в некоторых браузерах.
Есть ещё свойство text-rendering, которое влияет на отрисовку, но это история не про сглаживание.

Таким образом, если вы напишите что-то в духе:

html {
  -webkit-font-smoothing: antialiased; // or subpixel-antialiased
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

... и шрифты не придут в норму, то либо у вас битый шрифт, либо "вы сделали всё, что могли", других инструментов нет (я никогда и никому не буду рекомендовать для всех текстов на странице задать text-shadow, чтобы имитировать сглаживание).

Тот же Montserrat скачайте с Google Fonts и переконвертируйте самостоятельно - он точно может выглядеть нормально :)