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

@alexsun7

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

Задал подключение пользовательского шрифта и свойство 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;
}

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

В чем может быть проблема? Есть ли возможность этого избежать?

Решения вопроса 0

Ответы на вопрос 1

@scoffs

Одним из возможных решений этой проблемы может быть использование опции 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 может повлиять на воспринимаемую производительность сайта, поскольку оно может вызвать «сдвиг» текста после полной загрузки шрифта

Похожие записи:

Добавить комментарий Отменить ответ