Вспышка неустановленного текста при переключении шрифтов на загруженной странице

Question

Я работаю над небольшим побочным проектом, который позволит пользователям вводить текст и произвольно генерировать разные шрифты для своего введенного текста.Вот текущая работа demo .

В настоящее время мой метод загрузки в различные шрифты заключается в том, что когда пользователь нажимает кнопку «Создать», выбирается шрифт и егоКод встраивания Google Fonts или Typekit css устанавливается в качестве ссылки в моем html.

Html:

<link id="current-font" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">

JS:

document.getElementById('current-font').href = generatedFont.src;

Проблема IЯ сталкиваюсь с тем, что, иногда есть вспышка неустановленного текста, прежде чем сгенерированный шрифт загружается.Кажется, хуже со шрифтами Typekit.У кого-нибудь есть какие-либо предложения о том, как исправить этот случай FOUC?Или, если есть какие-либо рекомендации по улучшению загрузки шрифтов, я открыт.

Answer 1

Опция 1
Вы можете добавить font-display:swap к вашему @font-face, что он делает,
он гарантирует, что даже если шрифт еще не загружен, он все равно будетпоказать текст с системным шрифтом по умолчанию, и, как только шрифт будет загружен, отобразит настоящий шрифт.
Это также рекомендуется для Google Lighthouse.

Это удалит мигающий (невидимый текст длявидимый), хотя стиль шрифта все еще будет мигать (стиль шрифта по умолчанию соответствует новому стилю шрифта).

Вариант 2
Если вы хотите полностью решить проблему перепрошивки, загрузите все @font-face и прикрепите семейство font к некоторым элементам, которые не скрыты, как в display:none

Это, однако, не так удобно для производительности.

Answer 2

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