Задать вопрос

Font-dislay: swap. Как избежать смещение макета?

Здравствуйте.
Проблема заключается в следующем.

Задал подключение пользовательского шрифта и свойство font-display: swap
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/roboto_condensed/RobotoCondensed-Regular.ttf) format('truetype')
}


Также задал загрузку второго шрифта системного а также его масштабирование:
@font-face {
    font-family: 'Adjusted Arial';
    size-adjust: 89%; 
    src: local("Arial");
}

body {
    font-family: 'Roboto Condensed', 'Adjusted Arial', sans-serif;
}


Когда грузится второй шрифт смещение макета не происходит. Но при загрузке страницы все-равно происходит смещение (похоже на то, что шрифт не масштабируется при загрузке страницы).

В чем может быть проблема? Есть ли возможность этого избежать?
  • Вопрос задан
  • 395 просмотров
Подписаться 4 Средний 4 комментария
Пригласить эксперта
Ответы на вопрос 1
scoffs
@scoffs
Fullstack | C# | Student
Одним из возможных решений этой проблемы может быть использование опции font-display: optional вместо swap для пользовательского шрифта. Это позволит браузеру применять масштабирование шрифта сразу после его загрузки, даже если он еще не полностью загружен.

Вот пример кода:
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 400;
    font-display: optional;
    src: url(fonts/roboto_condensed/RobotoCondensed-Regular.ttf) format('truetype')
}


Также убедитесь, что шрифт Adjusted Arial доступен на устройствах, на которых отображается ваш сайт, и что он правильно загружается.

Однако имейте в виду, что изменение font-display может повлиять на воспринимаемую производительность сайта, поскольку оно может вызвать "сдвиг" текста после полной загрузки шрифта
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы